How to login once across multiple subdomains on a custom domain?

Help
1

We are developing a suite of separate SPA applications where each one lives on a subdomain with a common parent domain.

app1.domain.com
app2.domain.com

We want to avoid customers having to sign in to each app separately. So we want to be able to sign in once to one app and remaining signed in when visiting the other apps. Similarly, signing out of one would sign out in the others.

Based on my research of the Auth0 docs, this seemed to be possible with a custom domain. So changed our plan, added the custom domain auth.domain.com and created a test SPA app that could log in. I then created two subdomains and pointed them both at the app.

Logging in to app1.domain.com worked. The auth0.{clientid}.is.authenticated cookie was created. However, the cookie’s domain was app1.domain.com, not .domain.com as I’d hoped.

I then tried visiting the app2.domain.com and confirmed that the cookie definitely wasn’t there and I wasn’t logged in.

Is there any way to configure Auth0 to keep a user logged in across all the subdomains?

2

I opened a pull request on auth0-spa-js package to add an option to specify the cookie domain. It was accepted and merged. It was accepted and merged in version 1.21.0 and later.

In your client configuration, add a cookieDomain option.

const auth0 = await createAuth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>',
  redirect_uri: '<MY_CALLBACK_URL>',
  audience: '<MY_AUDIENCE>',
  cookieDomain: '.example.com',
})

NOTE: Top level cookie domains always start with a period ..

Use this configuration on each app/subdomain under the same top level domain and you’ll notice the auth0.{clientid}.is.authenticated cookie will exist on both. Signing in on one will result in you being signed in when you visit any others.

The auth0-spa-js package is used by most of the other auth0 plugins for Vue, React, etc. so client configuration should be virtually identical.

1 Like