Single authentication/two applications
Hi, I have a question and I'm hoping someone might be able to help me with.
I have two SPA applications, one in React and another in AngularJS. These apps are served from different host/domains e.g. https://app.example.com and https://clients.example.com. From a users perspective they "enter" at https://app.example.com and can move between the "app" and the "clients" applications depending on the menu options they click.
As for auth, I would like the user to authenticate when they enter https://app.example.com and they need to be able to move between both apps without needing to re-authenticate. Is this possible with Kinde?
I have been trying to get an example going on my local machine using
I have been trying to get an example going on my local machine using
localhost:3000 and localhost:4000 and I can authenticate successfully, but when I move to the second app the isAuthenticated() returns false.3 Replies
More than happy to help @Andy V
In short Kinde does support the ability to maintain authenticated sessions across two sub domains like you have with example.com.
Not sure if you already have this, but in each app, create a link to the other app using the applicable login method. And also double check your callbacks.
With your local, it might because they are different domains that issue might be stemming from.
Also, make sure that the cookie is correctly being utilized across both applications. If isAuthenticated() returns false when moving to the second app, it might be worth checking the configuration of both applications in Kinde, ensuring that the SSO cookie domain is accessible by both apps, and verifying that the session is correctly being managed across both applications.
Hi @Andre @ Kinde
Thanks for the details. Looks like I have managed to get this sorted now. The important bit I was missing was performing the
login() call from the second app. This seems like a pretty big oversight on my part now that I think about, it but was not being done with the existing Auth0 implementation that I am replacing. Things you learn ...
One problem I am having is I can't use wildcards in the "Allowed callback URLs". For example I can't use https://*.example.com for my callbacks, however I can use https://app.example.com and https://clients.example.com. I am pretty this has already been raised in another post.
Again, thanks for your help.
For anyone else interested in the steps I did:
1. Create one Kinde frontend application in you Kinde dashboard.
2. Configure the "Allowed callback URLs" to include a URL for both https://app.example.com and https://clinets.example.com
3. For https://app.example.com (which is a React app) follow the docs to add the React SDK and add the provider Context component with the configuration details from the Kinde app you created in step 1.
4. For https://clients.example.com (the JavaScript app) add the JavaScript SDK
5. When the JavaScript app is initial loaded, create a Kinde Client with the redirect_uri pointing to the client apps callback.
6. Once the client is created use isAuthenticated() to see if the user is authenticated. If they are continue as normal. If they are not, call login() and this will perform a call to Kinde, see the user already has a "session" and authenticate the user without displaying any login screens. The user will be redirected back to the redirect_uri and now isAuthenticated() will return true.This is awesome to hear @Andy V that you got it working. And thanks for posting how you got it working.