Question 276919 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Adding signIn with google next-auth error client_id is required

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 requiredn' +
      '    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'
}
Tags:

2

Answers


  1. 0

    In Next.js 9.4 and higher, you can use the NEXT_PUBLIC_ prefix in the .env file to make environment variables available to the browser. These variables will be replaced with their actual values at build time, so they can be accessed from your client-side code as if they were hard coded. For example, you can use process.env.NEXT_PUBLIC_API_KEY to access an environment variable called API_KEY that you have set.

    Keep in mind that using this method will expose your environment variables to the client, so you should be careful about which variables you choose to make available in this way. You should only use this method for variables that are safe to be accessed from the client, such as publicly available API keys.

    next.js: Environment Variables

    Non-NEXT_PUBLIC_ environment variables are only available in the Node.js environment, meaning they aren’t accessible to the browser (the client runs in a different environment).

    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search