Supabase/React Google认证本地正常，Vercel生产环境无法访问

核心问题 #

你的问题是OAuth认证流程里的重定向URI仍被硬编码为localhost，和编译环节无关，主要是配置和代码里的环境变量没处理到位。

具体修复步骤 #

• 修正Google Cloud OAuth配置错误

  • 重定向URI多了冗余斜杠：把https://myproject.vercel.app//api/auth/callback改成https://myproject.vercel.app/api/auth/callback
  • 域名不一致：你填的JS源是https://my-projects.vercel.app，重定向URI是https://myproject.vercel.app，少了s，必须统一成完全匹配的域名

• 替换代码里的硬编码地址

  • 不要直接写http://localhost:5173，改用环境变量：
    • 如果是Create React App，在Vercel项目设置里添加环境变量REACT_APP_BASE_URL，值为你的Vercel域名
    • 如果是Next.js，添加NEXT_PUBLIC_BASE_URL
  • 代码里用环境变量拼接重定向URI：

    const redirectUri = `${process.env.REACT_APP_BASE_URL}/api/auth/callback`;
    

• 验证Vercel环境变量加载

  • 去Vercel项目的「Settings」→「Environment Variables」确认变量已添加，部署日志里能搜到变量名称说明已生效

• 清除缓存测试

  • 旧的重定向地址可能被浏览器缓存，用无痕模式或清除缓存后再测试，避免旧配置干扰

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