I'm upgrading my Angular 10 project with Active Directory Authentication (MSAL) from v1 to v2.
The configuration seems to be correct since I can log in without any problems.
BUT, when I'm logged in, I should be redirected to a specific page (here localhost:4200/admin), that's the case but there is a lot of parameters added in the URI, like "code" (?), "client_info", "state" and "session_state". (I can't give you the exact link because of the confidentiality of the content).
At this state when I just logged in, I'm redirected to this weird link, and Angular redirect me after to the home page, but if I'm already logged in, I'm redirected to the weird link, and after I'm redirected to localhost:4200/admin without all those parameters.
Did somebody have an explanation for that (and obviously a solution)?
Let me know if you need some code to help understanding.
Here is my app.module.ts :
const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
export function loggerCallback(logLevel: LogLevel, message: string): void {
console.log(message);
}
export function loadSettings(AppInitializerService: AppInitializerService): any {
return () => AppInitializerService.loadSettings();
}
registerLocaleData(localeFr, 'fr-FR');
export function MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication({
auth: {
clientId: AppConfig.appSettings.authentication.clientId, //clientID from app registration
authority: 'https://login.microsoftonline.com/' + AppConfig.appSettings.authentication.tenantName, //tenant name from my organisation
redirectUri: 'http://localhost:4200/admin',
postLogoutRedirectUri: AppConfig.appSettings.authentication.loginRedirectUrl //http://localhost:4200
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage,
storeAuthStateInCookie: isIE
},
system: {
loggerOptions: {
loggerCallback,
logLevel: LogLevel.Info,
piiLoggingEnabled: false
}
}
});
}
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = AppConfig.appSettings.authentication.protectedRessourceMap; //["http://localhost:4200/admin/**", ["api://SomeCoolId/Api"]]
return {
interactionType: InteractionType.Redirect,
protectedResourceMap
};
}
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
return {
interactionType: InteractionType.Redirect,
authRequest: {
scopes: ['user.read']
}
};
}
@NgModule({
declarations: [AppComponent, DialogComponent, RecapitulatifComponent, ErrorComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
MDBBootstrapModule.forRoot(),
LayoutCandidateModule,
LayoutAdminModule,
JobBoardsModule,
SharedModule,
NotionsModule,
SkillsCentersModule,
MsalModule
],
exports: [],
providers: [
AppInitializerService,
NotificationService,
SpinnerService,
{
provide: APP_INITIALIZER,
useFactory: loadSettings,
deps: [AppInitializerService],
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
},
{
provide: MSAL_INSTANCE,
useFactory: MSALInstanceFactory
},
{
provide: MSAL_GUARD_CONFIG,
useFactory: MSALGuardConfigFactory
},
{
provide: MSAL_INTERCEPTOR_CONFIG,
useFactory: MSALInterceptorConfigFactory
},
MsalService,
MsalGuard,
MsalBroadcastService
],
bootstrap: [AppComponent, MsalRedirectComponent],
entryComponents: [DialogComponent, RecapitulatifComponent]
})
export class AppModule {}
and here is my admin.routing.module.ts
const routes: Routes = [
{
path: '',
component: AdminComponent,
canActivate: [MsalGuard]
},
{
path: 'candidates',
children: [
{
path: '',
component: CandidatesComponent,
resolve: {
candidates: GetAllCandidatesResolver
}
},
{
path: ':id',
children: [
{
path: '',
component: CandidateComponent,
resolve: {
candidate: GetCandidateResolver,
interlocutors: GetAllInterlocutorsResolver
}
},
{
path: 'recap-questions',
component: RecapQuestionsComponent,
resolve: {
testThemes: GestTestThemesByCandidateResolver
}
}
]
}
]
},
{
path: 'interlocutors',
children: [
{
path: '',
component: InterlocutorsComponent,
resolve: {
interlocutors: GetAllInterlocutorsResolver
}
},
{
path: ':id',
children: [
{
path: '',
component: InterlocutorComponent,
resolve: {
interlocutor: GetInterlocutorResolver,
notions: GetAllNotionsResolver,
businessPoles: GetAllBusinessPolesResolver
}
}
]
}
]
},
{
path: 'create-interlocutor',
children: [
{
path: '',
component: CreateInterlocutorComponent,
resolve: {
notions: GetAllNotionsResolver,
businessPoles: GetAllBusinessPolesResolver
}
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AdminRoutingModule {}
Update : This bug occures only in Firefox. With Chrome no problem