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

Asim-A commented 3 years ago

Library

[ ] msal@1.x.x or @azure/msal@1.x.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
[x] @azure/msal-angular@2.x.x
[ ] @azure/msal-angularjs@1.x.x

Framework

[x] 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

[x] Azure AD
[ ] Azure B2C Basic Policy
[ ] Azure B2C Custom Policy
[ ] ADFS
[ ] Other

Browsers/Environment

[x] Chrome
[x] Firefox
[ ] Edge
[ ] Safari
[x] IE
[ ] Other (Please add browser name here)

Regression

[ ] Did this behavior work before? Version:

Security

[ ] Is this issue security related?

Source

[ ] Internal (Microsoft)
[x] Customer request

pkanher617 commented 3 years ago

@Asim-A Thanks for opening this issue. Could you provide some logs and possible a block of code showing how the redirect flow is being handled?

Asim-A commented 3 years ago

@pkanher617 thanks for responding. I use this for login, is that helpful or do you need more?

Is there anything particular you would like me to log? Or any preferance on how to log it?

pkanher617 commented 3 years ago

Just the client side logs that are showing in the browser is sufficient, it should already be configured for logs. If possible verbose level logs would be helpful.

I use this for login, is that helpful or do you need more?

This should be fine, I didn't know if you had altered the sample in any way.

Asim-A commented 3 years ago

Just the client side logs that are showing in the browser is sufficient, it should already be configured for logs.

Not quite sure what this means, but I found & I am now using this.

I get [Thu, 18 Feb 2021 18:46:39 GMT] : : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:loginStart and then the 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. stack trace.

If I click into a protected URI I get something else (see below) the second time I click into it. It's hard to explain, but the first time I click my url changes to "http://localhost:4200/#code=[weird_encrypted_token]", but when I go home and then click back to that protected uri I get logged in.

This is the output in the console when I click onto a protected URI the second time:

[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectStart app.module.ts:115:22
[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-common@4.0.1 : Info - in acquireToken call app.module.ts:115:22
[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-browser@2.11.2 : Info - BrowserCacheManager.cleanRequestByState: Removing temporary cache items for state: eyJpZCI6IjhkZDhmYWQ1LTc4NDktNGQwMC05Zjc5LWZhNjVmMGI0OWVhYSIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0= app.module.ts:115:22
[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:loginSuccess app.module.ts:115:22
[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectEnd app.module.ts:115:22
[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-angular@2.0.0-alpha.6 : Info - Interceptor - 1 scopes found for endpoint app.module.ts:115:22
[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:acquireTokenStart app.module.ts:115:22
[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:acquireTokenFromNetworkStart app.module.ts:115:22
[Thu, 18 Feb 2021 18:53:21 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:acquireTokenSuccess app.module.ts:115:22

I didn't know if you had altered the sample in any way.

It is identical to what I sent 😁

Flywheel commented 3 years ago

I'm using the b2c sample and the same error crops up after cancelling out of a b2clogin session. This issue may be related: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2149

jo-arroyo commented 3 years ago

@Asim-A We were unable to reproduce the error you experienced. However, the problem seems to be that the redirect is not being handled upon returning from login. If it is not handled correctly, and login is started again (pressing the button again), an interaction_in_progress error will occur. Here are some steps you can try to mitigate:

1) Upgrade to the latest version of msal-angular. You can do this by uninstalling msal-angular, and reinstalling by using npm install @azure/msal-angular@alpha 2) Import and bootstrap the MsalRedirectComponent from msal-angular. See the linked sample pages for details: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/5e816b065be44b8f7c5e216ec25b96bccd1a2031/samples/msal-angular-v2-samples/angular11-sample-app/src/app/app.module.ts#L101 3) Add to index.html. https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/04db417301936b0f2ad9d36f535d9c3e6b8dc75c/samples/msal-angular-v2-samples/angular11-sample-app/src/index.html#L14 4) Comment out or remove the handleRedirectObservable in the home.component.ts https://github.com/Azure-Samples/ms-identity-javascript-angular-spa-aspnetcore-webapi/blob/bce1b4313d0bc5b8aaa08f712fd8742df851434f/TodoListSPA/src/app/home/home.component.ts#L14

Please give this a try and let us know if you are still experiencing issues.

Asim-A commented 3 years ago

@jo-arroyo Thank you for your response, the steps were very clear 🤩. This resolved the login button issue I presented initally. However a new issue arose.

If I try to enter the a protected uri I get redirected to /login-failed, I guess that is expected behaviour, previously it would just attempt to log me in and it worked. (See Error 1 below). I can live with the redirection to /login-failed, but when I try to press login after the supposedly failed login attempt I get once again: 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. (See Error 2 for complete log below).

I also found that if I delete a particular entry in sessionStorage I am able to press login and login successfully: "msal.[AD_Client_Id].interaction.status": "interaction_in_progress".

Error 1

[Fri, 19 Feb 2021 07:34:14 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectStart app.module.ts:84:10
[Fri, 19 Feb 2021 07:34:14 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectStart app.module.ts:84:10
[Fri, 19 Feb 2021 07:34:14 GMT] :  : @azure/msal-browser@2.11.2 : Info - handleRedirectPromise did not detect a response hash as a result of a redirect. Cleaning temporary cache. app.module.ts:84:10
[Fri, 19 Feb 2021 07:34:14 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectEnd app.module.ts:84:10
[Fri, 19 Feb 2021 07:34:14 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:loginFailure app.module.ts:84:10
[Fri, 19 Feb 2021 07:34:14 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectEnd app.module.ts:84:10
[Fri, 19 Feb 2021 07:34:14 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:loginStart app.module.ts:84:10

Error 2

[Fri, 19 Feb 2021 07:39:42 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:loginStart app.module.ts:84:10
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:645:34
NavBarComponent_button_6_Template_button_click_0_listener@http://localhost:4200/main.js:592: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:592: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:676: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
    Angular 3
    step index.es.js:48
    __awaiter index.es.js:49
    ZoneAwarePromise Angular
    __awaiter index.es.js:45
    loginRedirect index.es.js:10802
    loginRedirect Angular
    login nav-bar.component.ts:75
    NavBarComponent_button_6_Template_button_click_0_listener nav-bar.component.html:5
    Angular 23
    NavBarComponent_button_6_Template nav-bar.component.html:5
    Angular 9
    NavBarComponent_Template nav-bar.component.html:5
    Angular 28

jo-arroyo commented 3 years ago

@Asim-A Are you able to turn on verbose logging? It would help if I could see the logs from the MsalGuard. You can turn it on by changing the logging from Info to Verbose here.

Asim-A commented 3 years ago

@jo-arroyo Yes, certainly 😁

So first when I navigate to the protected uri I get redirected to the login page. This comes up:

BSSO Telemetry: {"result":"Error","error":"bssoNotSupported","type":"TBAuthTelemetry","data":{"BSSO.info":"not-supported"},"traces":["BrowserSSO Initialized","window.navigator.msLaunchUri is not available for _pullBrowserSsoCookie"]}

After I login:


[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getAllAccounts called main.js:3456:13
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getRedirectResponseHash called main.js:3456:13
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Hash contains known properties, returning response hash main.js:3456:13
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - validateAndExtractStateFromHash called main.js:3456:13
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Returning state from hash main.js:3456:13
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - State extracted from hash main.js:3456:13
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Navigating to loginRequestUrl: http://localhost:4200/tenants/c003bdcc-c9e4-4ee4-9b74-acbe007d5c8d main.js:3456:13
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Event callback registered with id: 097829b7-cda0-4fce-a55c-cca5e495ef15 app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectStart app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Emitting event to callback 097829b7-cda0-4fce-a55c-cca5e495ef15: msal:handleRedirectStart app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - BroadcastService - msal:handleRedirectStart results in setting inProgress to handleRedirect app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - handleRedirectPromise called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getAllAccounts called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getRedirectResponseHash called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Hash does not contain known properties, returning cached hash app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - validateAndExtractStateFromHash called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Returning state from hash app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - State extracted from hash app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Current page is loginRequestUrl, handling hash app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - handleHash called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - initializeServerTelemetryManager called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-angular@2.0.0-alpha.6 : Verbose - Guard - canActivate app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-angular@2.0.0-alpha.6 : Verbose - MSAL Guard activated app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectStart app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Emitting event to callback 097829b7-cda0-4fce-a55c-cca5e495ef15: msal:handleRedirectStart app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - BroadcastService - msal:handleRedirectStart results in setting inProgress to handleRedirect app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - handleRedirectPromise called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getAllAccounts called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getRedirectResponseHash called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Hash does not contain known properties, returning cached hash app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Info - handleRedirectPromise did not detect a response hash as a result of a redirect. Cleaning temporary cache. app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectEnd app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Emitting event to callback 097829b7-cda0-4fce-a55c-cca5e495ef15: msal:handleRedirectEnd app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - BroadcastService - msal:handleRedirectEnd results in setting inProgress to none app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getAllAccounts called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:loginFailure app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Emitting event to callback 097829b7-cda0-4fce-a55c-cca5e495ef15: msal:loginFailure app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - BroadcastService - msal:loginFailure results in setting inProgress to none app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getAllAccounts called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:handleRedirectEnd app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Emitting event to callback 097829b7-cda0-4fce-a55c-cca5e495ef15: msal:handleRedirectEnd app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - BroadcastService - msal:handleRedirectEnd results in setting inProgress to none app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getAllAccounts called 2 app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-angular@2.0.0-alpha.6 : Verbose - Guard - no accounts retrieved, log in required to activate app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-angular@2.0.0-alpha.6 : Verbose - Guard - logging in by redirect app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-angular@2.0.0-alpha.6 : Verbose - Guard - getting destination url app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - loginRedirect called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - preflightBrowserEnvironmentCheck started app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - acquireTokenRedirect called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getAllAccounts called app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:loginStart app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Emitting event to callback 097829b7-cda0-4fce-a55c-cca5e495ef15: msal:loginStart app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - BroadcastService - msal:loginStart results in setting inProgress to login app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - preflightInteractiveRequest called, validating app environment app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-angular@2.0.0-alpha.6 : Verbose - Guard - error while logging in, unable to activate app.module.ts:84:10
[Fri, 19 Feb 2021 17:43:27 GMT] :  : @azure/msal-angular@2.0.0-alpha.6 : Verbose - Guard - loginFailedRoute set, redirecting app.module.ts:84:10
ERROR BrowserAuthError: no_cached_authority_error: No cached authority found.
    AuthError index.es.js:524
    BrowserAuthError index.es.js:7066
    createNoCachedAuthorityError index.es.js:7222
    handleHash index.es.js:9870
    step index.es.js:75
    verb index.es.js:56
    __awaiter index.es.js:49
    ZoneAwarePromise Angular
    __awaiter index.es.js:45
    handleHash index.es.js:9857
    handleRedirectResponse index.es.js:9772
    step index.es.js:75
    verb index.es.js:56
    __awaiter index.es.js:49
    ZoneAwarePromise Angular
    __awaiter index.es.js:45
    handleRedirectResponse index.es.js:9740
    handleRedirectPromise index.es.js:9699
    step index.es.js:75
    verb index.es.js:56
    __awaiter index.es.js:49
    ZoneAwarePromise Angular
    __awaiter index.es.js:45
    handleRedirectPromise index.es.js:9691
    Angular 26

At this point I am redirected to /login-failed. Which is weird because I have signed in properly using the correct ad domain account, correct username and password.

So next I try to login by pressing the login button, then the error arrises. I have to manually clear sessionStorage as I mentioned in my previous post.

[Fri, 19 Feb 2021 17:48:22 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - loginRedirect called app.module.ts:84:10
[Fri, 19 Feb 2021 17:48:22 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - preflightBrowserEnvironmentCheck started app.module.ts:84:10
[Fri, 19 Feb 2021 17:48:22 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - acquireTokenRedirect called app.module.ts:84:10
[Fri, 19 Feb 2021 17:48:22 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - getAllAccounts called app.module.ts:84:10
[Fri, 19 Feb 2021 17:48:22 GMT] :  : @azure/msal-browser@2.11.2 : Info - Emitting event: msal:loginStart app.module.ts:84:10
[Fri, 19 Feb 2021 17:48:22 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - Emitting event to callback 097829b7-cda0-4fce-a55c-cca5e495ef15: msal:loginStart app.module.ts:84:10
[Fri, 19 Feb 2021 17:48:22 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - BroadcastService - msal:loginStart results in setting inProgress to login app.module.ts:84:10
[Fri, 19 Feb 2021 17:48:22 GMT] :  : @azure/msal-browser@2.11.2 : Verbose - preflightInteractiveRequest called, validating app environment app.module.ts:84:10
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:653:34
NavBarComponent_button_6_Template_button_click_0_listener@http://localhost:4200/main.js:592: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:592: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:683: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
    Angular 3
    step index.es.js:48
    __awaiter index.es.js:49
    ZoneAwarePromise Angular
    __awaiter index.es.js:45
    loginRedirect index.es.js:10802
    loginRedirect Angular
    login nav-bar.component.ts:85
    NavBarComponent_button_6_Template_button_click_0_listener nav-bar.component.html:5
    Angular 23
    NavBarComponent_button_6_Template nav-bar.component.html:5
    Angular 9
    NavBarComponent_Template nav-bar.component.html:5
    Angular 28

jo-arroyo commented 3 years ago

@Asim-A Can you fork the repo you used, make the changes you made for your sample, and then share the forked repo with us with reproduction steps?

Asim-A commented 3 years ago

@jo-arroyo I can do this, but it might take some time. I have integrated the repo example into my company's webapp, so I would have to make a lot of changes to make it as close to my code as possible. Also this upcoming week is going to be very busy for me. Sorry for the inconvenience.

Meanwhile some questions:

Do you know or have any assumpions as to where the problem lies?
It's probably also not a backend problem?
Could a quick and temporary fix be to catch the BrowserAuthError exception and then clear sessionStorage?

Thank you for your effort :)

akshaybabloo commented 3 years ago

@jo-arroyo I have a similar issue as described by @Asim-A. My repo is open for now and its - ~https://github.com/akshaybabloo/rex-ui~. The only difference is that I have Angular material added to it and I am using v2+ policy i.e. acr is tfp.

And my error is:

core.js:6157 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.u8tD.BrowserAuthError.createInteractionInProgressError (index.es.js:7127)
    at PublicClientApplication.push.u8tD.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:1387)
    at __awaiter (index.es.js:45)
    at PublicClientApplication.push.u8tD.ClientApplication.acquireTokenRedirect (index.es.js:9898)
    at PublicClientApplication.<anonymous> (index.es.js:10805)
    at step (index.es.js:75)
    at Object.next (index.es.js:56)
    at index.es.js:49
    at resolvePromise (zone-evergreen.js:1213) [angular]
    at resolvePromise (zone-evergreen.js:1167) [angular]
    at :4200/polyfills.js:1215:17 [angular]
    at step (index.es.js:48) [angular]
    at :4200/vendor.js:95135:9 [angular]
    at new ZoneAwarePromise (zone-evergreen.js:1387) [angular]
    at __awaiter (index.es.js:45) [angular]
    at PublicClientApplication.push.u8tD.PublicClientApplication.loginRedirect (index.es.js:10802) [angular]
    at MsalService.loginRedirect (azure-msal-angular.js:55) [angular]
    at AppComponent.login (app.component.ts:130) [angular]
    at AppComponent_button_24_Template_button_click_0_listener (app.component.html:40) [angular]
    at executeListenerWithErrorHandling (core.js:15220) [angular]
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15255) [angular]
    at HTMLButtonElement.<anonymous> (platform-browser.js:582) [angular]

update:

Making the URL private.

akshaybabloo commented 3 years ago

@Asim-A would you be able to clear your cache and open a new window and test it. That actually fixed my problem 🤔

Asim-A commented 3 years ago

@akshaybabloo thanks for the suggestion. I've tried it in incognito mode, my problem still arises. However, have you tried the sequence I am having issue with? I.e.

Attempting to access a protected resource, you should be redirected to /login-failed or something.
Attempting to log in. If I log in straight away then there's no issue though. Also clearing "msal.[AD_Client_Id].interaction.status" in sessionStorage resolved the issue, but then I would have to add some ad hoc logic to check it?

akshaybabloo commented 3 years ago

Tell me if this is true because this is when I am getting errors:

when the token expires, say when I am on http://localhost:4200/secure-link, MSAL redirects to B2c for authentication. While this is happening a redirect, session is stored in the browser.
After authentication, MSAL angular checks this session and redirects to that URL (but sometimes it misses it and goes to main page)
I think at the redirect process it creates a session entry with value - interaction_in_progress.
When point 2 fails the interaction_in_progress is still in place in the session. When I delete this value, the application works fine.

@jo-arroyo there is an issue with session saving and clearing that seems to give this error. Now I get this error when I click on the login button.

You can manually get this error by doing the following steps:

Login into your app, goto a secured link - say http://localhost:4200/secure-link.
Open your developer tools, go to Application tab, in Local Storage, delete everything - all key-value (these are basically OAuth tokens)
Now refresh your pager, MSAL Angular should be able to detect that there are no keys, and this creates a session with URL to be redirected to once authorised and should redirect you to B2C login.
Once logged in, you will be taken back to your app. MSAL Angular should check the session for http://localhost:4200/secure-link and should try to redirect you.
When it's trying to redirect - it will create a new session of interaction_in_progress. The forwarding will fail and takes you to your home page.
When you try to login in you will get interaction_in_progress excepttion.

Screenshot

Unless I delete the session the app will not work.

jo-arroyo commented 3 years ago

@Asim-A

Do you know or have any assumpions as to where the problem lies?

Often this error is a result of improper usage, which is why we request logs and a sample app that reproduces the behavior. Calling login while an interaction is still in progress will always throw the error.

It is possible that the library is not clearing the message at the right time, but we haven't seen any indication of this. In this case, refreshing the browser would clear this message.

It's probably also not a backend problem?

It doesn't appear so.

Could a quick and temporary fix be to catch the BrowserAuthError exception and then clear sessionStorage?

We don't recommend this approach, as it can have other unintended side-effects.

jo-arroyo commented 3 years ago

@akshaybabloo What are you doing in the ngOnit of the page you have set as your redirectUri?

akshaybabloo commented 3 years ago

This is what I am doing @jo-arroyo

import {Component, OnInit} from '@angular/core';
import {MsalBroadcastService, MsalService} from '@azure/msal-angular';
import {EventMessage, EventType} from '@azure/msal-browser';
import {filter} from 'rxjs/operators';
import {Subscription} from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  private msalSub: Subscription | undefined;

  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) {
  }

  ngOnInit(): void {
    this.msalSub = this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
      )
      .subscribe({
        next: (result: EventMessage) => {
          if (result?.payload?.account) {
            this.authService.instance.setActiveAccount(result.payload.account);
          }
        },
        error: (error) => console.log(error)
      });
  }

}

Though the problem comes when the authentication takes place anywhere that's not the redirect URL

jo-arroyo commented 3 years ago

@akshaybabloo Are you only experiencing this when tokens have expired? If possible, can you send verbose logs as well as your configurations and app.component.ts? We have been unable to reproduce the behavior with your steps above.

akshaybabloo commented 3 years ago

@jo-arroyo I have changed the visibility of my repo - https://github.com/akshaybabloo/rex-ui. The secure URL is http://localhost:4200/client-auth. Could you follow the above steps in the repo, you should see the same error?

If you still can't reproduce it, I can screen record it later.

And no, I get this error when I sign out manually.

jo-arroyo commented 3 years ago

@akshaybabloo After trying out your app, there appears to be an problem with the hash in the url, which may be causing the redirects to not be resolved, and thereby throwing the interaction_in_progress error when you try to manually log in again. We are currently working on a fix that we think may help that problem (here), and can let you know when it is released.

In the meantime, we have identified two possible mitigations:

You can turn on hash routing in the app-routing.module.ts. The code would look as follows:
```
const isIframe = window !== window.parent && !window.opener;
```

@NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true, // Don't perform initial navigation in iframes initialNavigation: !isIframe ? 'enabled' : 'disabled' })], exports: [RouterModule] }) export class AppRoutingModule {}

2. You can remove the `MsalRedirectComponent` from being bootstrapped in _app.module.ts_, and then manually call `handleRedirectObservable()` in your HomeComponent's `ngOnInit()`:

```javascript
  ngOnInit(): void {
    this.authService.handleRedirectObservable();

    this.msalSub = this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
      )
      .subscribe({
        next: (result: EventMessage) => {
          if (result?.payload?.account) {
            this.authService.instance.setActiveAccount(result.payload.account);
          }
        },
        error: (error) => console.log(error)
      });
  }

Please give those a try and let us know if you continue to experience this error.

akshaybabloo commented 3 years ago

@jo-arroyo has #3072 merged into the current beta.0?

jo-arroyo commented 3 years ago

@akshaybabloo #3072 has been released with @azure/msal-browser@2.12.0, which was released last week. Please give it a try and let us know how it goes.

akshaybabloo commented 3 years ago

@jo-arroyo that fixed it. Thanks for your help.

github-actions[bot] commented 3 years ago

This issue has not seen activity in 14 days. If your issue has not been resolved please leave a comment to keep this open. It will be closed in 7 days if it remains stale.

noelmccrory commented 3 years ago

I spent a couple of days trying to resolve this particular error. I use hash based routing and followed the sample to include this in my routing:

  {
    // Needed for hash routing
    path: 'code',
    component: HomeComponent
  },

However, my HomeComponent makes an API call to a protected resource onInit, which was then triggering the MsalInterceptor and trying to kick off another authentication flow, thus resulting in the interaction_in_progress.

In order to resolve it, I updated the 'code' path to point to a dedicated LoginRedirectComponent which just contains a loading spinner, and everything is working fine now.

@jo-arroyo - I think it would be worth updating the docs to advise that the 'code' path should not point to a component that makes protected API calls on page load.

jo-arroyo commented 3 years ago

@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.

github-actions[bot] commented 3 years ago

This issue has not seen activity in 14 days. If your issue has not been resolved please leave a comment to keep this open. It will be closed in 7 days if it remains stale.

jasonnutter commented 3 years ago

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

AzureAD / microsoft-authentication-library-for-js