OAuthCallbackError in NextAuth using Google as provider

[jcjms]

Hello, I got an error when I set Google as my provider (I don't have any others so far). This here is my code:

my [...nextauth].tsx :

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

export default NextAuth({
// Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_SECRET
}),
// ...add more providers here
],
pages: {
signIn: "/auth/signin"
},
})

My signin.tsx:

import { getProviders, signIn as SignIntoProvider} from "next-auth/react";
import Header from "../../components/Header";

function signIn({ providers }) {
    return (
        <>
        <Header />

        <div className="flex flex-col items-center justify-center min-h-screen py-2 -mt-56 px-14 text-center">

            <img className="w-80" src="https://links.papareact.com/ocw" alt="" />

            <p className="font-xs italic">Hier sollte etwas stehen, weiß noch nicht was...</p>

            <div className="mt-40">
            {providers && !!Object.keys(providers).length && Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button 
                        className="p-3 bg-blue-500 rounded-lg text-white"
                        onClick={() => SignIntoProvider(provider.id, { callbackUrl: "/" })}>
                        Sign in with {provider.name}
                    </button>
                </div>
            ))}
            </div>
        </div>

        </>
    );
}

export async function getServerSideProps() {
    const providers = await getProviders();

    return {
        props: {
            providers
        }
    }
}

export default signIn;

My .env.local file:

GOOGLE_CLIENT_ID=[...].apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-[...]
NEXTAUTH_URL="https://localhost:3000/"

JWT_SECRET=[32-char-secret]

JWT_EXPIRES_IN=90

This is my error message:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error client_secret_basic client authentication method requires a client_secret {
  error: {
    message: 'client_secret_basic client authentication method requires a client_secret',
    stack: 'TypeError: client_secret_basic client authentication method requires a client_secret\n' +   
      '    at Client.authFor (C:\\socialmedia2\\socialmedia2\\node_modules\\openid-client\\lib\\helpers\\client.js:105:15)\n' +
      '    at Client.authenticatedPost (C:\\socialmedia2\\socialmedia2\\node_modules\\openid-client\\lib\\helpers\\client.js:137:30)\n' +
      '    at Client.grant (C:\\socialmedia2\\socialmedia2\\node_modules\\openid-client\\lib\\client.js:1240:46)\n' +
      '    at Client.callback (C:\\socialmedia2\\socialmedia2\\node_modules\\openid-client\\lib\\client.js:471:35)\n' +
      '    at oAuthCallback (C:\\socialmedia2\\socialmedia2\\node_modules\\next-auth\\server\\lib\\oauth\\callback.js:90:29)\n' +
      '    at runMicrotasks (<anonymous>)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async Object.callback (C:\\socialmedia2\\socialmedia2\\node_modules\\next-auth\\server\\routes\\callback.js:50:11)\n' +
      '    at async NextAuthHandler (C:\\socialmedia2\\socialmedia2\\node_modules\\next-auth\\server\\index.js:171:18)\n' +
      '    at async C:\\socialmedia2\\socialmedia2\\node_modules\\next-auth\\server\\index.js:251:32',  
    name: 'TypeError'
  },
  providerId: 'google',
  message: 'client_secret_basic client authentication method requires a client_secret'
}
[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error client_secret_basic client authentication method requires a client_secret TypeError: client_secret_basic client authentication method requires a client_secret
    at Client.authFor (C:\socialmedia2\socialmedia2\node_modules\openid-client\lib\helpers\client.js:105:15)
    at Client.authenticatedPost (C:\socialmedia2\socialmedia2\node_modules\openid-client\lib\helpers\client.js:137:30)
    at Client.grant (C:\socialmedia2\socialmedia2\node_modules\openid-client\lib\client.js:1240:46)     
    at Client.callback (C:\socialmedia2\socialmedia2\node_modules\openid-client\lib\client.js:471:35)   
    at oAuthCallback (C:\socialmedia2\socialmedia2\node_modules\next-auth\server\lib\oauth\callback.js:9    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) 
    at async Object.callback (C:\socialmedia2\socialmedia2\node_modules\next-auth\server\routes\callback.js:50:11)                                  xt-auth\server\routes\callback
    at async NextAuthHandler (C:\socialmedia2\socialmedia2\node_modules\next-auth\server\index.js:171:18)                                           xt-auth\server\index.js:171:18
    at async C:\socialmedia2\socialmedia2\node_modules\next-auth\server\index.js:251:32 {                                                           dex.js:251:32 {
  name: 'OAuthCallbackError'
}
[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error client_secret_basic client authentication method requires a client_secret {
  error: {
    message: 'client_secret_basic client authentication method requires a 
client_secret',
    stack: 'TypeError: client_secret_basic client authentication method requires a client_secret\n' +
      '    at Client.authFor (C:\\socialmedia2\\socialmedia2\\node_modules\\openid-client\\lib\\helpers\\client.js:105:15)\n' +
      '    at Client.authenticatedPost (C:\\socialmedia2\\socialmedia2\\node_modules\\openid-client\\lib\\helpers\\client.js:137:30)\n' +
      '    at Client.grant (C:\\socialmedia2\\socialmedia2\\node_modules\\openid-client\\lib\\client.js:1240:46)\n' +
      '    at Client.callback (C:\\socialmedia2\\socialmedia2\\node_modules\\openid-client\\lib\\client.js:471:35)\n' +
      '    at oAuthCallback (C:\\socialmedia2\\socialmedia2\\node_modules\\next-auth\\server\\lib\\oauth\\callback.js:90:29)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async Object.callback (C:\\socialmedia2\\socialmedia2\\node_modules\\next-auth\\server\\routes\\callback.js:50:11)\n' +
      '    at async NextAuthHandler (C:\\socialmedia2\\socialmedia2\\node_modules\\next-auth\\server\\index.js:171:18)\n' +
      '    at async C:\\socialmedia2\\socialmedia2\\node_modules\\next-auth\\server\\index.js:251:32\n' +
      '    at async Object.apiResolver (C:\\socialmedia2\\socialmedia2\\node_modules\\next\\dist\\server\\api-utils\\node.js:182:9)',
    name: 'TypeError'
  },
  providerId: 'google',
  message: 'client_secret_basic client authentication method requires a client_secret'
}
[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error client_secret_basic client authentication method requires a client_secret TypeError: client_secret_basic client authentication method requires a client_secret
    at Client.authFor (C:\socialmedia2\socialmedia2\node_modules\openid-client\lib\helpers\client.js:105:15)
    at Client.authenticatedPost (C:\socialmedia2\socialmedia2\node_modules\openid-client\lib\helpers\client.js:137:30)
    at Client.grant (C:\socialmedia2\socialmedia2\node_modules\openid-client\lib\client.js:1240:46)
    at Client.callback (C:\socialmedia2\socialmedia2\node_modules\openid-client\lib\client.js:471:35)
    at oAuthCallback (C:\socialmedia2\socialmedia2\node_modules\next-auth\server\lib\oauth\callback.js:90:29)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) 
xt-auth\server\index.js:171:18)
    at async C:\socialmedia2\socialmedia2\node_modules\next-auth\server\index.js:251:32
    at async Object.apiResolver (C:\socialmedia2\socialmedia2\node_modules\next\dist\server\api-utils\node.js:182:9) {
  name: 'OAuthCallbackError'
}

Please help me. I've been trying to solve this problem for days. Best wishes.

[90PabloRomero]

check that your .env file is pointing correctly, you have an issue with your NEXTAUTH_SECRET

[Nith567]

hey @AlgoHussle have you solved the issue

[jahidulhasan1]

I solve this problem but the thing is some times .env file not work with prosses.env .name .so you have to write ur client id and secret in the signin page then it's solve

[aguChukwuemeka]

Yes, make sure is clientId not client_Id then secondly remove the .env file from grafbase directory to the root directory of your app

[conacts]

My answer was to hardcode the values into the provider from

GoogleProvider({
	clientId: process.env.GOOGLE_CLIENT_ID as string,
	clientSecret: process.env.GOOGLE_SECRET_ID as string,
}),

to

GoogleProvider({
	clientId: "...",
	clientSecret: "...",
}),

[moustafa1993]

check that your .env file is in the root of the project.
create a .env.local file also
this works to me.