Single Log In Across Multiple SPA Applications Without Relying on 3rd Party Cookies

This article explains what happens when third-party cookies disappear on B2C websites with Single Sign On (SSO) is implemented with the following configuration:

• When landing on the website, the Auth0 client is set up and calls the getTokenSilently function
• If there is a token, it is set in a cookie

Depending on the browser, one of the following behaviors is observed:

• Log in to website 1 - The user is automatically logged into website 2 
• Log in to website 1  - The user is logged into website 2 without filling out credentials, but they need to click on the login button

• Single Sign-On (SSO)
• Third-party Cookies

When a 3rd party cookie is available, silent authentication can be leveraged to check if the user has a session with the Auth0 layer.

• Session Layers
• Configure Silent Authentication

This does not work on browsers that disable third-party cookies, such as Chrome Incognito Window and Safari. An Auth0 Tenant stores its session in a cookie. The Tenant and Applications belong to different domains.

The following are two possible solutions.
 

Leveraging the "cookieDomain" option

If applications share a parent domain, leverage the "cookieDomain" option:

• cookieDomain
• Class: WebAuth

This will ensure the cookie is accessible across multiple subdomains.
 

Redirect the users to the Universal Login Page

Redirect the users to the Universal Login Page when an Application is loaded. If the user has a session, they will be redirected to the app without inputting a password. After that, the refresh token can be used.

NOTE: Only do this once when an Application loads; redirecting users while they are browsing the page will damage the user experience.

try {
  await auth0Client.getTokenSilently();
} catch (err) {
  console.log("[Silent Auth]", err);
  console.log("[Silent Auth] Cannot get token silently. Redirecting...")
  await auth0Client.loginWithRedirect();
}

try {
  await auth0Client.handleRedirectCallback();
} catch (err) {
  console.log("[Redirect Callback]", err);
}