angularmsal-angular

MSAL Angular cached login doesn't InteractionStatus progress beyond Startup


I'm having issues with the @azure/msal-angular v4 library. Currently I believe I have the MsalService and MsalBroadcastingService correctly configured and injected into my AppComponent.

The specific issue I am seeing is that when I have a cached login (I probably have terminology wrong, basically I can visit the site after logging in without being prompted to login), the call for this.msalBroadcastingService.inProgress$ never emits a status beyond InteractionStatus.Startup.

However, if I go into an incognito browser and visit the site, I will be redirected to the login page, I sign in, get redirected back, and the site works correctly. With some debug statements I can observe that the observable, inProgress$, emits "InteractionStatus.None" indicating it has completed and I am signed on.

When I refresh the page though, I see it emit "InteractionStatus.Startup", and there it stops.

Here is the OnInit code in my AppComponent:

private initMsal(): void {
    this.msalBroadcastService.inProgress$.pipe(
        tap(x => console.log(`tap: ${x}`)), // my debug statement to track status
        filter(status => status === InteractionStatus.None)
    ).subscribe(() => {
        console.log('subscribe callback'); // debug statement to indicate we've made it to None

        this.checkAndSetActiveAccount(); // our code post login
        this.setupMenu();
    });
}

Can anyone provide any starting points as to how I can debug or resolve this issue?


Solution

  • I ultimately fixed my issue by using the MsalService.handleRedirectObservable() method and subscribing to the results, then checking for an active account:

    this.msal.handleRedirectObservable().subscribe(() => {
      const account = this.msal.instance.getActiveAccount();
      if (account) {
        // do post-login stuff
      } else {
        this.msalBroadcastService.inProgress$.pipe(
          filter(status => status === InteractionStatus.None),
          take(1))
          .subscribe(() => {
            // do post-login stuff
          });
      }
    });
    

    If you try to call the getActiveAccount method before the MsalService gets initialized it'll throw an error and it seems like handleRedirectObservable did the initialization I needed to be able to check for an active account, in which case I would either proceed or branch off to do the login logic. There's probably a cleaner way to do this?