修改Facebook邮箱后Amplify signInWithRedirect登录报attributes required: [email]错误

这个问题不少开发者都遇到过，不属于操作错误，主要是Facebook权限返回变化和Amplify/Cognito的配置逻辑导致的。

问题原因 #

• Facebook账户修改邮箱后，可能出现用户授权的email权限失效，或者Facebook的Graph API不再返回email字段（受隐私政策或用户设置影响）
• AWS Cognito用户池配置中，email属性被设为必填项，但第三方登录（Facebook）未提供该字段，导致Amplify验证失败

解决办法 #

1. 确认Facebook应用权限配置 #

登录Facebook开发者后台，检查你的应用是否已添加email权限，并确保在Amplify auth配置中显式声明该权限：

// amplify/auth/resource.ts 示例配置
export const auth = defineAuth({
  loginWith: {
    facebook: {
      clientId: process.env.FACEBOOK_CLIENT_ID,
      scopes: ['email', 'public_profile'] // 显式声明需要email权限
    }
  }
});

2. 调整Cognito用户池属性要求 #

• 若业务允许用户暂不提供邮箱，可在Cognito用户池设置中，将email属性改为非必填项（注意这会影响密码重置等依赖邮箱的功能，需权衡业务需求）
• 若必须保留email必填，需配置Cognito第三方身份提供者的属性映射，确保Facebook返回的email字段正确映射到Cognito的email属性

3. 代码层面兜底处理缺失的邮箱 #

当捕获到attributes required: [email]错误时，引导用户补充邮箱并完成属性更新：

const onClickFacebookSignIn = React.useCallback(async () => {
  try {
    await signInWithRedirect({ provider: 'Facebook' });
  } catch (error) {
    if (error instanceof Error && error.message.includes('attributes required: [email]')) {
      const userEmail = window.prompt('请输入您的邮箱地址');
      if (userEmail) {
        const session = await fetchAuthSession();
        if (session.userSub) {
          await updateUserAttributes({
            user: { userId: session.userSub },
            attributes: { email: userEmail }
          });
          await fetchAuthSession(); // 重新获取会话完成登录
        }
      }
    } else {
      console.warn(error);
    }
  }
}, []);

4. 引导用户检查Facebook隐私设置 #

提醒用户检查Facebook账户的隐私设置，确保允许应用获取其邮箱地址——部分用户修改邮箱后，可能无意中调整了隐私权限，导致应用无法获取email字段。

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