Sharing authentication across webapps

[MaheshkumarSundaram]

Hi @neonexus,

Could you please suggest on how to I proceed with my below usecase.

Say, I have a Sails-React web app named Demo and is running on a server. I also have some other web applications (may or may not be Sails based) running on different servers.

Is it possible to use the Demo webapp as the base and share it's authentication across all other webapps in the browser? I mean, if I'm logged on to Demo, I'll be automatically logged in to others.

Do you have any suggestions on how to acheive this?

Thank you!

[neonexus]

So, if I understand you correctly, you want a user to login on 1 frontend, which can then talk to other API's / backends?... While this is possible, it is generally not recommended. This would mean each app would have to be able to access a single datastore to verify authentication, and in the same way. This also means, you can't use cookies, as you can't create cookies for a different domain/subdomain in the browser, the server has to set them. So, you'd have to set headers for authentication; this also means creating a token handling system, so you aren't passing around user/password info.

The way I would handle this, would be to set it up, so the DEMO app has a private token [per each app!] (only the other app and DEMO know these tokens [make em nice and long, and also different for each app!]), that it sends to whatever API it needs to get data from. This way, your DEMO app on the frontend only ever deals with 1 API, and the backend is what handles all other data retrieval. This also makes it so you can swap out the backend for changes/updates to the other APIs, and the end-user won't be the wiser, because they won't have to reload their frontend; it'll just work suddenly. In your backend API calls, you can also inform the separate app about which user is wanting to do whatever action.

Hope that makes sense.

[MaheshkumarSundaram]

Hi @neonexus,

Thanks for your detailed explanation and the suggestion. Sorry I didn't specify this clearly in my question.

Say, I have three webapps each with their own frontend and backend. Each of the below are running on separate servers.

1. DEMO - Sails-React app
2. XCAL - May or not be a Sail-React app
3. MSQ - May or not be a Sail-React app

Although DEMO hass it's own functionality, you can launch XCAL and MSQ frontends from DEMO. XCAL and MSQ can run individually too not necessarily from DEMO.

So, if the user is logged into DEMO, they should be automatically logged into the other two. But if the user logs into either XCAL or MSQ, they would only be logged into that individual app not into DEMO or the other one.

[neonexus]

Well, in this case, I would make it so the DEMO app has an API the frontend can use, to retrieve a token, which is then used to open XCAL or MSQ (http://localhost/xcal?demoLogin=1234abcd). Both apps would have to take the token, and "spend" it with some central service / database. In other words, if the token is valid, it is used to login the user, then is deleted (so, single-use tokens).

Perhaps even in an <iframe />. Hope that makes sense.

[MaheshkumarSundaram]

Yeah. I was thinking along the same line. Thank you so mcuh @neonexus.