Sharing session between 2 web apps on different subdomains

Help
1

Hi!

We currently have a web app using Lock to authenticate users hosted on app1.example.com, and we are creating a single page app (React) that will be hosted on app2.example.com.
In the long term app1 will disappear and app2 will be the only one staying, but right now, during our beta phase, our users will have access to some features in app2 and the rest in app1.

The only way to access app2 is from app1, so I’m looking for a way to have the users being automatically authenticated on app2, so they wouldn’t have to log in twice.

So far I have tried to save access_token and id_token to cookies with the domain .example.com, to be accessible by both apps. I can retrieve them and use them in app2, but when they are about to expire I did not find a way to renew them.
I have tried with auth0-js and checkSession but I could not figure out a way to “log in” the user when instantiating the webAuth on app2.

Any idea how to do that ? Maybe something obvious that I’m missing :upside_down_face:

Thanks,

Olivier

3 Likes
2

Hi Olivier,

I assume in this case you are using universal login. Is that correct?

If so, you can use checkSession to issue a new token via silent authentication. It will use the user’s existing session in Auth0 to issue a new token without redirecting the user or requiring them to re-authenticate.

Please keep in mind that SSO only applies to database connections as in the case of third-party identity providers the session is considered to be maintained with the provider and not Auth0.

Also, since you are using React, have you considered using auth0-spa-js for your second app? It’s a high-level library built on top of Auth0.js that enforces best practices and handles a lot of the details for you.

With it you can simply use getTokenSilently (example: https://auth0.com/docs/libraries/auth0-spa-js#call-an-api) to retrieve a new token via silent authentication.

getTokenSilently also implements caching so it will only fetch a new token once the current one has expired.

Our React quickstart uses this SDK and provides a useAuth0 hook you can use to provide common functions such as getTokenSilently to your components.

Please read through the following articles for a further understanding of how SSO works with Auth0:

1 Like
3

Hi Richard,

Thanks for your answer!

I am now unsing auth0-spa-js!
But my issue is still the same, when the user gets to app2 they are not logged in, I can only retrieve the id_token and access_token from the cookies I am saving from app1.

So my question is, is there a way to provide this tokens to the auth0 client when instantiating it in app2 ?

1 Like
4

Did you solve your issue? I am looking for an answer to this as well. I am using various micro apps in different sub domains and I need to be able to seamlessly transition between apps.

1 Like
5

Bumping this. Same question. We have www.domain.com and sub.domain.com and we’d like users to be authenticated across both.

6

Same question: Do we have any approach for the following scenario.
There are two subdomains (www.sub1.domain.com) and (www.sub2.domain.com) with two different react apps.
How can I be able to seamlessly transition between apps.
Also, I have only one login page in one react app, which should login the user in both domains at once.

7

I’d also like to know the steps involved to make sure this works correctly.

8

Has anyone found a solution to this?

2 Likes
9

Boosted! We are also stuck here. Couldn’t find any good direction to achieve this.

10

Have anyone solved this?

11

Anyone solve this?

I’ve seen a number of workarounds like polling whatever your SDK’s equivalent of the checkSession method is, but none of them are smooth and many implementations are expensive in terms of server compute time and calls to Auth0 when you have lots of traffic.

For my nextjs app, i’m using nextjs-auth0 and the best I have got so far is to detect the document.referrer being one of my apps I want to share sessions between, and implementing my own silent login api that triggers the login flow with prompt=‘none’ in order to fail silently if they don’t have an active session as opposed to taking them to the login page, and log them in if they do.

It has issues though with strict browser referrer settings and clunky looking double loading flows.

12

Just a followup for anyone else struggling with this. I’ve ended up getting a decent implementation going.

I set up a /api/auth/silent route on my auth0 handler that takes in a redirect query param and fires off a login attempt with prompt=‘none’ with that redirect url set as the returnTo on the authorization request. When it comes back through my callback handler I detect the specific error codes for this silent auth situation and just swallow the error, redirecting them to the returnTo route anyway.

This way I can proxy all bounces between my subdomains via this api route to log them in if they have a session in any of my subdomains by sending them to api/auth/silent?redirect=/blabla

It doesnt handle users manually bouncing between the subdomains and auto logging them in though I dont think that’s possible without triggering silent auth on every page load or polling it, both of which sound too network-chatty and expensive.

Hopefully this helps someone, you should be able to follow the same pattern for any server side auth0 SDK that has some way to do silent authentication, or for browser based auth SDK’s they expose a checkSession method that you could use from the client app to do the same thing without needing a proxy api