【已解决】【问题咨询】NextJS14+NextAuth Google 登录报错但 GitHub 登录正常问题求助：Ne

背景描述

个人情况：本职产品经理，代码能力比较渣
最近在尝试独立开发网站，想用开源模板实现 Google 登录练手

需求描述

我 fork 了一个 Next.JS 开源模板 github.com/tonyljx/Run… ，想实现 Google 登录功能（无数据库），在本地开发的时候遇到了如题所示的问题，Google 登录会一直报错，但同时 GitHub 登录正常。想请教各位技术大佬该如何解决或者是否有其他排查思路。

开发环境

MBP M2 + 最新版 Chrome + Cursor
NextJS14 App Router
node v20.11.0
npm 10.2.4
next-auth": "^4.24.7"（来自package.json）
"oauth": "^0.9.15"（来自package.json）
"openid-client": "^5.4.0"（来自package.json）

复现步骤

点击首页导航栏右上角 login 展开弹窗
在弹窗中点击 Google 登录按钮
等待 x 秒后页面跳转到报错页面

复现步骤截图

截屏2024-09-20 11.38.29.png

Google Cloud 凭据配置

.env.local 和 .env.production 中 Google 登录凭据字段，一开始.local 和 .production 都用同一套Google 凭据（clientId+ClientSecret）一直报错，后来尝试把 .local 和 .production 使用两套凭据，也会超时报错。以下截图是两套不同凭据的配置截图：

Google Cloud Platform 配置截图截屏2024-09-20 11.42.52.png

Cursor 终端报错信息截屏2024-09-20 11.47.07.png

我还尝试了以下方法

增加 GoogleProvider 等待时长（ httpOptions:{timeout:50000} ），仍然报错
参考 GitHub 某个 Issue 的建议更改 Google Cloud 凭据配置参数，仍然报错。

local 和 production 都换成同一个凭据，且在凭据中增加 http://localhost（信任源）和 http://localhost/api/auth/callback/google （回调URI）
local 和 production 都换成同一个凭据，且在 a 基础上把线上域名和 localhost:3000 都加到信任源和回调 uri
local 和 production 都换成同一个凭据，且在 b 基础上额外增加 http://localhost（不加端口 3000），回调也加

用 Chrome 浏览器的隐私模式打开网页，仍然报错
电脑连接手机热点而不是家里 wifi，仍然报错
直接把代码部署到 Vercel，线上生产环境也会报错
修改电脑系统设置 DNS 为 8.8.8.8 和 8.8.4.4，也会报错

相关代码

代码目录结构

截屏2024-09-22 16.46.04.png

代码

//src/app/api/auth/[...nextauth]/option.ts

//src/app/api/auth/[...nextauth]/option.ts  
export const authOptions: NextAuthOptions = {  

secret: process.env.NEXTAUTH_SECRET,  
  
// Configure one or more authentication providers  
providers: [  
GithubProvider({  
clientId: process.env.GITHUB_APP_CLIENT_ID as string,  
clientSecret: process.env.GITHUB_APP_CLIENT_SECRET as string,  
}),  
GoogleProvider({  
clientId: process.env.GOOGLE_CLIENT_ID as string,  
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,  
httpOptions: {  
timeout: 50000,  
},  
}),  
],  
  
debug: true,  
  
pages: {  
},  
};

//src/app/api/auth/[...nextauth]/route.ts

//src/app/api/auth/[...nextauth]/route.ts  
//这里的代码没有改过  

import NextAuth from "next-auth";  
import { authOptions } from "./option";  
  
const handler = NextAuth(authOptions);  
  
export { handler as GET, handler as POST };

//.env.local

//.env.local  
GITHUB_APP_CLIENT_ID="Ov2****" //已隐藏部分密码，下同  
GITHUB_APP_CLIENT_SECRET="313****"  
  
GOOGLE_CLIENT_ID="614****"  
GOOGLE_CLIENT_SECRET="GOC****"  
  
NEXTAUTH_SECRET="OtA****"  
NEXTAUTH_URL="http://localhost:3000" # 开发环境`

//.env.production

//.env.production  
GITHUB_APP_CLIENT_ID="Ov2****" //与.env.local 配置相同  
GITHUB_APP_CLIENT_SECRET="313****" //与.env.local 配置相同  
  
GOOGLE_CLIENT_ID="614****" //与.env.local 配置相同  
GOOGLE_CLIENT_SECRET="GOC****" //与.env.local 配置相同  
  
NEXTAUTH_SECRET="OtA****" //与.env.local 配置不同  
NEXTAUTH_URL="https://test-running-dev.vercel.app" # 生产环境

预期逻辑

希望本地开发环境和线上生产环境都可以正常登录 Google。
如果信息不足，可以留言，我可以继续提供更多补充信息
已经咨询 cursor 和 claude 3.5 sonnet 多次，已经陷入到让我检查网络连接和清除缓存重新 npm -i 的死循环，所以来求助各位大佬，如果有详细解法或者其他排查思路都感激不尽。谢谢！