Next.js(App Router)集成Azure AD B2C时next-auth登录OAuth错误

问题 #

基于Next.js（App Router）开发应用，集成next-auth与Azure AD B2C作为认证提供商，按文档配置后，访问登录页时出现next-auth.js.org/errors#signin_oauth_error错误，终端返回详细错误栈：

https://next-auth.js.org/errors#signin_oauth_error expected 200 OK, got: 404 Not Found {
  error: {
    message: 'expected 200 OK, got: 404 Not Found',
    stack: 'OPError: expected 200 OK, got: 404 Not Found\n' +
      '    at processResponse (webpack-internal:///(rsc)/./node_modules/.pnpm/openid-client@5.6.4/node_modules/openid-client/lib/helpers/process_response.js:37:15)\n' +        
      '    at Issuer.discover (webpack-internal:///(rsc)/./node_modules/.pnpm/openid-client@5.6.4/node_modules/openid-client/lib/issuer.js:142:22)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async openidClient (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.6_next@13.5.5_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/lib/oauth/client.js:12:18)\n' +
      '    at async getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.6_next@13.5.5_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/lib/oauth/authorization-url.js:88:20)\n' +
      '    at async Object.signin (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.6_next@13.5.5_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/signin.js:21:30)\n' +
      '    at async AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.6_next@13.5.5_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:259:36)\n' +
      '    at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.6_next@13.5.5_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:50:30)\n' +
      '    at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.6_next@13.5.5_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:85:24)\n' +
      '    at async D:\\PhpstormProjects\\AlternateLtd\\moti\\moti-frontend\\node_modules\\.pnpm\\next@13.5.5_react-dom@18.2.0_react@18.2.0\\node_modules\\next\\dist\\compiled\\next-server\\app-route.runtime.dev.js:6:62499',
    name: 'OPError'
  },
  providerId: 'azure-ad-b2c',
  message: 'expected 200 OK,

包版本：

• next: 13.5.5
• next-auth: ^4.24.6

代码片段（api/auth/[...nextauth]/route.ts）：

import NextAuth from "next-auth";
import AzureADB2CProvider from "next-auth/providers/azure-ad-b2c";

if (
  !process.env.AZURE_B2C_TENANT_ID ||
  !process.env.AZURE_B2C_TENANT_NAME ||
  !process.env.AZURE_B2C_CLIENT_ID ||
  !process.env.AZURE_B2C_CLIENT_SECRET ||
  !process.env.AZURE_B2C_PRIMARY_USER_FLOW ||
  !process.env.NEXT_AUTH_SECRET
) {
  throw new Error("Auth required env variables are not set");
}

export const authOptions = {
  providers: [
    AzureADB2CProvider({
      tenantId: process.env.AZURE_AD_B2C_TENANT_NAME as string,
      clientId: process.env.AZURE_B2C_CLIENT_ID as string,
      clientSecret: process.env.AZURE_B2C_CLIENT_SECRET as string,
      primaryUserFlow: process.env.AZURE_B2C_PRIMARY_USER_FLOW as string,
      authorization: { params: { scope: "offline_access openid" } },
      checks: ["pkce"],
      client: {
        token_endpoint_auth_method: "none",
      },
    }),
  ],
  secret: process.env.NEXT_AUTH_SECRET,
};

export const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

排查原因与解决方法 #

1. 环境变量映射错误 #

代码中AzureADB2CProvider的tenantId使用了AZURE_AD_B2C_TENANT_NAME，但环境变量检查同时存在AZURE_B2C_TENANT_ID和AZURE_B2C_TENANT_NAME，导致OpenID Connect发现端点构造错误，返回404。

解决：
确认Azure AD B2C租户ID格式（通常是{tenant-name}.onmicrosoft.com或GUID），统一环境变量映射：

// 改为使用正确的租户ID环境变量
tenantId: process.env.AZURE_B2C_TENANT_ID as string,

2. 用户流名称错误 #

primaryUserFlow必须是Azure AD B2C中已创建用户流的完整名称（如B2C_1_signupsignin1），拼写错误或不存在会导致发现端点404。

解决：

• 登录Azure门户，进入Azure AD B2C服务，复制用户流列表中的正确名称
• 确保AZURE_B2C_PRIMARY_USER_FLOW环境变量值与用户流名称完全一致

3. PKCE配置与Azure AD B2C不兼容 #

代码中设置checks: ["pkce"]和token_endpoint_auth_method: "none"，但Azure AD B2C对PKCE的支持需匹配应用注册配置：

• 若应用注册配置了客户端密钥，需移除token_endpoint_auth_method: "none"，使用默认的client_secret_post认证方式
• 若启用PKCE，需确保Azure AD B2C应用注册的认证设置中允许PKCE

修改示例：

AzureADB2CProvider({
  // ...其他配置
  checks: ["pkce"],
  // 移除下方配置（如果应用注册有客户端密钥）
  // client: { token_endpoint_auth_method: "none" },
}),

4. 验证OpenID发现端点 #

手动构造并访问OpenID发现端点，确认是否返回200：

https://{tenant-id}.b2clogin.com/{tenant-id}.onmicrosoft.com/{user-flow}/v2.0/.well-known/openid-configuration

替换{tenant-id}和{user-flow}为实际值，若返回404，说明租户ID或用户流名称错误，需修正。

5. 回调URL配置错误 #

Azure AD B2C应用注册的回调URL必须与next-auth自动生成的回调URL一致（通常为http://localhost:3000/api/auth/callback/azure-ad-b2c）。

解决：

• 登录Azure门户，进入应用注册的"认证"->"平台配置"，添加正确的回调URL
• 设置环境变量NEXTAUTH_URL为应用根URL（如http://localhost:3000），确保next-auth生成正确的回调地址

内容的提问来源于stack exchange，提问作者Kelvin Kiptum Kiprop