如何用@aws-amplify/ui-react的Authenticator组件实现邮箱验证流程？

要实现新用户登录前必须完成邮箱验证的流程，核心是调整Cognito用户池的配置，新版Authenticator组件会自动适配这个规则，具体步骤如下：

1. 配置Cognito用户池验证规则 #

• 登录AWS控制台，进入目标Cognito用户池
• 切换到「MFA和验证」选项卡，在「验证类型」中勾选「电子邮件」
• 找到「用户验证要求」，勾选「用户必须验证其电子邮件地址才能登录」
• 确认邮件发送配置正常（可使用Cognito默认邮件服务或关联SES）

如果是通过Amplify CLI管理项目，可运行以下命令更新配置：

amplify update auth

然后按照提示选择「修改用户池设置」，开启邮箱验证并设置登录前必须验证的规则。

2. 调整用户创建流程 #

自助注册场景 #

如果是用户自助注册，用户池开启邮箱验证后，新用户注册时会自动收到验证邮件，必须验证邮箱后才能进入登录流程，无需额外代码修改。

管理员创建用户场景 #

如果是管理员通过控制台或API创建用户，需要确保：

• 创建用户时，将email_verified属性设为false
• 触发验证邮件发送（控制台创建时勾选「发送验证邮件」；API调用时设置MessageAction为SEND）

此时用户会先收到验证邮件，验证完成后才能使用临时密码登录并修改密码。

3. 新版Authenticator组件适配 #

新版Authenticator组件会自动识别用户池的验证规则，无需额外自定义组件逻辑，基础使用示例如下：

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <div>
          <h1>欢迎，{user.username}</h1>
          <button onClick={signOut}>退出登录</button>
        </div>
      )}
    </Authenticator>
  );
}

export default App;

当用户未验证邮箱时，组件会自动引导用户进入邮箱验证流程，完成验证后才会进入登录/密码修改环节。

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