I am trying to create a frontend SPA with Angular, using msal-angular and a backend REST API with Nodejs Express. The backend has secured endpoints, and I want it to check the access token for both Role (App roles) and Scope.

I registered both the frontend and the backend, and created App roles (e.g. Admin, User, Moderator) for both. I also exposed API scopes with the same name for both (e.g. User.Create, User.Delete), thinking that there was something wrong with my configuration.

The problem is that the access token generated upon login doesn’t contain any of the ‘My API’ scopes that I specifically added as permissions. It only contains the scopes related to Microsoft Graph API.

App permissions in my frontend app registration

scopes in JWT access token

Basically, what I want is to have different roles within my app registration, and each role should have a customizable (only by higher-privileged users) set of scopes (or permissions) that grants them access to protected resources in my backend API.

I also thought of creating multiple roles like “AdminCreateUser”, and only checking the role(s) from the token in the backend, but the project I’m working on requires that there are a set of predetermined roles with specific rights/permissions, that rights can be modified (true/false), and that new roles with specific permissions can be created.

Is this possible using Entra ID and App registrations? I have spent the last 2 days trying to figure this out, and I couldn’t find anything that mentions my problem.

There is also the possibility that I don’t quite understand the purpose of scopes, and I am thinking of using them in the wrong way/for the wrong purpose. I am quite new with Entra ID and Azure in general, and sometimes their naming conventions are very confusing.

If needed, I can also share my app.module.ts file, where I set up the MSALGuard and MSALInterceptor, but I doubt that those will be of much help. Thank you!