React/Apollo useAuth0 context is undefined when navigating to a page manually

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?

Hey there!

Can you open it as a GitHub issue in the auth0-spa-js repo so we can work on that directly with the repo maintainers? Once you do that please share the link to it with us here so we can ping repo maintainers. Thank you!

Thanks @konrad.sopala

1 Like

Perfect! I’ll ping repo maintainers in a few minutes

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