Single Sign-On between Applications of the Same Tenant

Knowledge Articles
, , , , , , , , ,
1

Problem statement

How to recognize sessions between applications of the same tenant. Examples include one NEXTJS (RWA) and several REACT (SPA) apps with 100% protected pages.

Steps to reproduce

Login Scenario 1.1:

  1. Open NEXTJS app URL.
  2. If I open another REACT app within it asks me to log in (Fully protected).
  3. Log in to NEXTJS.
  4. Open a REACT app within.
  5. Friction-less experience with an open session.

Login Scenario 1.2:

  1. Go to REACT app (fully protected) within the NEXTJS app.
  2. Redirects to Login, enter credentials.
  3. Back to the NEXTJS page.
  4. Unauthenticated, also, refreshing doesn’t work.
  5. Click on Sign in / Login.
  6. Friction-less opened session in NEXTJS (valid Auth0 session), but with an extra-click.

Login Scenario 1.3 (between REACT apps):

  1. Log in to REACT app 1.
  2. Go to REACT app 2 in another tab, same browser.
  3. Open sessions in both.

NOTE: There could be other scenarios, this is a baseline guide.

Cause

In the Login scenarios 1.1 and 1.3 all is working as expected since when you open a side-app (I use “side app” for all those REACT apps that are accessed from within NEXTJS, referenced here as main app). If the users saved these side apps as bookmarks, they could try accessing one of REACT apps, it will lead them to the Universal Login page, yet when the session is started from the main app (1.1) or in another side-app (1.3), accessing another side-app will be a frictionless experience. However, in case 1.2, the main app can’t have a session on the server side because the React apps won’t open a session here, so the appsession cookie is not present.

Solution

In the case of Scenario 1.2, trigger a Silent Authentication when the page is printed, and you can help yourself with this documentation to set it up: Configure Silent Authentication

Related References