Next.js集成Next-auth Google登录报错：client_id is required

以下是针对性的排查和解决步骤：

1. 确认环境变量配置正确 #

• 项目根目录必须存在.env.local文件（Next.js在开发环境仅加载该文件的环境变量）
• 文件内变量名必须严格匹配代码中的定义：

  GOOGLE_ID=你的Google客户端ID
  GOOGLE_SECRET=你的Google客户端密钥
  JWT_SECRET=任意随机字符串（用于加密会话）
  

• 确保复制的Google客户端ID/密钥没有多余空格或换行符

2. 验证环境变量是否成功加载 #

在api/auth/[...nextauth].js中添加日志打印，启动项目后查看终端输出：

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

// 添加这行日志
console.log("Loaded GOOGLE_ID:", process.env.GOOGLE_ID);

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  secret: process.env.JWT_SECRET,
});

如果终端输出undefined，说明环境变量未正确加载，检查.env.local路径、文件名拼写是否正确。

3. 重启开发服务器 #

修改.env.local后，必须完全重启Next.js开发服务器（终止进程后重新执行npm run dev），否则新的环境变量不会生效。

4. 检查Google Cloud控制台配置 #

• 确认创建的是Web应用类型的OAuth 2.0客户端ID
• 已添加正确的授权回调URL：
  开发环境：http://localhost:3000/api/auth/callback/google
  生产环境：替换为你的实际域名+/api/auth/callback/google
• 确认客户端ID和密钥处于「启用」状态，未被禁用

5. 排除NextAuth配置错误 #

你的[...nextauth].js代码本身没有语法问题，但需确保：

• 安装的next-auth和@next-auth/providers-google版本兼容（建议使用最新稳定版）
• 若使用Next.js 13+ App Router，API路由文件位置需正确（仍需放在app/api/auth/[...nextauth]/route.js，你的代码是Pages Router结构，无需调整）

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