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>
</>
);
}
