Angular 13 - BrowserAuthError: interaction_in_progress: Interaction in progress detected

Question

The following error occurred when logging out and immediately trying to log back in. Only closing the browser seems to resolve the issue. So I'm assuming this is some kind of caching issue, but I can't seem to find a way around it.

This is the login code I am currently using:

async signIn() {
    // console.log(this.appMSALObj)
    var _this = this;
    await this.appMSALObj.loginPopup(settings.loginRequest)
      .then(function(response) {
        //console.log("authService: login complete")
        _this.selectAccount();
        //console.log(_this.account)
        _this.router.navigate(['/home'])
      })
      .catch(error => {
        console.error(error);
      });
  }

It never enters the selectAccount function.

msalConfig is set to use localStorage and the storeAuthStateInCookie flag is false.

Answer 1

A bit late to answer, but I'll give it a try.

According to docs This happens when the first operation has not completed yet and the second operation is triggered. For example:

loginPopup();
acquireTokenPopup();

In this case, interaction_in_progress occurs. You can easily prevent this by waiting for:

await msalInstance.loginPopup();
await msalInstance.acquireTokenPopup();

In some cases, this does not solve the problem. In my case, missing <app-redirect></app-redirect> could also cause this error. It must be placed in your index.html:

Interesting thing to note: If you force login for every route mentioned in app-routing.module.ts, even if you don't use <app-redirect>< ;/app-redirect> and it still works without errors