Google OAuth 2 authorization - Error redirect_uri_mismatch

The “redirect_uri_mismatch” error in Google OAuth occurs when the redirect URI sent in the authentication request doesn’t match any of the authorized URIs registered for your OAuth client in the Google Cloud Console. This typically happens during the OAuth authentication process if the URL that Google is trying to redirect users to is not listed in the allowed redirect URIs for the project.

Steps to fix the “redirect_uri_mismatch” error:

1. Identify the Exact Redirect URI:
   • From the error message, you can typically see the redirect URI that is causing the issue. The error will often mention something like:

     Error: redirect_uri_mismatch
     The redirect URI in the request, https://yourapp.com/oauth2callback, does not match the ones authorized for the OAuth client.
     

   • Copy this exact URI. You will need to ensure this URI is listed as an authorized redirect URI in your OAuth 2.0 credentials in the Google Cloud Console.
2. Open Google Cloud Console:
   • Go to Google Cloud Console.
   • Navigate to APIs & Services > Credentials.
3. Locate Your OAuth Client:
   • In the Credentials section, look for the OAuth 2.0 credentials that are being used for your project (typically labeled as “OAuth 2.0 Client IDs”).
   • Click on the name of the OAuth client to edit its configuration.
4. Add the Correct Redirect URI:
   • Under the Authorized redirect URIs section, click Add URI.
   • Paste the exact redirect URI that you copied from the error message.
   • Be sure to include the full URI, including the protocol (i.e., https://). Redirect URIs are case-sensitive, so ensure there is no mismatch.

   Example URIs might look like:

   https://yourapp.com/oauth2callback
   http://localhost:3000/auth/callback (for development)
   

5. Save Your Changes:
   • After adding the correct URI, click Save to update the OAuth client.
6. Test the OAuth Flow Again:
   • Go back to your application and try logging in via Google OAuth again. The error should be resolved if the redirect URI now matches the one listed in the Google Cloud Console.

Common Pitfalls to Avoid:

• Ensure that the URI matches exactly: Redirect URIs are case-sensitive and must match exactly, including the scheme (https:// or http://), path, and any trailing slashes.
• Use HTTPS for Production: Google typically requires HTTPS URIs for production applications. For local development, http://localhost URIs are allowed.
• Different Redirect URIs for Different Environments: If you have multiple environments (e.g., development, staging, production), make sure that you have added all the necessary redirect URIs for each environment.
• Trailing Slashes: Watch out for trailing slashes. For example, https://yourapp.com/oauth2callback and https://yourapp.com/oauth2callback/ are considered different URIs.

Additional Tips:

• Local Development: If you are working locally, make sure that http://localhost:<port>/callback is added to the list of authorized redirect URIs.
• Testing from Different Subdomains: If your app uses multiple subdomains (e.g., app.example.com and api.example.com), each subdomain requires its own redirect URI entry.
• Wildcard Redirect URIs: Google does not support wildcards in redirect URIs, so you need to explicitly specify every authorized URI.

By following these steps, you should be able to resolve the “redirect_uri_mismatch” error in your Google Cloud OAuth configuration.