如何在AWS Amplify React UI注册表单中移除Username字段？

问题核心在于：即便你在formFields里只指定了email、password和确认密码，Amplify UI的Authenticator组件仍会默认渲染Username字段——这是因为你的Cognito配置将email设为用户名标识，但组件本身默认认为Username是必填项，不会自动排除它。

解决方案 #

在formFields的signUp配置中显式添加username字段并设置为隐藏，同时保留你需要的三个字段即可：

function Auth(){
  const formFields = {
    signUp: {
      // 隐藏默认渲染的Username字段
      username: {
        hidden: true
      },
      email: {
        order: 1
      },
      password: {
        order: 2
      },
      confirm_password: {
        order: 3
      }
    }
  };

  return <Authenticator formFields={formFields} />;
}

原理说明 #

你的Cognito配置username_attributes = ["email"]已经正确将邮箱作为用户的唯一标识，用户输入的email会自动映射到Cognito的username属性。但Amplify UI组件不会自动感知这一配置，仍会默认渲染Username输入框，所以必须手动添加该字段并设置hidden: true来隐藏它，这样既能只显示你需要的三个字段，也不会影响正常注册流程。

你的Cognito配置本身没有问题，无需调整。

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