How to Resolve the Error 400: redirect_uri_mismatch in React JS

If you’ve ever worked with React and tried to integrate Google OAuth (or any OAuth provider really), you may have hit the dreaded message: “Error 400: redirect_uri_mismatch.” It’s annoying. It’s confusing. And it stops everything dead in its tracks.

Why The “redirect_uri_mismatch” Error

When you’re using Google’s OAuth 2.0 (or a library that wraps it) you’ll send a request that includes parameters like redirect_uri. That URI tells Google where to send users back after they authenticate. According to Google’s documentation:

“If this value doesn’t match an authorized redirect URI for the provided client_id you will get a redirect_uri_mismatch error.”

In plain English: the URI you send in your code must match exactly one of the URIs you registered in the Google Cloud Console for that OAuth client. Getting it wrong even a tiny typo, missing slash, or http vs https difference triggers the error.

Setting up a Mini React Project

Let’s build a simple React project (you can adapt to your setup) and walk through configuration so you see where things can go wrong and how to fix them.

Create a basic React app:

npx create-react-app google-oauth-demo
cd google-oauth-demo

Inside src/App.js (or using a hook) you might have something like:

import React from 'react';

function App() {
  const handleLogin = () => {
    window.location = `https://accounts.google.com/o/oauth2/v2/auth?
      client_id=${process.env.REACT_APP_GOOGLE_CLIENT_ID}
      &redirect_uri=${encodeURIComponent(process.env.REACT_APP_GOOGLE_REDIRECT_URI)}
      &response_type=code
      &scope=openid%20email%20profile`;
  };

  return (
    <div>
      <h1>Login with Google</h1>
      <button onClick={handleLogin}>Sign in</button>
    </div>
  );
}

export default App;

Make sure your .env file has variables, e.g.:

REACT_APP_GOOGLE_CLIENT_ID=your-client-id
REACT_APP_GOOGLE_REDIRECT_URI=http://localhost:3000/oauth2callback

Register OAuth credentials in Google Cloud:

In the Google Cloud Console → APIs & Services → Credentials:

• Create an OAuth 2.0 Client ID (Web application)
• Under Authorized redirect URIs, add exactly: http://localhost:3000/oauth2callback (for local dev)
• If you have production: e.g. https://yourapp.com/oauth2callback

Test login and see the error:

If you launch the app and click “Sign in” you might get the error:

Error 400: redirect_uri_mismatch
You can’t sign in to this app because it doesn’t comply with Google’s OAuth 2.0 policy.

That means the redirect_uri sent (in the request) doesn’t exactly match the registered URI.

How to Fix the Error in a React

Here’s a detailed checklist targeted at React developers, covering both typical and subtle issues.

Ensure exact match of redirect URI:

In your request code (as above) ensure redirect_uri equals one of the URIs you registered. In particular:

• Scheme (http vs https) must match. If you registered https://…, sending http://… fails.
• Domain must match including subdomains (www vs non-www).
• Port must match (especially in local dev, e.g. localhost:3000).
• Path must match including slash or no slash at end. Example: /callback vs /callback/.
• If you use dynamic values in React (environment variables etc), make sure they are correctly set at build time.

Add all needed redirect URIs for each environment:

If you have development and production environments, register both URIs in Google Cloud. Example:

• http://localhost:3000/oauth2callback (dev)
• https://app.mycompany.com/oauth2callback (production)
  Then in your React app use process.env.REACT_APP_GOOGLE_REDIRECT_URI to switch based on env.

Check the OAuth client ID corresponds to the right project:

Sometimes you have multiple OAuth clients or projects and use the wrong Client ID. Make sure the Client ID you pass in your code matches the one where the redirect URIs were registered. If not, Google uses the wrong set of URIs and triggers the error.

Clear caches / restart build:

In React apps many environment variable changes only apply after a rebuild. So:

• Stop npm start (or whatever you use)
• Make sure .env changes are saved
• Restart the app so the new redirect_uri is used.
  Sometimes you also need to clear the browser’s cache/cookies if old credentials or ephemeral state interfere.

Pay attention to libraries & hooks:

If you use React-specific libraries (for example @react-oauth/google or react-google-login) they may generate or expect certain redirect URIs or flows. One example: a user reported they got the error with redirect_uri: 'http://localhost:5173/login' but the backend expected another URI.
So check the library’s default callback path and whether you’re overriding it.

Use Chrome dev tools / inspect redirect URI:

Often you don’t know exactly what URI your app is sending. Use Network tab in DevTools, filter by accounts.google.com, inspect the request query parameters: check redirect_uri=. Copy that and compare with what you registered. If they differ, fix accordingly.

Check for trailing slash and URL encoding:

Add/remove trailing slash variations in the registered URI. For instance: https://myapp.com/auth vs https://myapp.com/auth/. Some users solved by adding both.
Also make sure you encode the URI correctly in the request (encodeURIComponent).

For production: ensure correct domain and HTTPS:

When moving to production you often have domain changes, proxy setups, HTTPS enforced, etc. If the URI you send uses http but you registered https, mismatch happens. Also avoid IP addresses, use proper domain names.

Advanced Gotchas & Extra Tips

Here are some additional tips that go beyond the standard advice.

Handling multiple callback paths:

In large apps you might have dynamic callback paths or multiple flows (login, signup, connect). You can register multiple URIs under the OAuth client. Example:

https://myapp.com/oauth2callback
https://myapp.com/connect/google/callback

Just ensure each one is matched.

React routing differences:

If your React app uses routing (e.g. react-router-dom) and the callback path lives inside the client-side router (for example /oauth2callback?code=…), make sure the server or hosting config allows that path to be reached (some hosts block client-side routing paths). Otherwise Google may hit a 404 and you may misinterpret the error.

Using relative redirect URIs:

Sometimes developers try to use relative URIs like /oauth2callback (without domain). Google doesn’t accept that you must supply the full absolute URI.

Localhost vs 127.0.0.1 confusion:

As seen earlier, sending http://127.0.0.1:3000/ but registering http://localhost:3000/ (or vice versa) causes mismatch. Always use one and register it.

Limitation for embedded web-views:

If your React app is inside a web-view (mobile app) you may encounter additional restrictions from Google’s OAuth policy. Although this common scenario is outside pure React web app context, be aware.

Changes propagate slowly:

Sometimes changes in Google Cloud Console take a few minutes to propagate. If you just added a URI, wait a bit and retry. Also logout of Google accounts and try again.

Unexpected URI modifications by libraries:

Some OAuth libraries add parameters or change redirect URIs internally (for example adding ?state= or using special callback handles). If you inspect the network request you’ll see the exact redirect_uri being sent. Compare that with what’s registered. If they differ, you’ll need to update the registration.

Final Thoughts

Getting the “Error 400: redirect_uri_mismatch” in a React app can be frustrating especially when you know you did everything right. But once you understand the mechanics (that Google requires exact URI matches) and apply the checklist above, it becomes a routine fix rather than a blocker. In your next project: start by registering the exact redirect URI before writing code use environment variables in React to separate dev and production; and always inspect what URI your code is actually sending versus what you registered.