将 Cognito 与 React 应用程序一起使用时需要错误用户名和池信息答案

【问题标题】：Error Username and Pool information required while using Cognito with react app将 Cognito 与 React 应用程序一起使用时需要错误用户名和池信息
【发布时间】：2021-01-08 10:27:59
【问题描述】：

我正在尝试在 cognito 上创建一个带有 react 的演示应用程序。为了尝试一下，我正在尝试这个git_repo中的代码

但我收到错误 Username and Pool information required 。我不知道为什么。我设置了一个用户池和客户端 ID，并在代码中使用它们。在创建应用程序客户端时，我还取消选中框 Genereate client secret。

错误指向的行是 props.setSession(session);

import {
  AuthenticationDetails,
  CognitoUser,
  CognitoUserSession,
} from "amazon-cognito-identity-js";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import userPool from "../aws/UserPool";

type FormData = {
  email: string;
  password: string;
};

type LoginProps = {
  setSession: React.Dispatch<React.SetStateAction<CognitoUserSession | null>>;
};

const Login = (props: LoginProps) => {
  const { register, handleSubmit, errors } = useForm<FormData>();
  const history = useHistory();
  const [errorMessage, setErrorMessage] = useState("");

  const onSubmit = handleSubmit((values) => {
    const user = new CognitoUser({
      Username: values.email,
      Pool: userPool,
    });

    const authenticationDetails = new AuthenticationDetails({
      Username: values.email,
      Password: values.password,
    });

    user.authenticateUser(authenticationDetails, {
      onSuccess: (session) => {
        console.log("Login successful");
        props.setSession(session);
        history.push("/");
      },

      onFailure: (err) => {
        console.error("Login failed", err);
        setErrorMessage(`An error occurred while logging in: ${err?.message}`);
      },
    });
  });

  return (
    <div>
      <p>
        Welcome to this sample application <br /> Login below.
      </p>

      <form onSubmit={onSubmit} className="form">
        <input name="email" placeholder="email" type="email" ref={register} />
        {errors.email && errors.email.message}

        <input
          name="password"
          placeholder="password"
          type="password"
          ref={register}
        />
        {errors.password && errors.password.message}

        <button type="submit">Login</button>

        {errorMessage}
      </form>
    </div>
  );
};

export default Login;

谁能帮我解决我在这里遗漏的任何步骤？

【问题讨论】：

这个问题你解决了吗？

标签： reactjs amazon-web-services session amazon-cognito

【解决方案1】：

如果您设置了 Cognito 用户池，但尚未将其链接到身份池，您会得到这个。

如何修复

创建 Cognito 身份池（所有默认设置都可以）
在身份池的 Authentication Providers 中，将 用户池 ID 设置为您的 Cognito 用户池 ID
在同一部分中，将 App Client ID 设置为您的 User Pools Web Client ID

您可能需要使用以下密钥更新您的 src/aws_exports.js：

"aws_cognito_identity_pool_id": "TheNewIdentityPoolID"

这是您的其他 Amplify 身份验证密钥的补充，例如：

"aws_user_pools_id": "UserPoolID",
"aws_user_pools_web_client_id": "WebClientId",
"oauth": {
  "domain": "domain",
  "redirectSignin": "http://localhost:4321",
  "redirectSignOut": "http://localhost:4321",
"

【讨论】：