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/msal-browser@2.12.0
@azure/msal-angular@2.0.0-beta.0

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 suggestions?

Bozhinovski · Accepted Answer · 2023-01-07T09:11:02.897

16

If you're having trouble with a similar issue, I found a solution that may help. It turns out that using the protectedResourceMap function more dynamically and providing a relative URL works better. The problem was caused by using the full route, including the domain name and port number, such as "http://localhost:4200/api/add". The solution was simply to add "/api/" to the protectedResourceMap like this:

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

edited Jan 07 '23 at 09:11

answered Mar 10 '21 at 08:27

Bozhinovski

2,496
3
20
38

What is `custom api consent`? Can you share an example? – Bigeyes Aug 20 '21 at 01:20
1

It is ability to provide scope for the user, example new Map([ ['Enter_the_Graph_Endpoint_Here/v1.0/me', ['user.read']] ]). Please read this documentation: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular-auth-code – Bozhinovski Aug 20 '21 at 16:00
If user can see the token from the request header, is it safe? – Bigeyes Aug 21 '21 at 14:53
1

Thanks for this, I was struggling with this for a couple of days and this answer helped me. – Matt G Jun 24 '22 at 07:04

score 2 · Answer 2 · answered Jun 21 '22 at 14:09

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:

MSAL Angular HTTP interceptor for localhost not attaching token

2 Answers2