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

Anonymous
2022-09-14T09:01:53.563+00:00

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.

Microsoft Entra External ID
Microsoft Entra External ID
A modern identity solution for securing access to customer, citizen and partner-facing apps and services. It is the converged platform of Azure AD External Identities B2B and B2C. Replaces Azure Active Directory External Identities.
2,639 questions
Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
19,473 questions

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Shweta Mathur 27,456 Reputation points Microsoft Employee
    2022-09-16T05:48:29.953+00:00

    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.

    1 person found this answer helpful.
    0 comments
  2. Anonymous
    2022-09-19T08:14:19.707+00:00

    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 ?