BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.

[architect-tarun-narang]

Library

• [ ] @azure/msal-browser@2.11.1
• [ ] @azure/msal-angular@2.0.0-alpha.5

Framework

• [ ] Angular

Description

Reproduction Steps

• Launched the site
• Requested for the login account selection
• User is authenticated and a simple function is called to retrieve the User's information which calls graph-api endpoint - GRAPH_ENDPOINT = 'https://graph.microsoft.com/v1.0/me?$select=id,displayName,mail,mobilePhone,employeeId,userPrincipalName';

Calling Function

    profile: IEmployeeGraphProfile;
    getProfile(): Observable<any> {
      let url = `${ConstantsMaster.GRAPH_ENDPOINT}`;
      return this.http.get<IEmployeeGraphProfile>(url)
      .pipe(
        map(result => {
          if (result) {
            this.profile = result;
            return result;
          }
        }),
        catchError(this.handleError)
      );     

• At the time of http.get call, the below error is thrown

Error Message

core.js:4197 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.
BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.
    at BrowserAuthError.AuthError [as constructor] (index.es.js:524)
    at new BrowserAuthError (index.es.js:7066)
    at Function.push../node_modules/@azure/msal-browser/dist/index.es.js.BrowserAuthError.createInteractionInProgressError (index.es.js:7127)
    at PublicClientApplication.push../node_modules/@azure/msal-browser/dist/index.es.js.ClientApplication.preflightInteractiveRequest (index.es.js:10543)
    at PublicClientApplication.<anonymous> (index.es.js:9913)
    at step (index.es.js:75)
    at Object.next (index.es.js:56)
    at index.es.js:49
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (index.es.js:45)
    at resolvePromise (zone-evergreen.js:798)
    at new ZoneAwarePromise (zone-evergreen.js:963)
    at __awaiter (index.es.js:45)
    at PublicClientApplication.push../node_modules/@azure/msal-browser/dist/index.es.js.ClientApplication.acquireTokenRedirect (index.es.js:9898)
    at MsalService.acquireTokenRedirect (azure-msal-angular.js:41)
    at MsalInterceptor.acquireTokenInteractively (azure-msal-angular.js:293)
    at CatchSubscriber.selector (azure-msal-angular.js:266)
    at CatchSubscriber.error (catchError.js:29)
    at subscribeToPromise.js:8
    at ZoneDelegate.invoke (zone-evergreen.js:364)

MSAL Configuration

There is no extra configuration except this function which is added in app-module.ts

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: auth.credentials.clientId,
      authority: 'https://login.microsoftonline.com/' + auth.credentials.tenantId,
      redirectUri: auth.configuration.redirectUri
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
  });

Reproduction steps

Expected behavior

User's information must be retrieved.

Identity Provider

• [ ] Azure AD

Browsers/Environment

• [ ] Chrome

Regression

• [ ] Did this behavior work before? The same codebase works absolutely fine on test clientID and TenantID created via developer's account of microsoft. However, it does not work when the clientID and tenantID are updated to point private tenant, it starts throwing this error.

[pkanher617]

@architect-tarun-narang This error is probably not stemming from the graph endpoint call, but from the angular interceptor which is attempting to call acquireTokenInteractive again. Could you give us more information about how the redirection code is working? A code snippet would be helpful. This usually happens if the redirection from the login page is not being handled correctly.

[architect-tarun-narang]

The code has been shared on the git repository for your reference

https://github.com/architect-tarun-narang/VacationWeb.git

There is an auth-config.json file at path "src/app" where you may need to update the clientID and TenantID to make it work.

In appmodule.ts file, the below code returns the token at the redirect uri, this code is called when the URL is requested.

As suggested by you, if this is a case where redirection from the login page is not handled correctly then the same code base should not work when its point to the TenantID and the ClientID created from developer's account (Test Accounts) used at the time of development. May be test account credentials are cached in the browser and now pointing it to different clientId is not updating the cache and throwing this error.

[ursmeier-mercatus]

I have the same problem when using InteractionType.Redirect, but with InteractionType.PopUp everything works fine. Maybe this helps to narrow down the problem.

[architect-tarun-narang]

Thanks, I give it a try with InteractionType.PopUp but it lands me to some different errors which I will have a look.

[architect-tarun-narang]

@ursmeier-mercatus - after updating to nteractionType.PopUp, it worked. I did not face the original reported error. However, I am not sure why, I am being redirected to login popup every time I click on a different URL/request. Should not the token be saved in a browser cache/cookies. Am I missing something?

[ursmeier-mercatus]

I tried it with the beta.0 version and still the same behaviour, so I searched some more and found the issue. Popup

• The app is not reloaded, you can subscribe to LoginPopup and get a subscription result and the app runs fine.

Redirect

• The app is reloaded and subscribing to LoginRedirect makes no sense.
• The Url in browser shows something like localhost:4200/#state....., meaning that the redirect has not completed (at least I interpret it that way)
• I found https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/redirects.md
• Bootstrapping MsalRedirectComponent bootstrap: [AppComponent, MsalRedirectComponent] and adding <app-redirect></app-redirect> to index.html resolved the issue for me

Conclusion https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/1.x-2.x-upgrade-guide.md says the we should use MsalRedirectComponent. It was not aware that using MsalRedirectComponent/subscribing to handleRedirectObservable is compulsory. Maybe this can be made even more understandable in the documentation. Hope this helps.

[architect-tarun-narang]

Thanks for your detailed response, I will give it a try in a day or two and revert.

[architect-tarun-narang]

InteractionType.PopUp worked fine and afterwards this error did not appear. Thanks

[tnorling]

@architect-tarun-narang Thanks for letting us know that worked! Can this issue be closed?

@ursmeier-mercatus Thanks for the feedback, we will certainly make a note to update the docs to make this more clear.