Redirect After Authentication Not Working. No Path in History

Redirect after login with Auth0 is not working in my React app. I followed the code from the official tutorial.

The window.location.pathname pushes just “/” to history and thus redirects me my homepage upon refreshing the page.

Anyone have this issue in React before?

import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';

const Auth0ProviderWithHistory = ({ children }) => {
    const history = useHistory();
    const domain = process.env.REACT_APP_AUTH0_DOMAIN;
    const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
    const audience = process.env.REACT_APP_AUDIENCE;

  const onRedirectCallback = (appState) => {
    console.log(window.location.pathname);
    history.push(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      audience={audience}
    >
      {children}
    </Auth0Provider>
  );
};

export default Auth0ProviderWithHistory;

My routing structure

import React from 'react';
import { BrowserRouter, withRouter } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import Auth0ProviderWithHistory from './Auth0ProviderWithHistory';

// Components
import Router from  './Router';
import { Navbar, Footer } from './components/';


const NavbarWithRouter = withRouter(Navbar);


export default function App() {
  return (
    <>
      <BrowserRouter>
        <Auth0ProviderWithHistory>
          <NavbarWithRouter />
          <Router />
          <Footer />
        </Auth0ProviderWithHistory>
      </BrowserRouter>
    </>
  );
}

bumping the thread up

I’m also playing with this part. Upon login, Auth0 will redirect to the URL mentioned in redirectUri prop of the Auth0Provider

You can change ‘window.location.origin’ to some other URL that you want the app to go to after successful login. .e.g. ${window.location.origin}/home.

The onRedirectCallback is an optional callback (as far as I can tell). It gets called after the redirection has happened and allows you to check if for the presence of ‘appState’ value (if one was used by you during login. See https://auth0.github.io/auth0-react/interfaces/redirectloginoptions.html#appstate). If there is no special returnTo URL found, then the onRedirectCallback just pushes the same URL that app was already redirected to.

Thanks for sharing that @support12!

Thank you. I want it to redirect to the same page the user was on.

The appState prop seems to always be undefined in my code. Auth0 doesn’t seem to be assigning a value to it.

Am I missing something?