React集成Cognito出现空白页及必填参数报错求助

1. 核心错误：配置键名拼写错误 #

控制台抛出的Both UserPoolId and ClientId are required错误，根源是你在UserPool.js里的配置键名写错了——Cognito的CognitoUserPool要求的键是UserPoolId（最后一个字母为小写d），而你写的是UserPoolID（大写D），导致Cognito无法识别配置参数。

修改后的UserPool.js：

import { CognitoUserPool } from "amazon-cognito-identity-js";
const poolData = {
    UserPoolId: process.env.COGNITO_USER_POOL, // 修正键名：UserPoolId
    ClientId: process.env.COGNITO_USER_CLIENT,
} 
export default new CognitoUserPool(poolData);

即使不用环境变量，键名错误也会触发同样的必填提示，这是你问题的核心所在。

2. 修复用户注册方法调用错误 #

CognitoUserPool并没有Register方法，正确的用户注册方法是signUp，且参数格式需要符合Cognito的要求：

// 替换Register.js中handleSubmit里的UserPool.Register(userData)
UserPool.signUp(
  userData.email, // 用户名（通常用邮箱作为Cognito用户名）
  userData.password, // 用户密码
  [
    { Name: "name", Value: userData.name } // 自定义用户属性，需和Cognito用户池配置的属性匹配
  ],
  null, // 验证数据（可选参数）
  (err, result) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log("注册成功", result.user);
    // 这里可以添加注册成功后的跳转或其他逻辑
  }
);

3. 补充其他代码遗漏问题 #

• 你使用了useNavigate但未导入，需要在Register.js顶部添加：

  import { useNavigate } from 'react-router-dom';
  

• 使用了axios但未导入，添加：

  import axios from 'axios';
  

• redirectToCompleted函数未定义，补充实现（根据你的路由路径调整）：

  const redirectToCompleted = () => {
    history('/registration-completed');
  };
  

• userData.terms在state初始值中缺失，添加到useState：

  const [userData, setUserData] = useState({
    name: "",
    email: "",
    password: "",
    password2: "",
    terms: false // 新增terms属性
  });
  

内容的提问来源于stack exchange，提问作者MaxxABillion