Adding signIn with google next-auth error client_id is required

Question

I am trying to add Sign in with google option in nextjs using next-auth, here is my [...nextauth].js file which is in api/auth folder:

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

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

here is my app file in which i am also using i18n for translations:

import i18next from "i18next";
import { I18nextProvider } from "react-i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import { SessionProvider } from "next-auth/react";

export default function App({ Component, pageProps, session }) {
  return (
    <SessionProvider session={session}>
      <I18nextProvider i18n={i18next}>
        <Component {...pageProps} />
      </I18nextProvider>
    </SessionProvider>
  );
}

But i keep getting this error when signing in:

message: 'client_id is required'

here is the complete error:

[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 (/Users/moeezramay/Desktop/job/moeezMatch/mosquematch/node_modules/openid-client/lib/client.js:185:13)\n' +
      '    at new Client (/Users/moeezramay/Desktop/job/moeezMatch/mosquematch/node_modules/openid-client/lib/client.js:1841:7)\n' +
      '    at openidClient (/Users/moeezramay/Desktop/job/moeezMatch/mosquematch/node_modules/next-auth/core/lib/oauth/client.js:29:18)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async getAuthorizationUrl (/Users/moeezramay/Desktop/job/moeezMatch/mosquematch/node_modules/next-auth/core/lib/oauth/authorization-url.js:70:18)\n' +
      '    at async Object.signin (/Users/moeezramay/Desktop/job/moeezMatch/mosquematch/node_modules/next-auth/core/routes/signin.js:38:24)\n' +
      '    at async AuthHandler (/Users/moeezramay/Desktop/job/moeezMatch/mosquematch/node_modules/next-auth/core/index.js:260:26)\n' +
      '    at async NextAuthApiHandler (/Users/moeezramay/Desktop/job/moeezMatch/mosquematch/node_modules/next-auth/next/index.js:22:19)\n' +
      '    at async NextAuth._args$ (/Users/moeezramay/Desktop/job/moeezMatch/mosquematch/node_modules/next-auth/next/index.js:108:14)',
    name: 'TypeError'
  },
  providerId: 'google',
  message: 'client_id is required'
}

Answer 1

From what you're saying, there should not be any issue. Make sure to recheck your names which you're accessing from .env file. Also if you're using

.env

replace it with:

.env.local