Redirect After Authentication Not Working. No Path in History

Question

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.

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?

Anyone have this issue in React or Auth0 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) => {
    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>
    </>
  );
}

Answer 1

I also had same kind of problem. After some dependency problem and updating npm packages this weird message appeared:

I overcame the problem by the help of a auth0community message..https://community.auth0.com/t/redirecting-after-login/39821...offering that:

const onRedirectCallback = appState => {
  history.push(
    appState && appState.targetUrl
      ? appState.targetUrl
      : window.location.href = "https://www.exampleroute.com/pointofredirect"
  );
};