NextAuth GitHub Provider报错‘client_id is required’的排查与解决

我的代码 #

import GitHubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";

export const options = {
  providers : [
    GitHubProvider({
      profile(profile) {
        console.log("Profile Github: ", profile);

        let userRole = "GitHub User";
        if (profile?.email == "raj.cs.psg@gmail.com") {
          userRole = "admin";
        }

        return {
          ...profile,
          role: userRole,
        };
      },
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_Secret,
    }),
    GoogleProvider({
      profile(profile) {
        console.log("Profile Google: ", profile);

        return {
          ...profile,
          id: profile.sub,
          role: userRole,
        };
      },
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_Secret,
    }),
  ],
  callbacks: {
    async jwt({ token, user}) {
      if(user) {
        token.role = user.role;
      }
      return token;
    },

    async session({session, token}) {
      if(session?.user) session.user.role = token.role;
      return session;
    }
  }
};

.env.local配置 #

Github_ID=<>
Github_Secret=<>

错误信息 #

[next-auth][error][SIGNIN_OAUTH_ERROR] 
https://next-auth.js.org/errors#signin_oauth_error client_id is required {
  error: {
    message: 'client_id is required',
    stack: 'TypeError: client_id is required\n' +
      '    at new BaseClient (webpack-internal:///(rsc)/./node_modules/openid-client/lib/client.js:148:19)\n' +
      '    at new Client (webpack-internal:///(rsc)/./node_modules/openid-client/lib/client.js:1654:13)\n' +
      '    at openidClient (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/client.js:23:20)\n' +
      '    at getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/authorization-url.js:88:51)\n' +
      '    at Object.signin (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/signin.js:21:66)\n' +
      '    at AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:259:49)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:50:30)\n' +
      '    at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:85:24)\n' +
      '    at async /home/raju/Coding/auth/next-auth-tutorial/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:62499',
    name: 'TypeError'
  },
  providerId: 'github',
  message: 'client_id is required'
}

问题分析与修复步骤 #

1. 环境变量大小写不匹配（核心错误） #

Node.js环境变量区分大小写，代码中使用process.env.GITHUB_ID和process.env.GITHUB_Secret，但.env.local里的变量名是Github_ID和Github_Secret，大小写不一致导致NextAuth无法读取到GitHub的Client ID和Secret，进而抛出"client_id is required"错误。

修复：
修改.env.local的变量名，和代码中的引用完全一致，建议统一使用全大写（行业惯例）：

GITHUB_ID=<你的GitHub Client ID>
GITHUB_SECRET=<你的GitHub Client Secret>

同时代码中的GITHUB_Secret也改成GITHUB_SECRET保持统一：

clientSecret: process.env.GITHUB_SECRET,

2. 重启开发服务器 #

Next.js会缓存环境变量，修改.env.local后必须重启开发服务器，新的环境变量才能生效。

3. 修复GoogleProvider的潜在错误 #

GoogleProvider的profile函数中，userRole未定义，这会导致后续Google认证时抛出ReferenceError，提前修复：

GoogleProvider({
  profile(profile) {
    console.log("Profile Google: ", profile);
    let userRole = "Google User"; // 定义默认角色
    return {
      ...profile,
      id: profile.sub,
      role: userRole,
    };
  },
  clientId: process.env.GOOGLE_ID,
  clientSecret: process.env.GOOGLE_SECRET, // 同样确保.env.local里的变量名匹配
}),

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