Authentication with Azure MSAL in multiple apps without a redirection

Question

I just wanted to ask that I am going in a right direction and it is even possible with MSAL library for authentication in Azure.

We have multiple single page applications which are under the same tenant in one organization. All use similar subdomains like a.service.com / b.service.com / c.service.com.

Is it possible to just sign in into Microsoft account and when we're opening either an app a/b/c we'll avoid being redirected into Microsoft sign-in page?

Generally it works like we're redirected into Microsoft page and tokens are set in the LocalStorage (auth-/id-/refresh- tokens). When we come back into the app - we are still authenticated. But is it possible to avoid being redirected into Microsoft auth page for each of the app if we have already been authenticated in any of those?

It's super annoying in case of navigation between apps. Also one app seems to keep the token/auth details for longer time and the redirection doesn't happen that frequently like in other apps but it's super hard to catch what's going on here.

Thanks a lot

We're just using MsalGuard in our app and we're using apiScope with the same clientId/tenant in all the apps.

Should I run manually ssoSilent or AFAIK Msal always tries to renew the token automatically in the background silently?

Answer 1

MSAL Angular exposes 3 login methods: loginPopup(), loginRedirect() and ssoSilent(). First, setup your default interaction type in app.module.ts:

[...]

If you already have a session that exists with the authentication server, you can use the ssoSilent() API to make a request for tokens without interaction. You will need to pass a loginHint in the request object in order to successfully obtain a token silently.

export class AppComponent implements OnInit {

  constructor(
    private authService: MsalService,
  ) {}

  ngOnInit(): void {
    const silentRequest: SsoSilentRequest = {
      scopes: ["User.Read"],
      loginHint: "[email protected]"
    }

    this.authService.ssoSilent(silentRequest)
      .subscribe({
        next: (result: AuthenticationResult) => {
          console.log("SsoSilent succeeded!");
        }, 
        error: (error) => {
          this.authService.loginRedirect();
        }
      });
  }
}

Answer 2

Those ideas are nice, thanks, but do you know what can be a suggested approach when we're using standard MsalGuard to protect some routes, even home page and we'd like to perform ssoSilent? When we're using a guard it checks authentication and redirects into Microsoft sign in page even before ssoSilent will do the job.

I was trying with a custom guard which is doing ssoSilent and if a user is already authenticated - it uses MsalGuard but it doesn't seem to be a perfect solution and also it blocks the page for few seconds.