Deployed React App: Unable to issue redirect for OAuth 2.0 transaction

Hi, I have a React app deployed on render.com. I have a /login URL which has a button that calls the Auth0 loginWithRedirect() function. After entering my details, I get the “Unable to issue redirect for OAuth 2.0 transaction” error. This error also happens when hosting the app locally on localhost:24423. The callback, origin and logout URL’s are set on the Application Details page in Auth0’s website. How can I fix this? Here is my code:

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Auth0Provider domain="MY-DOMAIN.auth0.com" clientId="MY CLIENT ID" redirectUri={window.location.origin}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Auth0Provider>
);

App.js route setup

<div id="wrapper">
{!isAuthenticated ? (
  <>
  <div>
      <Routes>
          <Route path="/login" element={<Login/>} />
      </Routes>
  </div>
  
  <NavLink to="/login">Login</NavLink>
  </>
):(
  <>
  <Header />
  <div>
      <Routes>
          <Route path="/" element={<Landing/>} />
          <Route path="/login" element={<Login/>} />
          <Route path="/properties" element={<Properties/>} />
          <Route path="/properties/:id" element={<Property/>} />
      </Routes>
  </div>
  </>
)}

Hello @n1ghtrider welcome to the community!

Please see the following post to start:

I’d also be curious to know if our react sample functions properly in your environment?

Keep us posted!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.