NextJS中Next-auth集成Azure AD登录遇OAuthCallback错误求助

问题现象 #

使用NextAuth集成Azure Active Directory实现登录时，点击登录按钮完成Microsoft账号登录后，重定向到api/auth/signin?error=OAuthCallback，页面显示"Try signing in with a different account."错误，无法正常进入应用。

排查与修复步骤 #

1. 补全并验证Azure AD配置参数

你的[...nextauth].ts中clientId、clientSecret、tenantId均为空，这是核心问题之一：

• 从Azure Portal的应用注册中获取对应值：
  • clientId：应用的"应用程序(客户端)ID"
  • clientSecret：在"证书和密码"中创建的客户端密码（注意保存创建时的密码值，后续无法查看）
  • tenantId：应用的"目录(租户)ID"
• 确保参数完全匹配，无拼写错误。

2. 配置正确的Azure AD重定向URI

在Azure Portal的应用注册身份验证页面，添加NextAuth的回调地址：

• 本地开发：http://localhost:3000/api/auth/callback/azure-ad
• 生产环境：https://你的域名/api/auth/callback/azure-ad
• 注意重定向URI的类型选择Web，并确保地址与NextAuth的回调路径完全一致。

3. 修复首页的自动登录逻辑

当前首页代码的登录触发条件有误，会导致登录回调后重复触发登录请求，陷入循环：

import { useSession, signIn } from "next-auth/react";
import { useEffect } from "react";

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

  // 仅在状态为未认证时触发登录
  useEffect(() => {
    if (status === "unauthenticated") {
      signIn("azure-ad"); // 指定Azure AD作为登录提供商
    }
  }, [status]);

  // 加载状态时显示占位内容，避免页面闪烁
  if (status === "loading") {
    return <div>加载中...</div>;
  }

  return <div>Home</div>;
}

4. 确保Azure AD应用拥有正确权限

• 在Azure Portal应用注册的API权限页面，添加Microsoft Graph的User.Read权限（对应代码中的scope）
• 点击"授予管理员同意"（针对租户级权限），否则普通用户登录时会提示权限不足。

5. 启用调试日志排查细节

添加环境变量NEXTAUTH_DEBUG=true启动项目，控制台会输出详细的OAuth回调流程日志，可定位具体错误（如token验证失败、权限缺失等）。

6. 完善NextAuth的回调配置（可选）

如果需要在session中返回用户信息，补充session回调：

export const authOptions: AuthOptions = {
  providers: [
    AzureADProvider({
      clientId: "你的clientId",
      clientSecret: "你的clientSecret",
      tenantId: "你的tenantId",
      authorization: { params: { scope: "openid profile user.Read email" } },
    }),
  ],
  session: {
    strategy: "jwt", // 使用JWT存储会话
  },
  callbacks: {
    async jwt({ token, account, user }) {
      // 登录成功后保存token和用户信息
      if (account) {
        token.accessToken = account.access_token;
        token.idToken = account.id_token;
        token.expiresAt = account.expires_at;
      }
      if (user) {
        token.user = user;
      }
      return token;
    },
    async session({ session, token }) {
      // 将JWT中的信息同步到session对象
      session.user = token.user as any;
      session.accessToken = token.accessToken as string;
      session.idToken = token.idToken as string;
      return session;
    },
  },
};

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