Uncaught (in promise): BrowserAuthError: interaction_in_progress: Interaction is currently in progress.

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-node@1.x.x
• @azure/msal-react@1.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angular@2.x.x
• @azure/msal-angularjs@1.x.x

Framework

• Angular
• React
• Other

Description

Hi,

I followed this repo’s setup pretty much exactly for both frontend (angular 11) and backend (netcore 3.1). The configuration is exactly the same as shown in here. The problem resides when I press the login button, code . When I press the login button my url changes to “http://localhost:4200/#code=” followed by something that looks like a token and then nothing happens. If I press it again I get BrowserAuthError: interaction_in_progress: (stack trace below).

I not sure if this is problem with the setup I followed or with @azure/msal-browser@2.11.1. I can also share that if I enter the protected resource (path with msal guard activated) it actually works. I get logged in and everything is fine.

PS: I am new to creating issues on github so please let me know if I did something incorrectly or how I can improve my post. 😁

Error Message

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.
AuthError@http://localhost:4200/vendor.js:104091:24
BrowserAuthError@http://localhost:4200/vendor.js:110633:28
u8tD/BrowserAuthError.createInteractionInProgressError@http://localhost:4200/vendor.js:110694:16
u8tD/ClientApplication.prototype.preflightInteractiveRequest@http://localhost:4200/vendor.js:114110:36
u8tD/ClientApplication.prototype.acquireTokenRedirect/</<@http://localhost:4200/vendor.js:113480:45
step@http://localhost:4200/vendor.js:103642:23
verb/<@http://localhost:4200/vendor.js:103623:53
__awaiter/<@http://localhost:4200/vendor.js:103616:71
ZoneAwarePromise@http://localhost:4200/polyfills.js:10225:33
__awaiter@http://localhost:4200/vendor.js:103612:12
u8tD/ClientApplication.prototype.acquireTokenRedirect@http://localhost:4200/vendor.js:113465:16
u8tD/PublicClientApplication.prototype.loginRedirect/</<@http://localhost:4200/vendor.js:114372:44
step@http://localhost:4200/vendor.js:103642:23
verb/<@http://localhost:4200/vendor.js:103623:53
__awaiter/<@http://localhost:4200/vendor.js:103616:71
ZoneAwarePromise@http://localhost:4200/polyfills.js:10225:33
__awaiter@http://localhost:4200/vendor.js:103612:12
u8tD/PublicClientApplication.prototype.loginRedirect@http://localhost:4200/vendor.js:114369:16
loginRedirect@http://localhost:4200/vendor.js:14112:80
login@http://localhost:4200/main.js:605:34
NavBarComponent_button_6_Template_button_click_0_listener@http://localhost:4200/main.js:552:300
executeListenerWithErrorHandling@http://localhost:4200/vendor.js:47653:16
wrapListenerIn_markDirtyAndPreventDefault@http://localhost:4200/vendor.js:47688:54
decoratePreventDefault/<@http://localhost:4200/vendor.js:66878:50
invokeTask@http://localhost:4200/polyfills.js:9664:35
onInvokeTask@http://localhost:4200/vendor.js:60948:33
invokeTask@http://localhost:4200/polyfills.js:9663:40
runTask@http://localhost:4200/polyfills.js:9432:51
invokeTask@http://localhost:4200/polyfills.js:9745:38
invokeTask@http://localhost:4200/polyfills.js:10886:18
globalZoneAwareCallback@http://localhost:4200/polyfills.js:10912:31
EventListener.handleEvent*customScheduleGlobal@http://localhost:4200/polyfills.js:11038:47
scheduleTask@http://localhost:4200/polyfills.js:9650:30
onScheduleTask@http://localhost:4200/polyfills.js:9537:69
scheduleTask@http://localhost:4200/polyfills.js:9643:55
scheduleTask@http://localhost:4200/polyfills.js:9475:47
scheduleEventTask@http://localhost:4200/polyfills.js:9501:29
makeAddListener/<@http://localhost:4200/polyfills.js:11193:39
addEventListener@http://localhost:4200/vendor.js:67146:17
addEventListener@http://localhost:4200/vendor.js:66691:23
listen@http://localhost:4200/vendor.js:67067:34
listen@http://localhost:4200/vendor.js:24058:30
listenerInternal@http://localhost:4200/vendor.js:47608:44
ɵɵlistener@http://localhost:4200/vendor.js:47488:21
NavBarComponent_button_6_Template@http://localhost:4200/main.js:552:48
executeTemplate@http://localhost:4200/vendor.js:41982:19
renderView@http://localhost:4200/vendor.js:41789:28
createEmbeddedView@http://localhost:4200/vendor.js:55409:19
createEmbeddedView@http://localhost:4200/vendor.js:55540:37
_updateView@http://localhost:4200/vendor.js:80564:45
set ngIf@http://localhost:4200/vendor.js:80537:14
setInputsForProperty@http://localhost:4200/vendor.js:43341:13
elementPropertyInternal@http://localhost:4200/vendor.js:42385:29
ɵɵproperty@http://localhost:4200/vendor.js:47137:32
NavBarComponent_Template@http://localhost:4200/main.js:637:52
executeTemplate@http://localhost:4200/vendor.js:41982:19
refreshView@http://localhost:4200/vendor.js:41851:28
refreshComponent@http://localhost:4200/vendor.js:43017:24
refreshChildComponents@http://localhost:4200/vendor.js:41648:25
refreshView@http://localhost:4200/vendor.js:41901:35
refreshComponent@http://localhost:4200/vendor.js:43017:24
refreshChildComponents@http://localhost:4200/vendor.js:41648:25
refreshView@http://localhost:4200/vendor.js:41901:35
renderComponentOrTemplate@http://localhost:4200/vendor.js:41965:20
tickRootContext@http://localhost:4200/vendor.js:43191:34
detectChangesInRootView@http://localhost:4200/vendor.js:43216:20
detectChanges@http://localhost:4200/vendor.js:55228:32
tick@http://localhost:4200/vendor.js:61931:22
_loadComponent@http://localhost:4200/vendor.js:61969:14
bootstrap@http://localhost:4200/vendor.js:61908:14
_moduleDoBootstrap/<@http://localhost:4200/vendor.js:61607:64
_moduleDoBootstrap@http://localhost:4200/vendor.js:61607:44
bootstrapModuleFactory/</</<@http://localhost:4200/vendor.js:61577:26
invoke@http://localhost:4200/polyfills.js:9629:30
onInvoke@http://localhost:4200/vendor.js:60960:33
invoke@http://localhost:4200/polyfills.js:9628:36
run@http://localhost:4200/polyfills.js:9388:47
scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:10122:40
invokeTask@http://localhost:4200/polyfills.js:9664:35
onInvokeTask@http://localhost:4200/vendor.js:60948:33
invokeTask@http://localhost:4200/polyfills.js:9663:40
runTask@http://localhost:4200/polyfills.js:9432:51
drainMicroTaskQueue@http://localhost:4200/polyfills.js:9834:39

MSAL Configuration

Check description.

Reproduction steps

Follow setup and press login I guess.

Expected behavior

Press login -> pop up -> login with microsoft account -> sent to redirect url (localhost:4200 in my case locally).

Identity Provider

• Azure AD
• Azure B2C Basic Policy
• Azure B2C Custom Policy
• ADFS
• Other

Browsers/Environment

• Chrome
• Firefox
• Edge
• Safari
• IE
• Other (Please add browser name here)

Regression

• Did this behavior work before? Version:

Security

• Is this issue security related?

Source

• Internal (Microsoft)
• Customer request

[jo-arroyo]

@noelmccrory Thanks for your feedback. Having the code path point to a component which does not trigger any interaction is our recommendation, and I will update the docs accordingly.

[jasonnutter]

Closing. If you get this error, please make sure your application is waiting for any interaction to complete before invoking (directly or indirectly) subsequent MSAL operations. For redirects, see this doc: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/redirects.md