如何为搭配AWS Cognito使用的NextAuth.js制作自定义UI界面？

你的需求完全可以实现，主流有两种实现路径，可根据定制化需求选择：

方案1：仅跳过NextAuth默认中间页，保留Cognito托管登录页 #

这个方案改造成本最低，无需自行处理鉴权逻辑：

• 在NextAuth配置文件[...nextauth].ts（或.js）中添加配置项指定自定义登录页路由：

export default NextAuth({
  // 其他原有配置
  pages: {
    signIn: '/auth/signin',
  },
  providers: [
    CognitoProvider({
      // 原有Cognito相关配置
      clientId: process.env.COGNITO_CLIENT_ID,
      clientSecret: process.env.COGNITO_CLIENT_SECRET,
      issuer: process.env.COGNITO_ISSUER,
    })
  ]
})

• 新建/app/auth/signin/page.tsx（Pages Router对应pages/auth/signin.tsx）文件，开发你需要的自定义登录页UI，点击登录按钮时直接调用signIn('cognito')方法，就会直接跳转至Cognito托管登录页，不会再出现默认的仅含按钮的过渡页面。

方案2：完全替换Cognito托管登录页，全自定义UI逻辑 #

如果需要完全自研登录表单，不使用Cognito自带的登录页，可按以下步骤实现：

• 安装Cognito相关依赖：amazon-cognito-identity-js或@aws-amplify/auth
• 自定义登录表单收集账号、密码等信息，调用Cognito SDK的登录接口完成鉴权、MFA校验等流程，拿到Cognito返回的idToken、accessToken、refreshToken
• 在NextAuth配置中新增Credentials Provider，将Cognito返回的token传入NextAuth完成session创建
• 提交表单时调用signIn('credentials', { idToken: 你拿到的Cognito idToken, ...其他参数 })，在Credentials Provider的authorize回调中校验token有效性后返回用户信息，NextAuth会自动生成登录session

• 方案2需要你自行实现密码重置、邮箱验证、MFA处理等Cognito托管页自带的能力，适合对UI定制化要求极高的场景
• 方案1可满足绝大多数场景需求，开发量极小，不会修改原有Cognito的鉴权逻辑，稳定性更高

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