Issue with google oauth in nextjs app

Next.js
1

I’ve tried following numerous tutorials for this, and it seems like something that should be very straightforward. However, I am consistently getting either invalid_request or redirect_uri_mismatch error responses whenever I attempt to authenticate my test user with Google.

app/api/auth/[…nextauth]/route.ts:

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

const handler = NextAuth({
   providers: [
     GoogleProvider({
       clientId: process.env.GOOGLE_CLIENT_ID!,
       clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
     })
   ]
 });
  
export { handler as GET, handler as POST }

app/NavBar.tsx:

import React from "react"; 
import Link from "next/link";  

const NavBar = () => {
   return (
     <div className="flex bg-slate-200 p-5">
       <Link className="mr-5" href="/">
         NextJS
       </Link>
       <Link className="mr-5" href="/users">
         Users
       </Link>
       <Link href="api/auth/signin">Sign In</Link>
     </div>
   );
 };  

export default NavBar;

On localhost, upon clicking “Sign in with google”, it always shows the following error response:
Screenshot 2023-12-10 at 6.37.33 PM

But when comparing my redirect_uri in the headers to the redirect_uri I have set up in google cloud, they appear to match.

So far I have tried:

  • adding other users to the test user whitelist and logging into those
  • logging in with other browsers (chrome, safari, and firefox)
  • deleting the .next directory and restarting the server
  • re-creating the app in Google Cloud and regenerating credentials
  • clearing my cache
  • attempting the request in an incognito window.
2

Google is very picky that things match up. Here are the things to check.

In your .env file – you have your URL. If your URL there is http://127.0.0.1:3000 - that’s not a match. It has to be exactly the same. http://localhost:3000.

Then the same thing in Google. Make sure it’s exactly right in all the fields there.

See if that helps.

Jerry

3

Just checked .env… looks like it’s set to NEXTAUTH_URL=http://localhost:3000

The authorized JavaScript origin is set to http://localhost:3000, and Authorized redirect URI is set to http://localhost:3000/api/auth/callback/google

4

I remember how much trouble I had getting this working. It was very frustrating. I know what you are going through. In the end, I was copy/pasting code samples I found online and eventually something worked. I think there was something in my AuthOptions. But honestly I don’t remember anymore. I feel ya bro … but I don’t have any specific ideas for you at the moment.

5

Yeah I’ve posted this same question to Reddit and SO… I’m about ready to give up and move on to another project. It doesn’t seem like this should be giving me as much trouble as it is. I even downloaded Mosh’s version of the project to see if there was something in my code that causing the problem, and I’m still getting the redirect_uri_mismatch error. :roll_eyes:

6

You could just disabled the auth stuff and continue with the project.

7

you need to add double quotes

NEXTAUTH_URL="http://localhost:3000"
8

Hi Misha,

You might try starting over and running through Mosh’s Google setup video again. Failing that, try Github Oauth instead. Google’s setup is a complicated mess of non-intuitive menus. The set up for Github so much simpler than Google’s.

Here’s the Next Auth page on Github provider:

To set it Oauth up on Github:

  1. go to Sign in to GitHub · GitHub
  2. click on Oauth Apps on the left side
  3. click New Oauth App in the top right.

Fill in the required fields and click Register Application

image

Then you’ll be able to create your GIthub ID and Client secret values which you can then add to your env file using the GITHUB_ID and GITHUB_SECRET keys.

Also, don’t forget to add the provider to your authOptions:

import GitHubProvider from "next-auth/providers/github";
...
providers: [
  GitHubProvider({
    clientId: process.env.GITHUB_ID,
    clientSecret: process.env.GITHUB_SECRET
  })
]
1 Like
9

Thank you man! Using github is much easiser! I have tried a lot of ways but they didn’t work!
Now I can study the next lesson. Thank you again, it’s really helpful

1 Like
10

I’m happy I could help!