MSAL Angular: How can I retrieve the user role from the JWT token?

Question

I realize there are similar questions, but none of them solved my problem. I have a ASP.net Core API with JWT bearer token authentication against Azure AD. Now I also have an Angular SPA using the MSAL library that retrieves data from this API. For authorization I use user groups that are registered with the app in Azure AD. This part works like a charm.

Within this user group I have different user roles which also are transmitted correctly in the Bearer token field in the header, so some parts of the API can only be accessed by users in this group having an Admin role. This also works perfectly.

Now on the Angular side I want to display some links to Admin users that are invisible to Users. These are the links retrieving data from the API part that only works for Admin users. To hide/show these links I need to know if the user is in the Admin group. When decoding the Bearer token from the header, it shows me the user groups and roles I have configured in the app manifest in the decoded token:

[...],
 "given_name": "JohnDoe",
  "groups": [
    "abcdef12-3456-7890-abcd-ef0123456789"
  ],
[...],
  "roles": [
    "MyAdminRole"
  ],
[...]

Now when I try to access the token from my Angular app, I get a list of all groups the user is in and absolutely no roles. In my component I use this line to access the token:

import { JwtHelperService } from '@auth0/angular-jwt';
import { MsalService } from '@azure/msal-angular';

constructor(private jwtHelper: JwtHelperService, private authService: MsalService, http: HttpClient, @Inject('BASE_URL') baseUrl: string)
  {
    let token: string = localStorage.getItem("msal.idtoken");
    console.log(this.jwtHelper.decodeToken(token));
  }

Now this is what is logged on the console (removed ids):

{aud: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", iss: "https://login.microsoftonline.com/8xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/v2.0", iat: 1590411759, nbf: 1590411759, exp: 1590415659, …}
aio: "xxxxxxxxxxxxxxxxxxxN"
aud: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
exp: 1590415659
groups: Array(5)
0: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
1: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
2: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
3: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
4: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
length: 5
__proto__: Array(0)
iat: 1590411759
iss: "https://login.microsoftonline.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/v2.0"
name: "John Doe"
nbf: 1590411759
nonce: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
oid: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
preferred_username: "[email protected]"
sub: "xxxxxxxxxxxxx"
tid: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
uti: "xxxxxxxxxxxxx"
ver: "2.0"

So this is my question: How do I get the group name which clearly is in the Request header's bearer token into Angular? And where does that other funny token come from which is not created the way laid out in the app manifest?

Please note: I am not using the user group to grant or block access in the front end, this is done on server side and works perfectly. It just is about visually hiding some Admin links from regular users to not confuse them. If a regular user would have access to these functions, they would not work as the API responds with a 401.

Do you have two app registrations for API and UI or one registration? — juunas
Well, I wrongly assumed it was one, in fact it was two. That solved the issue, thanks for pointing me in the right direction! — Aileron79

Aileron79 Aileron79 · Accepted Answer · 2020-05-26T06:19:00

I wrongly assumed that there was only one app registration for both, front end and API, in fact it was two. The token was not properly configured in the Azure app manifest of the front end application. Thanks juunas for pointing that out!

MSAL Angular: How can I retrieve the user role from the JWT token?

1 Answers