Azure AD Msal Interceptor Access Token

Question

I'm using azure MSAL to authenticate my API but problem is that I'm using DevExtreme custom store for server side pagination.

Msal Interceptor works and genrate token auto for HttpClient but in this case I'm not sending request via http.

If I'm using access token that I get after login then error occur Invalid signature and if If used IdToken then 401 how I can solve this problem.

MSALInterceptorConfigFactory:

protectedResourceMap.set('https://localhost:44379/api/approveMilestones', ['api://cb343c76-cd5b-4af6-8229-014b2522adab/access_as_user']);

Login Response where I'm getting accessToken and IdToken

this.authService.loginPopup()
  .subscribe((response: AuthenticationResult) => {
    AuthenticationHelper.setToken(response.accessToken);
    this.router.navigate(['/payments-approval']);
  });

I'm getting accessToken and IdTOken both in result but these are not working if i send them with request for Bearer

If you check the access token at https://jwt.ms, what is the "aud" (audience) value? — juunas, Nov 17 '21 at 06:55
Ok, that sounds correct. How is your back-end authentication configured? — juunas, Nov 17 '21 at 09:53
Backend authentication is good and i tested it but problem is that I'm not dealing with http request for some API's. — Amir Sohail, Nov 17 '21 at 10:15
Is there any way in angular that we may get bearer token from browser ? — Amir Sohail, Nov 17 '21 at 10:15

score -1 · Answer 1 · answered Nov 19 '21 at 17:08

While sending the request to the server the scopes are empty when going the cross-domain. You can create your own interceptor from small-angular and then you can inject the code in development mode.

First store the token in the localStorage:

localStorage.setItem ('token', result.token);

While sending the request to the server get the token from the browser

const token = localStorage.getItem (‘token'); and send the token with the request like this.

Azure AD Msal Interceptor Access Token

1 Answers1