Msal Angular HTTP interceptor for localhost not attaching token

Question

I'm trying to call a localhost API and to attach the bearer token on the header. It should be done by msal-angular automatically. For now, I have added the localhost API route to the protectedResourceMap but there is no bearer token inside the header. Tried to add jsonplaceholder and graph.microsoft to make an HTTP post call to it and it works. The only issue is when I try to make an HTTP call to localhost API.

I'm using:

@azure/[email protected]
@azure/[email protected]

I have used factory providers for the interceptors in the app.module.ts.

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
   protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', [
     'user.read',
   ]);

  protectedResourceMap.set('http://localhost:5000/api/add', [
    'api://custom api consent'
  ]);

   protectedResourceMap.set('https://jsonplaceholder.typicode.com/', [
     'api://custom api consent'
   ]);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap,
  };
}

It is also registered in the app.module.ts

    providers: [
        {
          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,
        Msal,
        BroadcastService,
  ],

Any suggestion?

Answer 1

In case someone else is struggling with this kind of issue I found solution for this. What I found is that protectedResourceMap works more dynamically and the relative url will work. The issue was due to adding full route e.g http://localhost:4200/api/add etc.

The solution was just to add /api/

protectedResourceMap.set('/api/', [
    'api://custom api consent'
  ]);

Answer 2

We were struggling with @Bozhinvski's answer above; specifically what api://custom api consent meant.

This value needs to be aligned with the Application ID URI, which by convention is in the format of api://<Application (client) ID> where the Application (client) ID is usually the GUID generated for you by Azure. However this is not a hard requirement (but is the default when generated and what is recommended). This can be controlled in the Azure Active Directory Portal under the Application Registration Page -> Expose an API and can be changed if you wish: