使用next-auth.js对接Azure AD B2C遇redirect_uri_mismatch错误求助

在使用NextAuth.js通过Azure AD B2C实现登录时，出现redirect_uri_mismatch错误，提示内容如下：

请求中提供的重定向URI 'http://localhost:3000/api/auth/callback/azure-ad-b2c'未针对客户端ID 'c716xxx8406'注册。

当前项目配置 #

NextAuth路由配置代码 #

const handler = NextAuth({
    AzureADB2CProvider({
        tenantId: process.env.AZURE_AD_B2C_TENANT_NAME,
        clientId: process.env.AZURE_AD_B2C_CLIENT_ID!,
        clientSecret: process.env.AZURE_AD_B2C_CLIENT_SECRET!,
        primaryUserFlow: process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW,
        authorization: { params: { scope: "offline_access openid" } },
    })
],
pages: {
    signIn: '/'
}
})
export { handler as GET, handler as POST }

登录按钮组件代码 #

export default function Home() {
  const { data: session } = useSession()

  return (
    <main className={styles.main}>
      <p>
        Signed in as {session?.user?.email ?? ''}
      </p>
      <button onClick={() => signIn('azure-ad-b2c')}>sign az</button>
      <button onClick={() => signOut()}>sign out</button>
    </main>
  )
}

环境信息 #

• Next.js版本：13.4.1
• NextAuth.js版本：4.22.1

需要补充的配置步骤 #

1. 在Azure AD B2C中注册重定向URI #

• 进入Azure门户，找到目标AD B2C租户及对应客户端ID的应用注册
• 切换到身份验证选项卡，点击添加平台并选择Web
• 输入重定向URI：http://localhost:3000/api/auth/callback/azure-ad-b2c，勾选ID令牌（隐式流所需），若需要API访问可同时勾选访问令牌
• 保存配置

2. 修正NextAuth配置的语法错误 #

你的代码中缺少providers键，需修正为完整的数组结构：

const handler = NextAuth({
  providers: [
    AzureADB2CProvider({
      tenantId: process.env.AZURE_AD_B2C_TENANT_NAME,
      clientId: process.env.AZURE_AD_B2C_CLIENT_ID!,
      clientSecret: process.env.AZURE_AD_B2C_CLIENT_SECRET!,
      primaryUserFlow: process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW,
      authorization: { params: { scope: "offline_access openid" } },
    })
  ],
  pages: {
    signIn: '/'
  }
})

3. 验证环境变量配置 #

• 确保.env.local文件中所有Azure相关变量拼写正确，格式示例：

AZURE_AD_B2C_TENANT_NAME=你的租户域名.onmicrosoft.com
AZURE_AD_B2C_CLIENT_ID=c716xxx8406
AZURE_AD_B2C_CLIENT_SECRET=你的客户端密钥
AZURE_AD_B2C_PRIMARY_USER_FLOW=B2C_1_你的用户流名称

• 重启Next.js开发服务器，确保环境变量生效

4. 提前规划生产环境配置（若后续部署） #

如果要部署到生产环境，需在Azure应用注册中添加对应生产域名的重定向URI，例如https://你的域名.com/api/auth/callback/azure-ad-b2c

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