I am not able to login using MSAL angular . Please find issue details below

Question

"@azure/msal-angular": "^2.0.1", "@azure/msal-browser": "^2.15.0",

this.msalBroadcastService.msalSubject$
.pipe(
takeUntil(this.\_destroying$)
).subscribe(val =\> console.log('SUBJEECT', val));

    this.msalBroadcastService.inProgress$
      .pipe(
        tap((status: InteractionStatus) => console.log('MSAL STATUS', status)),
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe((val) => {
        this.setLoginDisplay();
      })
    
      this.login()

ERROR Error: Uncaught (in promise): BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API. For more visit: aka.ms/msaljs/browser-errors.

Answer 1

BrowserAuthError: interaction_in_progress:

• The above error happens when one entity (in our case it is this.msalBroadcastService.msalSubject$ ) is still running while other entity( this.msalBroadcastService.inProgress$ ) is trying to run. To rectify the error add the await keyword in front them.

The code will look like this -

   await  this.msalBroadcastService.msalSubject$
              .pipe(takeUntil(this.\_destroying$)).subscribe(val =\> console.log('SUBJEECT', val));
   await  this.msalBroadcastService.inProgress$
              .pipe(
                    tap((status: InteractionStatus) =>  console.log('MSAL STATUS', status)),
                    filter((status: InteractionStatus) =>  status === InteractionStatus.None),
                    takeUntil(this._destroying$)
                    )
              .subscribe((val) => {
                                    this.setLoginDisplay();
                                  }
                         )
    
    await  this.login()

refer the following documentation:

BrowserAuthError: interaction_in_progress:

angular spa with sign in

MSAL for angular