Getting "BrowserAuthError: interaction_in_progress" in SPA with MSAL redirect and iframe

Question

I have a react SPA that uses MSAL and Azure AD B2C for authentication. In every page, the user is able to sign in with 2 ways. The first one is with a button on the header that redirects to the B2C sign in page. The second one is with an iframe that embeds the B2C sign in page and provides an embedded sign in experience. It must be noted that this iframe is provided to the user only when certain actions happen.

It must be noted that the sign in flow inside the iframe works as expected, and the parent page is updated automatically when the user signs in inside the iframe. The "allowRedirectInIframe" is set to true and the Azure AD B2C policy has a JourneyFraming that whitelists the domain and allows rendering of the B2C sign in page inside an iframe. Also, the cache location is set to be the local storage.

The problem is that when the iframe is rendered, but the user clicks the button on the header to be redirected to the sign in page, they get the following error:

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.

The reason seems to be that when the iframe is rendered, entries are added in the session storage which indicate that there is an active interaction, and block the parent page from invoking any redirect to the B2C sign in page.

I've managed to overcome it by doing sessionStorage.removeItem('msal.interaction.status'), when the button on the header is clicked, but it's a hacky solution and I would like to ask if there is any legit way to overcome this issue.

Answer 1

Hi @Anonymous ,

Thanks for reaching out.

Redirection in application can be handle by invoking handleRedirectPromise() method in MSAL. This ensures that the token response from the server is properly handled, and temporary cache entries are cleaned up. To resolve, verify all async/await wherever you call this on page load.

await msalInstance.handleRedirectPromise();  
  
 async signIn(){  
    // lines of code  

Reference : https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications#handleredirectpromise

Hope this will help.

Thanks,
Shweta

------------------------------

Please remember to "Accept Answer" if answer helped you.

Answer 2

Hi @Shweta Mathur ,

Thank you very much for your response!
Unfortunately, the use of handleRedirectPromise doesn't seem to work in my case. Probably it's because of the flow:

• The user opens the iframe with the embedded sign in page.
• Then the user clicks on the button on the header, to redirect to the sign in page. This is where I placed the handleRedirectPromise, but it didn't work.

Could it be because no page load happens before the user clicks on the header button ?