MSAL Interceptor seems to violate the library's own rule, producing a console error (but not affecting functionality)

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.23.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.2.0

Description

When accessing my application for the first time in a while, there is one MSAL error log and one regular console error log. But the application continues to flow as if nothing had happened.

Error Message

Looks like the screenshot’s not getting uploaded, so here we go. Copied directly as-is from Chrome’s DevTools’ console logs:

[Fri, 03 Jun 2022 18:03:41 GMT] : @azure/msal-browser@2.24.0 : Info - Emitting event: msal:initializeStart main.js:1 [Fri, 03 Jun 2022 18:03:41 GMT] : @azure/msal-browser@2.24.0 : Info - Emitting event: msal:initializeEnd main.js:1 [Fri, 03 Jun 2022 18:03:41 GMT] : @azure/msal-browser@2.24.0 : Info - Emitting event: msal:handleRedirectStart (index):1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS. polyfills.js:1 [webpack-dev-server] Live Reloading enabled. main.js:1 [Fri, 03 Jun 2022 18:03:42 GMT] : @azure/msal-angular@2.3.0 : Info - Interceptor - 1 scopes found for endpoint main.js:1 [Fri, 03 Jun 2022 18:03:42 GMT] : @azure/msal-angular@2.3.0 : Error - Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve. loggerCallback @ main.js:1 p.executeCallback @ main.js:1 p.logMessage @ main.js:1 p.error @ main.js:1 (anonymous) @ main.js:1 (anonymous) @ main.js:1 _error @ main.js:1 error @ main.js:1 (anonymous) @ main.js:1 invoke @ polyfills.js:1 onInvoke @ main.js:1 invoke @ polyfills.js:1 run @ polyfills.js:1 (anonymous) @ polyfills.js:1 invokeTask @ polyfills.js:1 onInvokeTask @ main.js:1 invokeTask @ polyfills.js:1 runTask @ polyfills.js:1 x @ polyfills.js:1 Promise.then (async) Ie @ polyfills.js:1 X @ polyfills.js:1 scheduleTask @ polyfills.js:1 onScheduleTask @ polyfills.js:1 scheduleTask @ polyfills.js:1 scheduleTask @ polyfills.js:1 scheduleMicroTask @ polyfills.js:1 Be @ polyfills.js:1 je @ polyfills.js:1 (anonymous) @ polyfills.js:1 n @ runtime.js:1 (anonymous) @ 11.js:1 main.js:1 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. 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 g.y [as constructor] (main.js:1:43016) at new g (main.js:1:23525) at g.createInteractionInProgressError (main.js:1:24889) at d.setInteractionInProgress (main.js:1:225287) at F.preflightInteractiveRequest (main.js:1:358776) at F.preflightBrowserEnvironmentCheck (main.js:1:358554) at d.<anonymous> (main.js:1:348998) at N (main.js:1:16206) at Object.next (main.js:1:16311) at main.js:1:15247 at je (polyfills.js:1:136730) at new o (polyfills.js:1:139226) at f (main.js:1:14982) at F.acquireTokenRedirect (main.js:1:348810) at _e.acquireTokenRedirect (main.js:1:1888) at ie.acquireTokenInteractively (main.js:1:10597) at main.js:1:9649 at main.js:1:762891 at c._error (main.js:1:761605) at c.error (main.js:1:753095) yg @ main.js:1 handleError @ main.js:1 next @ main.js:1 next @ main.js:1 _next @ main.js:1 next @ main.js:1 (anonymous) @ main.js:1 c @ main.js:1 next @ main.js:1 emit @ main.js:1 (anonymous) @ main.js:1 invoke @ polyfills.js:1 run @ polyfills.js:1 runOutsideAngular @ main.js:1 onHandleError @ main.js:1 handleError @ polyfills.js:1 runGuarded @ polyfills.js:1 p.microtaskDrainDone @ polyfills.js:1 x @ polyfills.js:1 Promise.then (async) Ie @ polyfills.js:1 X @ polyfills.js:1 scheduleTask @ polyfills.js:1 onScheduleTask @ polyfills.js:1 scheduleTask @ polyfills.js:1 scheduleTask @ polyfills.js:1 scheduleMicroTask @ polyfills.js:1 Be @ polyfills.js:1 je @ polyfills.js:1 (anonymous) @ polyfills.js:1 n @ runtime.js:1 (anonymous) @ 11.js:1 main.js:1 [Fri, 03 Jun 2022 18:03:42 GMT] : [1c0e7351-a2db-4891-9e87-f44b3281a110] : @azure/msal-common@6.3.0 : Info - in acquireToken call main.js:1 [Fri, 03 Jun 2022 18:03:42 GMT] : @azure/msal-browser@2.24.0 : Info - Emitting event: msal:loginSuccess

Msal Logs

Same as the ones under the “Error Message” section

MSAL Configuration

{
  auth: {
    clientId: msalConfig.clientId,
    authority: `${msalConfig.authority}${b2cPolicies.signInSignUpPolicy}`,
    knownAuthorities: [
      `${msalConfig.authority}${b2cPolicies.signInSignUpPolicy}`,
    ],
    redirectUri: msalConfig.redirectUri,
    postLogoutRedirectUri: msalConfig.logOutRedirectUri,
    loginFailedRoute: msalConfig.loginFailedRoute,
    navigateToLoginRequestUrl: false
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
    storeAuthStateInCookie:
      window.navigator.userAgent.indexOf("MSIE ") > -1 ||
      window.navigator.userAgent.indexOf("Trident/") > -1
  }
}

Relevant Code Snippets

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: { scopes: [...b2cScopes] },
    loginFailedRoute: msalPublicClientAppConfig.auth.loginFailedRoute
  };
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap: new Map([
      [ environmentConfigs.paymentPortalProxy, [ msalPublicClientAppConfig.auth.clientId ] ]
    ])
  }
}

Reproduction Steps

1. Access an application route that is protected by the MsalGuard
2. Get redirected to a sign-in flow and sign in
3. Get redirected back to the application as normal
4. DON’T explicitly clear local storage or sign out
5. Sign in the next day (I’m assuming just after the tokenage information all expires)
6. Observe the aforementioned error logs

Expected Behavior

No console errors (that BrowserAuthError) as application flow seems expected by the message in the MSAL error message: rejected with error. Invoking interaction to resolve.

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[ozkoidi]

I see the same exceptions on Application Insights. In my case is not 2 but 5 calls that are done within the same second. I think there is something wrong that should be fixed even if the end user doesn’t notice this issue.

[jasonnutter]

@AndrewJohnWalker And you are saying that both requests fail with an interaction_in_progress error? Note, the original poster of this issue indicated that the first request would successfully trigger a redirect, while the second would fail, which is what we would expect.