How to Fix Google OAuth redirect_uri_mismatch Error

In this article, we will discuss how to fix Google OAuth redirect_uri_mismatch error. This error often occurs due to incorrect configuration of Authorized JavaScript Origins and Redirect URIs in the Google Developer Console.

What is an Authorized JavaScript Origin?

This is used when making OAuth requests directly from the browser. In simpler terms, if you're initiating the OAuth flow on the frontend (for example, with Google Sign-In), you must tell Google which domains are allowed to send these requests.

✅ Example:
If your frontend is hosted at https://yourdomain.com, you should add:
https://yourdomain.com

What is a Redirect URI?

This is the callback URL where Google sends users back to your application after they authenticate. It must match exactly what you've specified in the Google Developer Console.

✅ Example:

If you use NextAuth, your redirect URI might look like:
https://yourdomain.com/api/auth/callback/google

Google will reject the OAuth request if the redirect URI isn't an exact match. Even small differences (like trailing slashes or query params) can break it.

Common Setup in a Next.js App with NextAuth

Let's say you are using NextAuth.js for authentication.

Here's how you should configure things:

Authorized JavaScript Origins

https://yourdomain.com

Authorized Redirect URIs

https://yourdomain.com/api/auth/callback/google

If you are running it locally during development:

For localhost

JavaScript Origin:
```
http://localhost:3000
```

Redirect URI:

http://localhost:3000/api/auth/callback/google

Common Mistake

Some users mistakenly enter just the domain (e.g., https://yourdomain.com) into the redirect URI field. While it looks correct, it's not sufficient. Google expects the full path to the callback route.

❌ Incorrect Redirect URI:
https://yourdomain.com

✅ Correct Redirect URI:
https://yourdomain.com/api/auth/callback/google

Conclusion

To ensure smooth authentication with Google OAuth:

Use JavaScript Origins to whitelist where your browser-based app is hosted.
Use Redirect URIs to specify where the user should land after login.
Always match redirect URIs exactly (case-sensitive, no missing paths).

Understanding this distinction can save you hours of debugging OAuth errors. Happy coding!