What we can do with Cross App SSO

Help
,
1

I’d like to get a clear understanding of how Cross App SSO can be used.

I have two applications.
They must be separated completely, meaning that they cannot share the same top-level domain.
The Database can be shared.

e.g,
App1 : https://app1.com
App2 : https://app2.com

①Assume the user had App1 and App2 open simultaneously in one browser.
②Next, the user clicks the login button in App1 and authenticates with App1 via Universal Login.
③In that state, if the user refreshes the page of App2, the user automatically logged into App2.

The above scenario is the use case I have envisaged.
Is it possible with Auth0?

Through trial and error, I’ve found that the following behavior seems achievable.
①② same as described above.
③The user clicks the login button in App2, then the user can logged into App2 without Universal Login.

Is this the limit of what we can achieve with Auth0?

2

I’ve found the solution.
When accessing a page with Root Guard without authentication, the user will be redirected to the Universal Login screen.

So I made a global middleware like this.

import { useAuth0, authGuard } from "@auth0/auth0-vue";
import type { RouteLocationNormalized } from "vue-router";

export default async function (to: RouteLocationNormalized) {
  const auth0 = useAuth0();
  const { isAuthenticated, isLoading } = auth0;

  // watch the loading flag
  Object.defineProperty(isLoading, "_value", {
    set: async (): Promise<void | boolean> => {
      if (isAuthenticated.value) {
        // get JWT token here
      } else {
        if (to.path !== "/login") {
          return await authGuard(to);
        }
      }
    },
  });
}

I’m using Nuxt3 and Vue SDK.
Since the official Nuxt SDK is not available, I’m not sure if this is the correct approach.

Is there a better way?