This article provides a few potential causes for losing an authentication session after refreshing a single-page application (SPA). 

• Single Page Application (SPA)
• Session Lost 
• Refresh SPA 

There could be a few different reasons why authentication is lost after refreshing a single-page application. Common reasons are:

1.  Auth0 developer keys are used instead of personal credentials for a social connection.
2. The browser is blocking third-party cookies.

Social connection settings

First, determine if authentication is being lost for database connections (i.e., log in with a username/password) or if it only occurs for social connections (such as Google or Facebook).

If it is only happening with social connections, the issue can be most likely resolved by configuring the social connection to use personal credentials. Find instructions on connecting to social identity providers in the following document: Social Identity Providers

Third-party cookies

Another possibility is that the browser is blocking third-party cookies required for silent authentication to take place. To determine if this is the issue, check if this problem only occurs in some browsers (such as Safari) but not others (such as Chrome).

By default, the Auth0 SPA SDK will cache authentication data in memory, which does not persist page refreshes in single-page applications. This means that the SDK will need to check with Auth0 to see if the user has a valid session. The SDK will use silent authentication to accomplish this.

Silent authentication requires third-party cookies supplied by Auth0 as the authorization server. However, various browsers, such as Safari, block third-party cookies by default. This means that the Auth0 SPA SDK will not be able to set cookies during authentication.

A workaround for this is to use Refresh Token Rotation and set the cacheLocation to “localstorage” when initializing the Auth0 client.

NOTE: When using browser storage such as local storage, it is recommended to shorten the Access Token’s life as much as possible and take other measures to prevent cross-site-scripting attacks.

React example:

<Auth0Provider
  domain={REACT_APP_AUTH0_DOMAIN}
  client_id={REACT_APP_AUTH0_CLIENT_ID}
  audience={API_IDENTIFIER}
  redirect_uri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
  useRefreshTokens
  cacheLocation="localstorage"
>

JS example:

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

Alternatively, use Auth0’s Custom Domain functionality as a workaround. This will prevent browsers from blocking Auth0’s cookies.

Related References

• Troubleshoot Renew Tokens When Using Safari
• Token Best Practices