Auth0 Authentication Lost After Refreshing a Single-Page Application

Last Updated: Sep 11, 2026

Overview

Refreshing a Single-Page Application (SPA) drops the authentication session. This issue occurs because the application uses Auth0 developer keys for a social connection instead of personal credentials, or the browser blocks third-party cookies required for silent authentication. Resolve this by configuring the social connection to use personal credentials, enabling Refresh Token Rotation with local storage, or implementing an Auth0 Custom Domain.

Applies To

Auth0
Single-Page Application (SPA)
Session Lost
Refresh SPA

Cause

The application drops authentication after refreshing a single-page application for two primary reasons:

The application uses Auth0 developer keys instead of personal credentials for a social connection.
The browser blocks third-party cookies required for silent authentication.

Solution

Configure the Social Connection to Use Personal Credentials

Determine whether the application drops authentication for database connections or if it only occurs for social connections. If the issue only happens with social connections, configure the social connection to use personal credentials. Find instructions on connecting to social identity providers in the Social Identity Providers documentation.

What configuration allows the Auth0 SPA SDK to handle blocked third-party cookies?

Determine whether the browser blocks third-party cookies required for silent authentication by checking whether the problem occurs only in specific browsers. By default, the Auth0 SPA SDK caches authentication data in memory, which does not persist across page refreshes in single-page applications. The SDK uses silent authentication to check with Auth0 for a valid session. Silent authentication requires third-party cookies supplied by Auth0 as the authorization server. Browsers that block third-party cookies prevent the Auth0 SPA SDK from setting cookies during authentication.

Resolve this by using an Auth0 Custom Domain to prevent browsers from blocking Auth0 cookies. Alternatively, use Refresh Token Rotation and set the "cacheLocation" to "localstorage" when initializing the Auth0 client.

NOTE: When using browser storage, such as local storage, shorten the Access Token lifetime as much as possible and take additional measures to prevent cross-site scripting attacks.

Implement Refresh Token Rotation and local storage in a React application by applying the following configuration:

```
<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"
>
```

Implement Refresh Token Rotation and local storage in a JavaScript application by applying the following configuration:

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