NextAuth部署Vercel后仍重定向至localhost问题求助

使用NextAuth 4.22.0搭配Next.js 13.3.0（App目录结构）开发应用，本地开发模式下认证功能正常，会按预期重定向回localhost:3000，但部署到Vercel后，认证成功仍会重定向到localhost:3000，最终跳转至http://localhost:3000/api/auth/signin?error=OAuthCallback。

相关代码 #

NextAuth路由文件（路径：app/api/auth/[...nextauth]/route.ts） #

import NextAuth, { type NextAuthOptions } from "next-auth"

// Providers
import GoogleProvider from "next-auth/providers/google"
import FacebookProvider from "next-auth/providers/facebook"
import GitHubProvider from "next-auth/providers/github"

// Prisma Adapter
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),

  secret: process.env.SECRET,

  session: {
    strategy: "jwt",
  },
  providers: [
    GoogleProvider({
      // @ts-ignore
      clientId: process.env.GOOGLE_CLIENT_ID,
      // @ts-ignore
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    FacebookProvider({
      // @ts-ignore
      clientId: process.env.FACEBOOK_CLIENT_ID,
      // @ts-ignore
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
    GitHubProvider({
      // @ts-ignore
      clientId: process.env.GITHUB_ID,
      // @ts-ignore
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  callbacks: {
    session: ({ session, token }) => {
      return {
        ...session,
        user: {
          ...session.user,
          id: token.id,
          randomKey: token.randomKey,
        },
      }
    },
    jwt: ({ token, user }) => {
      if (user) {
        const u = user as unknown as any
        return {
          ...token,
          id: u.id,
          randomKey: u.randomKey,
        }
      }
      return token
    },
  },
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

handleSignIn函数 #

const handleSignIn = async (provider: string) => {
    switch (provider) {
      case "github":
        setIsSigningInWithGitHub(true)
        break
      case "google":
        setIsSigningInWithGoogle(true)
        break
      case "facebook":
        setIsSigningInWithFacebook(true)
        break
      default:
        break
    }
    await signIn(provider, {
      redirect: false,
      callbackUrl: `/`,
    })

    setIsSigningInWithGitHub(false)
    setIsSigningInWithGoogle(false)
    setIsSigningInWithFacebook(false)
  }

按钮调用示例 #

<button
  type="button"
  onClick={() => handleSignIn("github")}
>
  <FaGithub className="mr-2 -ml-1 h-4 w-4" />
  {isSignIn ? "Continue with GitHub" : "Sign up with GitHub"}
</button>

解决方法 #

问题出在以下关键配置点：

• 缺失NEXTAUTH_URL环境变量
  部署到Vercel时，NextAuth需要明确生产环境的域名，否则会默认使用localhost。在Vercel的环境变量中添加NEXTAUTH_URL，值为你的Vercel应用完整域名（例如https://your-app.vercel.app）。本地开发时该变量可设为http://localhost:3000或留空，NextAuth会自动识别。

• OAuth平台回调地址未更新
  检查Google、Facebook、GitHub等OAuth平台的开发者后台，将回调地址更新为Vercel域名对应的NextAuth路径：

  • Google：https://your-app.vercel.app/api/auth/callback/google
  • GitHub：https://your-app.vercel.app/api/auth/callback/github
  • Facebook：https://your-app.vercel.app/api/auth/callback/facebook
    之前本地开发使用的localhost回调地址必须替换为生产域名。

• 优化callbackUrl传递（可选）
  避免硬编码路径，改为动态获取当前域名：

  await signIn(provider, {
    redirect: false,
    callbackUrl: window.location.origin + '/',
  })
  

完成上述配置后重新部署Vercel应用，认证后的重定向即可指向生产域名。

内容的提问来源于stack exchange，提问作者Mathias Riis Sorensen