Get MSAL Interceptor Configuration from API


For a Static Web App (SPA) I have configured one endpoint /api/settings. This endpoint does not require authentication and returns a list of other endpoints that are needed in the application. Now the problem is, these endpoints returned by /api/settings do require authentication.

In the code bellow, I need to configure protectedResourceMap with the response of /api/settings. I tried to build a factory for the MSAL_INTERCEPTOR_CONFIG provider, but I think it doesn’t work because it ends up in a circular dependency.

Does anyone have a solution to create the protectedResourceMap from the API response? Another appoach would be to manually append the token when requesting the endpoints, but I couldn’t find a way to do that either.

  declarations: [
    // ...
  imports: [
    // ...
      new PublicClientApplication({
        auth: {
          clientId: environment.msalClientId,
          authority: environment.msalAuthority,
          redirectUri: '/',
        cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
        interactionType: InteractionType.Redirect, // MSAL Guard Configuration
        authRequest: {
          scopes: [environment.msalClientId + '/.default'],
        interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
        protectedResourceMap: new Map<string, string[]>(),
  providers: [
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
  bootstrap: [AppComponent, MsalRedirectComponent],
export class AppModule {}

Source: Angular Questions

Categorized as angular, msal, msal-angular Tagged , ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us