I have been trying to implement the Sign in with Google option in my Next.js application using next-auth. Below is a snippet of my [...nextauth].js file located in the 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,
});
In addition, here is my app file where I am utilizing 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>
);
}
Despite these implementations, an error occurs during the sign-in process:
message: 'client_id is required'
Below is a detailed description of 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'
}