How to achieve SSO for multiple apps that do not share a root domain, which causes cookie issues?

Help
1

The stack:

  • Universal login (pure, no custom templates).
  • Multiple SPAs all using auth0.js, all on different domains:
  • Custom domain for auth server.

The above is working, most of the time. Problems start to occur when the user has banned third-party cookies - for instance when using a privacy/incognito mode. But a lot of users just prefer to browse with strict settings.

I know the immediate suggestion is to ensure all SSO apps remain on the same domain, eg:

But this is an un-preferred option for us, given the effects on SEO, etc.

So, is there a solution to this issue?

2

JS client settings:

  • cacheLocation = ‘localstorage’
  • useRefreshTokens = true/false (no difference)
3

Right, FINALLY got there!!

For anyone having issues with Safari, Brave, or incognito/private modes in an SPA, here is the checklist.

In SPA application settings (Auth0 dashboard):

  • Add app URL to “Callback URLs” (cannot be “localhost” if developing - use a local alias for your dev server)
  • Switch on “Refresh Token Rotation”

In API settings (Auth0 dashboard):

  • Switch on “Allow Skipping User Consent”
  • Switch on “Allow Offline Access”

In SPA code (this is after the login, when the auth server is redirecting back to your SPA):

const client = new Auth0Client({
    domain: '******',
    client_id: '******',
    cacheLocation: 'localstorage',
    useRefreshTokens: true,
    audience: '******' // The audience MUST be passed here.
});

await client.handleRedirectCallback();

const apiToken = await client.getTokenSilently({
     audience: '******', // This MUST match the audience above.
});

The issue I ran into was not passing the audience to the Auth0Client. At that stage it’s not really needed as you are retrieving an id-token for the frontend. However, the refresh token returned is the one used when generating the API token (in getTokenSilently). So the audience in the original refresh token MUST match the one used in getTokenSilently.

I’ve requested the docs be improved.

2 Likes
4

Thanks for posting the solution!

John

1 Like