Angular - MSAL user missing roles

Question

I have a backend application in entra id that has different roles - Role1 and Role2 for example. I also have a frontend app which has backend as API permission.

API:

APP:

When I use authentication on the frontend, the roles of the logged in user are not downloaded from the backend app. Which is a problem for me, because I don't want to have roles in two places and I can't because I'm working with id roles on the backend.

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
    const protectedResourceMap = new Map<string, Array<string>>();
    protectedResourceMap.set(environment.graphUrl + '/me/memberOf', ['user.read']);
    protectedResourceMap.set('user.read', [environment.scope]);
    return {
        interactionType: InteractionType.Redirect,
        protectedResourceMap,
    };
}

Is this somehow possible?

First token doesn't return any roles from the API application. (maybe is needed include scope but I don't know how)

First token:

The second token is for calling backend and there is adding scope for API application.

Answer 1

I created a Microsoft Entra Application (API) and exposed an API added authorized client application:

And created app roles:

In frontend application, I granted API permissions for the API application:

To get the roles in the token, make sure to assign roles to the user in the API enterprise application:

For a sample, I generated an access token via Postman:

https://login.microsoftonline.com/TenantID/oauth2/v2.0/token

client_id:APPClientID
grant_type:authorization_code
scope:api://APIClientID/.default 
code:code
redirect_uri:https://jwt.ms
client_secret:ClientSecret

When decoded, roles and scopes are present: