NextAuth Google Login | Client Secret there but missing?

Question

I'm trying to make a login with Next Auth. I have given all necessary access data in a .env.local.

See here:

GOOGLE_CLIENT_ID=[this should be private].apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-[this also]
NEXTAUTH_URL=http://localhost:3000/
NEXTAUTH_SECRET=[this also]

Here is the login code:

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

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
        client_id: process.env.GOOGLE_CLIENT_ID,
        client_secret: process.env.GOOGLE_CLIENT_SECRET
    })
  ],
  secret: "[my secret (same as in the .env.local)]",
  debug: true
})

This is the console output. Here you can see that the secret has apparently been found but is somehow missing.

[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 (C:\\socialmedia3\\socialmedia3\\node_modules\\openid-client\\lib\\client.js:178:13)\n' +
      '    at new Client (C:\\socialmedia3\\socialmedia3\\node_modules\\openid-client\\lib\\client.js:1823:7)\n' +
      '    at openidClient (C:\\socialmedia3\\socialmedia3\\node_modules\\next-auth\\core\\lib\\oauth\\client.js:28:18)\n' +
      '    at runMicrotasks (<anonymous>)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async getAuthorizationUrl (C:\\socialmedia3\\socialmedia3\\node_modules\\next-auth\\core\\lib\\oauth\\authorization-url.js:67:20)\n' +
      '    at async Object.signin (C:\\socialmedia3\\socialmedia3\\node_modules\\next-auth\\core\\routes\\signin.js:37:24)\n' +
      '    at async NextAuthHandler (C:\\socialmedia3\\socialmedia3\\node_modules\\next-auth\\core\\index.js:191:26)\n' +
      '    at async NextAuthNextHandler (C:\\socialmedia3\\socialmedia3\\node_modules\\next-auth\\next\\index.js:21:19)\n' +
      '    at async C:\\socialmedia3\\socialmedia3\\node_modules\\next-auth\\next\\index.js:57:32',
    name: 'TypeError'
  },
  provider: {
    id: 'google',
    name: 'Google',
    type: 'oauth',
    wellKnown: 'https://accounts.google.com/.well-known/openid-configuration',
    authorization: { params: [Object] },
    idToken: true,
    checks: [ 'pkce', 'state' ],
    profile: [Function: profile],
    client_id: '[it is literally here].apps.googleusercontent.com',
    client_secret: 'GOCSPX-[the rest of the client secret...]',
    signinUrl: 'http://localhost:3000/api/auth/signin/google',
    callbackUrl: 'http://localhost:3000/api/auth/callback/google'
  },
  message: 'client_id is required'
}

On the Website, it says: "Try signing in with a different account." What am I doing wrong? Best wishes!

Answer 1

I solved it by putting ' around THE GOOGLE_CLIENT_ID and around the GOOGLE_CLIENT_SECRET in the .env.local. For example GOOGLE_CLIENT_ID = '[id comes here]'