How to recover from BrowserAuthError: interaction_in_progress? Logout now throws this error

Library

• @azure/msal-browser@2.13.0
• @azure/msal-angular@2.0.0-beta.2

Framework

• Angular

Description

In very rare, hard to reproduce cases, we see the BrowserAuthError: interaction_in_progress error. I’m aware of the FAQ and this error usually does not happen. However, I assume that if the user quits the browser in the middle of the process or something similar, it can happen. We therefore implemented an error handler, that would call the logout function to clear the state and have the user recover from this situation.

Now, with the recent upgrade this no longer works, because initializeLogoutRequest now throws this error. I can see that the “Interaction in progress” check was added to the logout function in this commit: https://github.com/AzureAD/microsoft-authentication-library-for-js/commit/3e8bfa2f4107241c35bedccd8e691009982d3ccb

If it’s no longer possible to logout the user, how can we recover from this situation? Currently the only option is to ask the user to clear cookies/cache. This is a very bad user experience…

@tnorling Can this change be reverted? If not, how else to recover?

Error Message

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.
    at BrowserAuthError.AuthError [as constructor] (http://localhost:4200/vendor.js:168843:24)
    at new BrowserAuthError (http://localhost:4200/vendor.js:175467:28)
    at Function.push.u8tD.BrowserAuthError.createInteractionInProgressError (http://localhost:4200/vendor.js:175534:16)
    at PublicClientApplication.push.u8tD.ClientApplication.initializeLogoutRequest (http://localhost:4200/vendor.js:179418:36)
    at PublicClientApplication.<anonymous> (http://localhost:4200/vendor.js:178875:51)

Expected behavior

Logout should always work and always clear up any in progress state. If this is not intended, please provide a method to clear the state so that we can recover from a broken login.

Identity Provider

• Azure AD

Browsers/Environment

• Chrome

Regression

• Did this behavior work before? Version: "@azure/msal-browser": "^2.12.1",

Security

• Is this issue security related?

Source

• Customer request

[tnorling]

@restfulhead This means that handleRedirectPromise isn’t being called on page load or isn’t finished before attempting to login again. handleRedirectPromise will clear in progress state when returning from a back button or when reloading the page.

Please read these docs and make sure you’re either using the MsalRedirectComponent or are calling handleRedirectObservable on every page that will call loginRedirect or return from a redirect

[restfulhead]

Oh I see. I was calling handleRedirectObservable() when returning from the redirect, but I missed the fact that I need to call it before the redirect as well. Changing my code to this.msalAuth.handleRedirectObservable().pipe(concatMap(() => this.msalAuth.loginRedirect({...}))) fixes the issue with the back button.

(I cannot simply add <app-redirect> to every page as the documentation suggests, because we support multiple identity providers and MSAL is not always active…)

This solves my issue. @tnorling Thank you so much for your prompt help!