HTTP interceptor for localhost api

[SETI-At-Home]

Source

• [x] Customer request

Library

• [x] @azure/msal-browser@2.12.0
• [x] @azure/msal-angular@2.0.0-beta.0

Framework

• [x] Angular

Description

I'm trying to call an localhost API and to attach bearer token on the header. 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 to make an http post call to it and it works. The only issue is when I try to make http call to localhost api.

protectedResourceMap.set('http://localhost:5000/add/',  ['user.read']);

Error Message

No error, just no bearer token in the header section

MSAL Configuration

I'm using AD for authentication.

Reproduction steps

The URL is registered in the MsalInterceptorConfiguration:

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

localhost:5000 is registered in Redirect URIs of Azure portal

I'm using MsalInterceptor which is registered in the app.module.ts provider array.

Expected behavior

To have bearer token in the header section

Identity Provider

• [x] Azure AD

Browsers/Environment

• [x] Chrome

Regression

• [x] Did this behavior work before? Version: NaN

Security

• [x] Is this issue security related?

Source

• [x] Customer request

[jo-arroyo]

@VladBozhinovski It looks like you might be adding an extra array when setting your protected resource map. Please see our configuration doc or a sample for an example of how to set it.

[nicholashendrickx-tomtom]

I have the same issue. I'm doing what the @azure/msal-angular docs say, but no luck:

protectedResourceMap: [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']],         // <-- this has the auth headers
  ['https://api.myapplication.com/users/*', ['customscope.read']] // <-- this does *not* have the auth headers
]

I am using @azure/msal-angular@2.0.0-alpha.5

[SETI-At-Home]

@jo-arroyo I have checked many times and it seems like everything on the code side is fine. Please correct me if I'm wrong.

Please see the picture:

When I console.log the protectedResourceMap I'm getting: Pretty much as @nicholashendrickx-tomtom said. It works for jsonplaceholder and for graph.microsoft but not for localhost/api

[SETI-At-Home]

@jo-arroyo Any suggestion?

[jo-arroyo]

@VladBozhinovski Can you try using /add/ or add/ in your protectedResourceMap? Sometimes the relative url will work. We are looking into ways to more gracefully handle that scenario.

[SETI-At-Home]

@jo-arroyo This worked like a charm. Will give a try when app is hosted and let you know if everything works so we can close this issue. Thank you @jo-arroyo

[jo-arroyo]

@nicholashendrickx-tomtom It looks like you may be referencing the @azure/msal-angular@1 docs. Please see our updated initialization and configuration docs for the new shape of the protectedResourceMap, as well as the upgrade guide for more information about protected resources in MSAL Angular v2.

[nicholashendrickx-tomtom]

@VladBozhinovski can you please share how you got it to work?

I have a proxy on my dev server from localhost:4200/api to localhost:8080/api but I can't get the protectedResourceMap to work. I want to add the ['customscope.read'] scope to the my api requests, e.g. protectedResourceMap.set("http://localhost:8080/api/*", ['customscope.read']);

The following keys in the map do not add a bearer token to my requests:

http://localhost:8080/api/*
http://localhost:4200/api/*

The following keys fail with BrowserAuthError: interaction_in_progress as a result of a 400 bad request to https://login.microsoftonline.com/<UUID>/oauth2/v2.0/token and redirect to an "error" page:

 api/*
/api/*
 api
 api/
/api
/api/

For the record, when I replace customscope.read with e.g. user.read I do see a bearer token, but it's not what the backend expects/

[nicholashendrickx-tomtom]

For the record, when I replace customscope.read with e.g. user.read then it does add the authentication header to my requests. But I need customscope.read and when I add that there are no headers added anymore.

[SETI-At-Home]

@nicholashendrickx-tomtom what I have used is protectedResourceMap.set("/api/", ['customscope.read']);

This one worked for me since it can be for example localhost/api or somewebsite/api it doesn't matter. I hope this will work for you.

Let me know if this works for you. Happy coding

[nicholashendrickx-tomtom]

Thanks @VladBozhinovski, it seems to do something, I guess I need to figure out why customscope.read fails. It says it doesn't know this scope. I'm pretty sure it worked with v1 of msal-angular, but we were using implicit grant back then.

EDIT: I've created a custom scope and changed customscope.read to <client-id>/customscope.read and it seems to work now.

[SETI-At-Home]

@nicholashendrickx-tomtom that's good to hear that it helped buddy :)