部署至Vercel后使用NextAuth Credentials Provider登录遇504错误

问题描述 #

开发模式下所有功能运行正常，但部署到Vercel平台后，使用NextAuth的Credentials Provider进行登录操作时触发504超时错误。已核对所有配置项，并在Vercel控制面板中配置了全部环境变量，怀疑是后端部署异常或NextAuth配置存在问题。

错误截图：

相关代码 #

[...nextauth].js

CredentialsProvider({
      name: "Credentials",

      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        const payload = {
          email: credentials.email,
          password: credentials.password,
        };
        const res = await fetch(`${process.env.NEXTAUTH_URL}/api/auth/signin`, {
          method: "POST",
          body: JSON.stringify(payload),
          headers: { "Content-Type": "application/json" },
        });

        const user = await res.json();

        if (res.ok && user) {
          return user;
        }

        return null;
      },
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {},
    async jwt({ token, user }) {
      return { ...token, ...user };
    },
    async session({ session, token, user }) {
      session = token;
      return session;
    },
  },
  pages: {
    signIn: "/auth/signin",

/auth/signin.js

<button
          className="border-2 w-[200px] h-[40px] uppercase"
          onClick={(e) => {
            e.preventDefault();
            signIn("credentials", {
              email: emailRef.current,
              password: passwordRef.current,
            });
          }}
        >
          Sign in
        </button>

排查方向与解决方案 #

1. 循环请求导致超时 #

你在authorize函数里请求了${process.env.NEXTAUTH_URL}/api/auth/signin，这会触发NextAuth的登录端点，而Credentials Provider的authorize本身就是登录流程的核心环节，直接形成循环请求，触发Vercel的超时限制返回504。

解决办法：
authorize函数应直接调用用户校验逻辑（比如数据库查询、独立的认证API），而非请求NextAuth自身的登录接口。示例：

async authorize(credentials, req) {
  // 直接调用你的用户验证接口或查询数据库
  const res = await fetch("https://your-auth-service.com/verify", {
    method: "POST",
    body: JSON.stringify(credentials),
    headers: { "Content-Type": "application/json" },
  });

  const user = await res.json();

  if (res.ok && user) {
    return user;
  }

  return null;
}

2. Vercel环境变量配置校验 #

• 确认NEXTAUTH_URL在Vercel中设置为部署后的实际域名（如https://your-project.vercel.app），开发与生产环境URL不能混用。
• 检查所有认证相关环境变量（如数据库连接串、API密钥）是否在Vercel的Production环境变量中正确配置，而非仅在Development环境。

3. 优化函数响应时间 #

Vercel Serverless函数默认超时为10秒，若authorize内的验证逻辑耗时过长，会触发504：

• 优化后端验证流程，减少响应耗时。
• 在Vercel项目设置中，将Serverless函数超时时间调整至最大值（60秒）。

4. 查看Vercel函数日志 #

登录Vercel控制面板，进入项目Functions菜单，查看/api/auth/[...nextauth]函数的执行日志，日志会显示具体错误细节（如请求失败原因、超时触发点），是定位问题的关键依据。

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