Next-auth sign In working locally but not on vercel. Error- CLIENT_FETCH_ERROR

Question

I've used next-auth with google signIn in my next application. I've set the environment variables as well as the auth file under api as

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

export default NextAuth({
   providers: [
      GoogleProvider({
         clientId: process.env.GOOGLE_ID,
         clientSecret: process.env.GOOGLE_SECRET,
      }),
   ],
});

Also configured the URI in the console. The application works perfectly on localhost but after deployment via vercel when attempted to signIn it shows error like CLIENT_FETCH_ERROR. Even though I have set the NEXT_AUTH_URL to the canonical website url its not working.

I have no Idea of what to do, a little help please..

Answer 1

While using env keys in next.js you should append NEXT_PUBLIC to your env keys and make sure you have added the keys in vercel:

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

 export default NextAuth({
   providers: [
     GoogleProvider({
      clientId: process.env.NEXT_PUBLIC_GOOGLE_ID,
      clientSecret: process.env.NEXT_PUBLIC_GOOGLE_SECRET,
     }),
   ], 
});