使用Next.js 13搭配Google OAuth时遭遇Error 400: redirect_uri_mismatch错误

核心原因 #

部署到VPS后，next-auth仍在使用本地的redirect_uri，和Google Cloud控制台里配置的授权URI不匹配，导致400错误。

具体修复步骤 #

1. 更新Google Cloud控制台的授权URI

   • 进入Google Cloud控制台的OAuth 2.0客户端ID设置页面
   • 在「已授权的重定向URI」中添加你的真实域名对应的回调地址，格式为：https://你的域名/api/auth/callback/google（生产环境建议强制使用HTTPS）
   • 保留本地开发用的http://localhost:3000/api/auth/callback/google，方便后续调试
   • 保存配置更改

2. 修正Next-auth的环境变量配置

   • 在VPS的环境变量中，设置NEXTAUTH_URL为你的真实域名，例如https://你的域名
   • 本地开发时，在.env.local文件中将NEXTAUTH_URL设为http://localhost:3000，实现开发/生产环境区分
   • 注意：Next.js 13 App Router中，next-auth会自动读取NEXTAUTH_URL生成正确的redirect_uri，无需手动硬编码

3. 检查next-auth配置文件

   • 打开auth.ts（或auth.js）配置文件，确保Google provider配置中没有硬编码redirect_uri参数
   • 正确配置示例：

     providers: [
       GoogleProvider({
         clientId: process.env.GOOGLE_CLIENT_ID!,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
         // 不要手动设置redirect_uri，交由next-auth自动处理
       })
     ]
     

4. 清理缓存并重启服务

   • 重启VPS上的Next.js服务，确保新环境变量生效
   • 若使用Docker部署，需重新构建镜像并启动容器，避免旧配置缓存残留

额外注意事项 #

• 确认域名已正确解析到VPS的IP，且能正常访问
• 生产环境必须使用HTTPS，Google OAuth对生产环境回调地址强制要求HTTPS（localhost除外）
• 若仍报错，检查浏览器地址栏中的redirect_uri参数是否与Google控制台配置一致，排查是否存在反向代理（如Nginx）导致的URL改写问题

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