continuing-cyan•7mo ago

Running app locally fails. Next.js, Google Auth

When I run this locally I recieve a 404 on the following URL - http://localhost:3000/api/auth/callback/google Not sure if there is a .env value I need to set or anything?

2 Replies

kapa.ai•7mo ago

Hi @UsingVonNeumann. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're trying to set up Google Authentication with your Next.js application. Based on the information provided, it's possible that you might be missing some environment variables in your .env file. Here are the steps you need to follow: 1. Create a new .env.local file in the root level of your app folder. 2. Inside this file, create GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET environment variables and assign the OAuth client values you got from Google. 3. Include NEXTAUTH_URL (assign your app origin) and NEXTAUTH_SECRET environment variables in the .env. 4. When deploying to production, set the NEXTAUTH_URL environment variable to the canonical URL of your site. 5. Create a NEXTAUTH_SECRET environment variable for all environments. You can use openssl rand -base64 32 or <https://generate-secret.vercel.app/32> to generate a random value. Your .env.local file should look like this:

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID  
GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET  
NEXTAUTH_URL=<http://localhost:3000>  
NEXTAUTH_SECRET=YOUR_SECRET

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID  
GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET  
NEXTAUTH_URL=<http://localhost:3000>  
NEXTAUTH_SECRET=YOUR_SECRET

Replace YOUR_CLIENT_ID, YOUR_CLIENT_SECRET, and YOUR_SECRET with your actual values. Please note that you do not need the NEXTAUTH_URL environment variable in Vercel. For more detailed guidance, you may find this video tutorial (https://www.youtube.com/watch?v=HtJKUQXmtok) helpful. If you've done all these and you're still facing issues, it might be a problem with your Google OAuth setup. Make sure you've followed all the steps correctly. Source: Refine.dev Blog (https://refine.dev/blog/nextauth-google-github-authentication-nextjs#for-googleprovider-make-sure-you-have-a-google-account) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@804142153709387776> kapa.ai is still learning and improving, please let us know how it did by reacting below