部署于Vercel的Next.js应用使用Next-auth登录后返回404如何解决

1. 正确配置GitHub OAuth回调地址 #

回调地址格式为 你的生产环境完整访问域名 + /api/auth/callback/github，需和实际访问地址完全匹配：

• 必须包含正确的http/https前缀
• 域名部分和你实际访问生产应用的域名完全一致（需区分是否带www、是否用自定义域名、非标准端口要加端口号）
• 路径部分严格为/api/auth/callback/github，不能多/少字符
  举个例子：如果你的生产应用访问地址是https://my-demo-app.com，那么GitHub OAuth的回调地址就填https://my-demo-app.com/api/auth/callback/github

2. Next.js项目端配置调整 #

环境变量配置 #

在部署平台的环境变量管理面板添加以下两个变量，配置完成后需要重新部署项目生效：

• NEXTAUTH_URL：值为你的生产环境完整域名前缀，不要加末尾斜杠，示例值：https://my-demo-app.com
• NEXTAUTH_SECRET：随机32位字符串，可通过命令openssl rand -hex 32生成，Next.js 13+及App Router架构的项目必须配置该变量

Next-auth路由文件校验 #

检查你的[...nextauth].js/ts文件，确认GitHub provider配置没有硬编码开发环境的回调地址，默认不需要手动填写callbackUrl参数，Next-auth会自动根据NEXTAUTH_URL拼接正确地址，正确配置示例如下：

// App Router 路径：app/api/auth/[...nextauth]/route.js
// Pages Router 路径：pages/api/auth/[...nextauth].js
import NextAuth from "next-auth"
import GitHubProvider from "next-auth/providers/github"
export const authOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      // 删掉手动添加的硬编码localhost回调地址
    })
  ],
  secret: process.env.NEXTAUTH_SECRET
}
export default NextAuth(authOptions)

3. 故障排查 #

如果配置后仍然跳转404，先访问生产环境的{你的域名}/api/auth/providers接口：

• 如果该接口返回404：说明Next-auth路由文件放置位置错误，确认文件路径、文件名完全符合上述示例要求
• 如果接口正常返回JSON格式的provider信息：重新检查GitHub OAuth的回调地址、项目环境变量配置是否和生产域名完全匹配

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