CODEWITHSUNDEEP
reactjsauthenticationnext.jsgoogle-oauth
Antoine
Antoine

Reputation: 560

next-auth Google provider [next-auth][error][client_fetch_error]

Helle, I'm trying to add a google authentication on my Next.js project. I've got my GOOGLE_ID & GOOGLE_SECRET from google console.

And I've got theses errors on my console :

I've followed tutorials and here's my configuration :

_app.tsx :

const App = function ({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <Provider session={pageProps.session}>
        <ThemeProvider theme={theme}>
          <Component {...pageProps} />
        </ThemeProvider>
      </Provider>
    </RecoilRoot>
  );
};

src/pages/my-page.tsx :

const MyPage: FC<MyPageProps> = function (){
  const [session] = useSession();
  
  if(!session){
    return <a onClick={() => signIn("Google", { callbackUrl: "/monitoring-docker" })});
  }
}

src/pages/api/[...nextauth].ts :

const { serverRuntimeConfig } = getConfig();
export default NextAuth({
  providers: [
    Providers.Google({
      clientId: serverRuntimeConfig.GOOGLE_ID,
      clientSecret: serverRuntimeConfig.GOOGLE_SECRET,
    }),
  ],
});

Thank you for your help, I've been stuck on it for several hours... !

enter image description here

Upvotes: 0

Views: 7880

Answers (2)

Shashank Dubey
Shashank Dubey

Reputation: 353

Add a secret option in your NextAuth function. It could be any random secret string.

export default NextAuth({
   // Configure one or more authentication providers
   providers: [
      GoogleProvider({
         clientId: process.env.GOOGLE_CLIENT_ID,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      }),
      // ...add more providers here
   ],
   secret: process.env.SECRET,
   pages: {
      signIn: "/auth/signin",
   },
   callbacks: {
      async session({ session, token, user }) {
         session.user.username = session.user.name
            .split(" ")
            .join("-")
            .toLocaleLowerCase();

         session.user.uid = token.sub;
         return session;
      },
   },
});

Upvotes: 0

Antoine
Antoine

Reputation: 560

I've read the documentation one more time, and I forgot the auth folder under api...

Upvotes: 2

Related Questions