Detect whether user is logged in to site A from site B, using Firebase Auth

Question

Our new site, example.pro, uses Firebase authentication. A small subset of our old example.com users will pay to subscribe to the new site but most will continue to use the old site anonymously.

Firebase Auth makes it easy to remain logged in to example.pro, but these privileged users might visit the old site for various reasons, including by mistake, and from different devices. So for these users I would like to detect whether they are logged in and redirect them as transparently as possible offer them a link to the new site that they can ignore and continue to use the old site, if they wish.

I have considered placing an iframe from example.pro on example.com that would trigger a dialog. Would that be safe?

Do you have a better idea?

[I've edited my question to clarify that the old site does not use any authentication or means of identifying the user, and to clarify that I want users to be able to choose to remain on the old site]

Answer 1

Firebase Authentication does not support multi domain authentication or something like SSO. The best you can do you implement JWT based custom auth that primarily relies on Firebase Auth. I've done that in a couple of ways and the auth flow mentioned below works best for me:

1. Select a domain for Firebase auth (this will be the domain where users will be logged in via Firebase directly)
2. When user visits one of your subdomain, let's say app.domain.com for this example, you check if there is any token present in the localStorage of browser (or any local storage of the respective platform). If yes, that means they are logged in. (I'll come back to the token later)
3. If the user ain't logged in on the subdomain, go to the domain where Firebase Auth works, make a call your server with the Firebase IdToken, verify that and generate a temporary token and return it. Make sure you store it in your database on server side. After that, redirect user back to the subdomain where they were trying to log in with the new token in query param. For example, your URL may look like: https://app.domain.com/login?temp_token=thatTempTokenGeneratedOnServerSide1234.
4. Make another request containing that temp token to your server from the subdomain and validate it (like check the UID and if it is expired and maybe if the IP of user is same when the token was created).
5. Generate another JWT (preferably one with long life) (You might want to look at Rolling Token Auth for better security) and return it to the client and store it on client. This JWT ideally would contain only the UID of that user. So whenever the user makes any subsequent requests to the server from that subdomain, add that token in request header (or keep it in cookies as per your convenience) then verify it on server side for processing the data.
6. If the token is expired, repeat the auth flow.

I've been using this for a while and found no issues. Just make sure you read about the access tokens and refresh tokens about how that works. I'll try to add a flowchart asap meanwhile feel free to ask any questions.