SDK: @auth0/auth0-react
Version: 1.4.0
React: 17.0.2
I utuilize useAuth0 to access the context and parameters such as isAuthenticated and user.
When I navigate through my App’s Header bar, everything works fine after I log in (e.g. isAuthenticated have the value true).
However, if I go to my browser and type a specific route (e.g. http://localhost:3000/profile), the userAuth0() context gets erased and isAuthenticated returns false.
But, if I go to the Profile route through my Header bar, isAuthenticated returns true.
This is what my Auth0Provider looks like:
const Auth0ProviderWithHistory = ({children}: PropsWithChildren<{}>) => {
const onRedirectCallback = (appState: any) => {
window.history.replaceState(
{},
document.title,
appState && appState.targetUrl
? appState.returnTo
: window.location.pathname
);
}
return (
<Auth0Provider
domain={config.domain}
clientId={config.clientId}
audience={config.audience}
// redirectUri={config.redirect_uri}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
useRefreshTokens={true}
cacheLocation="localstorage"
>
{children}
</Auth0Provider>
);
};
Any idea what’s happening here?