Next.js中无法使用Google登录的问题求助

问题现象 #

点击登录按钮后能看到Google账户列表，但选择账户后出现报错（截图：），终端报错信息如下：

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error expected 200 OK, got: 403 Forbidden {
  error: OPError: expected 200 OK, got: 403 Forbidden
      at async Client.validateIdToken (D:\my next js app\my-app\node_modules\openid-client\lib\client.js:745:49)
      at async Client.callback (D:\my next js app\my-app\node_modules\openid-client\lib\client.js:488:7)
      at async oAuthCallback (D:\my next js app\my-app\node_modules\next-
      at async DevServer.handleRequest (D:\my next js app\my-app\node_modules\next\dist\server\base-
...

server.js:322:20) {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'google',
  message: 'expected 200 OK, got: 403 Forbidden'
}

相关代码文件 #

[...nextauth].js

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
  secret: process.env.JWT_SECRET,
};
export default NextAuth(authOptions);

.env文件

GOOGLE_CLIENT_ID=something.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=something-
NEXTAUTH_URL=http://localhost:3000
JWT_SECRET=something

登录按钮代码

const { data: session } = useSession();

{session ? (
  <h1>You are signed in {session.user.email}</h1>
) : (
  <Button color="inherit" onClick={() => signIn('google')}>
    Login
  </Button>
)}

排查与解决方法 #

• 检查Google Cloud控制台OAuth配置

  1. 进入Google Cloud控制台的「API和服务 > 凭据」页面，确认OAuth客户端ID的授权重定向URI已添加：http://localhost:3000/api/auth/callback/google
  2. 如果应用处于「测试」状态，必须将你的Google账户添加到「OAuth同意屏幕」的测试用户列表中，未发布应用仅允许测试用户登录
  3. 确认已启用People API（NextAuth获取用户信息依赖该API，未启用会触发403）

• 验证环境变量准确性

  1. 核对GOOGLE_CLIENT_ID和GOOGLE_CLIENT_SECRET与控制台值完全一致，无多余空格或截断
  2. 确保NEXTAUTH_URL与实际运行地址一致，本地开发保持为http://localhost:3000（不要加末尾斜杠）
  3. 重启Next.js开发服务器，确保环境变量修改生效

• 检查依赖版本兼容性

  1. 确认next-auth和openid-client为最新稳定版本，旧版本可能存在OAuth回调逻辑的bug
  2. 若使用NextAuth v4，当前GoogleProvider的导入方式正确，无需调整

• 排查网络限制

  1. 确认本地代理、防火墙未拦截NextAuth与Google OAuth服务器的通信
  2. 尝试切换网络环境（如从公司内网切换到家庭网络），排除网络策略导致的403

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