1

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

Ferenc
  • 39
  • 7
  • 1
    we can't do anything without a code block, rather than asking here you can ask in the angular forum support. – Aman Sharma Jan 27 '22 at 09:20
  • @AmanSharma I just added some code, tell me if you need more! I'll get a look to the angular forum, thank you for your advice – Ferenc Jan 27 '22 at 09:54

0 Answers0