Contact Us

How to Fix “Error 400: redirect_uri_mismatch” in Google OAuth

·

by

David Turner

When working with Google OAuth 2.0 in web applications, developers may occasionally run into a frustrating error message: “Error 400: redirect_uri_mismatch”. This error occurs when the redirect URI specified in your web application does not match exactly with the one registered in the Google API Console. Understanding this error and knowing how to resolve it is crucial for a smooth authentication process and a seamless user experience.

What Exactly Is the redirect_uri_mismatch Error?

The redirect_uri_mismatch error is part of the OAuth 2.0 response from Google that stops the authentication process because of a misalignment in registered URLs. During the OAuth flow, after a user authorizes an app, Google redirects them back to your application using a redirect URI — a specific path where Google sends the authorization code.

If this URI doesn’t precisely match what you’ve registered in your application on the Google Developer Console, the authentication will fail with the 400 error. This is a security measure used by Google to prevent misuse and redirect-based attacks.

Common Causes of redirect_uri_mismatch

There are several reasons why this error might occur. Here are the most frequent ones:

  • Missing or incorrect redirect URI in Google Cloud Console settings.
  • Typos or malformed URLs, such as missing “https://” or incorrect domain paths.
  • Use of localhost or different ports while testing in development environments.
  • Dynamic URL usage (e.g., varying query parameters or social login integrations).

Steps to Fix the Error

To resolve “Error 400: redirect_uri_mismatch”, follow these structured steps:

1. Identify the Redirect URI That Is Being Sent

Start by looking in your application’s authentication code or developer tools (e.g., Chrome DevTools) to see which redirect URI is being sent in the request. Typically, it’s part of the OAuth 2.0 URL:

https://accounts.google.com/o/oauth2/auth?redirect_uri=https://yourdomain.com/auth/google/callback&...

Copy this exact URI, as you will need it for the next step.

2. Register the Redirect URI in Google Cloud Console

Log in to the Google Cloud Console and follow these steps:

  1. Go to APIs & Services > Credentials.
  2. Select your OAuth 2.0 Client ID.
  3. In the settings, locate the section titled Authorized redirect URIs.
  4. Paste the redirect URI from step 1 into this list.
  5. Click Save.

Ensure the URI includes the right protocol (http or https), matches the casing, and ends with the right path.

3. Match the Registered Redirect URI in Code

Go back to your application’s configuration. Make sure the redirect URI being used in your OAuth request matches exactly with what you’ve just registered. This includes everything from the domain to query parameters and even trailing slashes.

4. Avoid Using Localhost for Production

If you’re in development, it’s okay to use something like http://localhost:3000/oauth2callback, but don’t forget to register this URI separately in Google Cloud Console too. For production, always use your final domain name and ensure it’s using HTTPS.

5. Use Environment Variables Smartly

Many developers mistakenly hard-code the redirect URI or use environment variables inconsistently. Ensure the environment variable you use for production differs from your local or staging setup. For example:

REDIRECT_URI="https://yourapp.com/auth/google/callback"

This helps prevent accidental mismatches when deploying your app.

6. Check for Trailing Slashes and Query Parameters

Something as small as a missing trailing slash or extra query parameters can result in a mismatch. For example, these two are not the same:

  • https://yourapp.com/auth/google/callback
  • https://yourapp.com/auth/google/callback/

Always double-check for these subtle differences.

Tips for Preventing the Error in the Future

To avoid hitting this error in future development cycles:

  • Maintain consistent environment-specific settings for your redirect URIs.
  • Use centralized configuration management to keep track of redirect URIs across environments.
  • Implement error logging in your application to catch and report OAuth issues during development.
  • Document all registered redirect URIs so new developers on your team are aware of them.

Conclusion

The redirect_uri_mismatch error is one of the most common hurdles when implementing Google OAuth, but fortunately, it’s straightforward to resolve once understood. By carefully matching the redirect URIs in both your code and the Google Cloud settings and maintaining clean configurations, you can prevent this error and ensure your application integrates smoothly with Google’s authentication platform.

Frequently Asked Questions

What is a redirect URI in Google OAuth?
A redirect URI is the endpoint in your application where Google sends users after they grant or deny authorization. It’s part of the OAuth 2.0 standard.
Is the redirect_uri_mismatch error a security feature?
Yes, this error is a critical security measure to prevent attackers from hijacking the redirect process with an unauthorized endpoint.
Can I use wildcards in redirect URIs?
No, Google does not allow wildcards in redirect URIs. The full path must be explicitly registered in the Cloud Console.
Can I use different redirect URIs for local and production?
Yes, you can register multiple URIs in the Google Cloud Console — one for development, one for staging, and one for production.
Why is my redirect URI working sometimes and failing other times?
This usually means different environments or incorrect environment variables are being used. Ensure that the right URI is used based on the current environment.