Auth0 Single Sign-On (SSO) between Parent and Child Applications with Angular: Authentication State Issue

I have a parent application and a child application, both using Auth0 for user authentication. The goal is to achieve single sign-on (SSO) so that when a user logs in to the parent app, they can seamlessly access the child app without needing to log in again.

However, I'm encountering an issue with the authentication state.

I'm using the auth0-angular SDK. When I try to access the child app from the parent app, the isAuthenticated value is false, even though the user has successfully logged in.

But, when I use loginWithRedirect in the child app after the user has already logged in through the parent app, it does not show the login page and redirects back to my child app.

However, the problem with this is that if the user is not authenticated, I want to redirect them back to the parent app for authentication.

// Child app code using auth0-angular
ngOnInit(): void {
  this.getParams();
  this.listener();
}
private listener(): void {
  this.sub.add(
    this.authService.isAuthenticated$.subscribe((isAuthenticated: any) => {
      console.log(isAuthenticated); // This often shows false when it should be true
    })
  );
}

I want to ensure that the authentication state is correctly shared between the parent and child apps when using Auth0 for SSO. How can I resolve this issue and achieve a seamless SSO experience for my users, including handling the redirection back to the parent app when authentication is required in the child app?

from Auth0 Single Sign-On (SSO) between Parent and Child Applications with Angular: Authentication State Issue