Auth state lost after a reload

Get Help
,
1

Here is the code:

        <Auth0Provider
            clientId={`${NEXT_PUBLIC_AUTH0_CLIENT_ID}`}
            domain={`${NEXT_PUBLIC_AUTH0_DOMAIN}`}
            redirectUri={resolveRedirectUri()}
            onRedirectCallback={(appState?: AppState): void => {
                if (appState) {
                    history.push(appState.location);
                }
                window.history.replaceState(
                    {},
                    document.title,
                    appState?.returnTo || window.location.pathname
                );
            }}
        >
            <Authenticator children={children}/>
        </Auth0Provider>

and Authenticator:

export default function Authenticator({children}): JSX.Element {
    const {isAuthenticated, error, user, loginWithRedirect} = useAuth0();

    if (error) {
        return <Errors code={500} message={error.message}/>;
    }

    if (!isAuthenticated) {
        const location = useLocation();
        return <>
            <Head>
                <meta property="og:description" content="Login page"/>
                <meta charSet="utf-8"/>
                <title>登录</title>
            </Head>
            <div className={styles.container}>
                <main className={styles.main}>
                    <h1 className={styles.title}>
                        《社群长青》
                    </h1>

                    <p className={styles.description}>
                    <Button variant={'contained'} onClick={() => loginWithRedirect({
                        appState: {
                            location: location,
                            returnTo: location.pathname,
                        }
                    })}>
                        点击登录
                    </Button>
                    </p>
                </main>
            </div>
        </>
    }

    if (isWhitelistUsers(user)) {
        return <>{children}</>;
    }

    return <Errors code={403} message={`Unregistered user: ${JSON.stringify(user)}`}/>;
}

When I successfully authenticate, after a page reload (ctrl + R) the login state is lost, and I have to re-auth.

How can I keep the login state within the same window?

2

I just want to say why the code shown doesn’t seem related to your issue. Can you show us where the localstorage is set and used.

1 Like
4

Hi @tison,

Welcome to the Auth0 Community and sorry for the late reply.

There could be multiple reasons as of why this issue occurs given the current implementation, but in order for the user to remain logged in after refreshing the page the query parameters in state or code must be removed from the URL. This can be accomplished by exchanging the appState?.returnTo || window.location.pathname to just '/' in your code, as mentioned in our current documentation.

Otherwise you can also explore other options such as :

  1. Silent authentication can be used in order to generate new tokens as long as the user still has a valid session. This can be accomplished by making a call to the /authorize endpoint with the parameter prompt=none, with more details that can be found under this documentation. However Silent authentication requires third-party cookies supplied by Auth0, which are generally blocked by specific browsers such as Safari. An alternative would be useing Auth0’s Custom Domain functionality to prevent browsers from blocking Auth0’s cookies.

  2. A workaround for this is to use Refresh Token Rotation and set the cacheLocation to localstorage when initializing the Auth0 client. However when using “localstorage” it is recommended that the Access Token’s life is shortened as much as possible. An example would look like this :

auth0 = await createAuth0Client({
domain: config.domain,
client_id: config.clientId,
useRefreshTokens: true,
cacheLocation: 'localstorage'
});

Thanks for posting your inquiry and I hope this helped.
Best regards,
Remus

5

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