Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
BrowserAuthError: interaction_in_progress: Interaction is currently in progress.
See original GitHub issueCore Library
Core Library Version
2.14.0
Wrapper Library
Wrapper Library Version
2.0.0-beat-5
Description
While trying to do a query for https://graph.microsoft.com/v1.0/me on component init it throws “BrowserAuthError: interaction_in_progress: Interaction is currently in progress.” in redirect flow while pop-up flow works as expected without any problem.
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. 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 BrowserAuthError.AuthError [as constructor] (index.es.js:528) at new BrowserAuthError (index.es.js:7239) at Function.push.u8tD.BrowserAuthError.createInteractionInProgressError (index.es.js:7306) at PublicClientApplication.push.u8tD.ClientApplication.preflightInteractiveRequest (index.es.js:11077) at PublicClientApplication.<anonymous> (index.es.js:10316) 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 resolvePromise (zone-evergreen.js:1213) at new ZoneAwarePromise (zone-evergreen.js:1390) at __awaiter (index.es.js:45) at PublicClientApplication.push.u8tD.ClientApplication.acquireTokenRedirect (index.es.js:10301) at MsalService.acquireTokenRedirect (azure-msal-angular.js:42) at MsalInterceptor.acquireTokenInteractively (azure-msal-angular.js:351) at CatchSubscriber.selector (azure-msal-angular.js:324) at CatchSubscriber.error (catchError.js:27) at subscribeToPromise.js:8 at ZoneDelegate.invoke (zone-evergreen.js:372)
Msal Logs
No response
MSAL Configuration
import { MsalGuardConfiguration, MsalInterceptorConfiguration } from "@azure/msal-angular";
import { IPublicClientApplication, PublicClientApplication, BrowserCacheLocation, LogLevel, InteractionType } from "@azure/msal-browser";
export class MSALConfiguration {
// this is is only for IE11 support. In case we do not want to support IE we can remove this.
static isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
public static MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication({
auth: {
clientId: 'c0509186-e1f9-4bd4-a07a-c1a7b98b26eb', // Test application id
authority: 'https://login.microsoftonline.com/common',
redirectUri: 'https://localhost:8080/user'
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage,
storeAuthStateInCookie: this.isIE, // set to true for IE 11. Remove this line to use Angular Universal
},
system: {
loggerOptions: {
logLevel: LogLevel.Info,
piiLoggingEnabled: false
}
}
});
}
public static MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
return {
interactionType: InteractionType.Redirect,
protectedResourceMap
};
}
public static MSALGuardConfigFactory(): MsalGuardConfiguration {
return {
interactionType: InteractionType.Redirect,
authRequest: {
scopes: ['user.read']
},
loginFailedRoute: '/login-failed'
};
}
}
Relevant Code Snippets
"app.Module.ts"
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {
MsalBroadcastService,
MsalGuard,
MsalInterceptor,
MsalModule,
MsalRedirectComponent,
MsalService,
MSAL_GUARD_CONFIG,
MSAL_INSTANCE,
MSAL_INTERCEPTOR_CONFIG
} from '@azure/msal-angular';
import { UserInformationComponent } from './user-information/user-information.component';
import { ActivateLicenceComponent } from './activate-licence/activate-licence.component';
import { InvalidLoginComponent } from './invalid-login/invalid-login.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MSALConfiguration } from './Common/MSAL-Config';
@NgModule({
declarations: [
AppComponent,
UserInformationComponent,
ActivateLicenceComponent,
InvalidLoginComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
MsalModule,
HttpClientModule,
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
},
{
provide: MSAL_INSTANCE,
useFactory: MSALConfiguration.MSALInstanceFactory
},
{
provide: MSAL_GUARD_CONFIG,
useFactory: MSALConfiguration.MSALGuardConfigFactory
},
{
provide: MSAL_INTERCEPTOR_CONFIG,
useFactory: MSALConfiguration.MSALInterceptorConfigFactory
},
MsalService,
MsalGuard,
MsalBroadcastService
],
bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }
"user component"
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import Swal from 'sweetalert2';
const GRAPH_ENDPOINT = 'https://graph.microsoft.com/v1.0/me'; //
class ProfileType {
givenName?: string;
surname?: string;
mail?: string
userPrincipalName?: string;
id?: string;
}
@Component({
selector: 'app-user-information',
templateUrl: './user-information.component.html',
styleUrls: ['./user-information.component.css']
})
export class UserInformationComponent implements OnInit {
storeToken = '';
constructor(private http: HttpClient, private route: ActivatedRoute) { }
profile = new ProfileType();
isRequestInProgress = false;
ngOnInit(): void {
this.route.queryParams
.subscribe(params => {
console.warn(params); // token param
this.storeToken = params.token;
// console.warn(this.storeToken); // sample token value
}
);
this.getProfile();
}
getProfile() {
this.http.get<ProfileType>(GRAPH_ENDPOINT)
.subscribe(profile => {
this.profile = profile;
});
}
activateSubscription(): void {
this.isRequestInProgress = true;
const options = {
headers: new HttpHeaders().append('Content-Type', 'application/json'),
}
this.http.post("https://localhost:44386/api/Fulfilment/activate", JSON.stringify(this.storeToken), options).subscribe(
(data) => {
this.isRequestInProgress = false;
console.log(data);
if (data) {
Swal.fire({
icon: 'info',
title: 'Activated',
position: 'center',
heightAuto: false,
text: 'You subscription has been activated. You can now close this window',
})
}
},
(err) => {
this.isRequestInProgress = false;
console.log(err);
if (err instanceof HttpErrorResponse) {
if (typeof err.error === 'string') {
Swal.fire({
icon: 'error',
title: 'Not Activated',
position: 'center',
heightAuto: false,
text: err.error
})
}
else {
Swal.fire({
icon: 'error',
title: 'Not Activated',
position: 'center',
heightAuto: false,
text: 'Unable to activate subscription.'
});
}
}
}
)
}
}
Reproduction Steps
- Configure the app with the use of the setting provided in code snippet
Expected Behavior
BrowserAuthError: interaction_in_progress: Interaction is currently in progress. should be thrown and interceptor should handle it
Identity Provider
Azure AD / MSA
Browsers Affected (Select all that apply)
Chrome, Edge
Regression
No response
Source
External (Customer)
Issue Analytics
- State:
- Created 2 years ago
- Comments:6
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
as I had said in my pervious comment
this was the case. My apologies for the wasting your time. I will close this. Thanks a lot for your help and time on this.
@jo-arroyo Below is the log events from MSAL logs. This also has been created using the same Stackblitz
full-log-msal.log