Roles for a SPA and API setup in Microsoft Intra ID

I have setup a FastAPI with FastAPI-Azure-Auth. It is a API and a Swagger page (SPA) to test the API. I have an app registration for the API and one for the Swagger page. On the API app registration I added a role named "Role7" on my user.

On the swagger page app reg I added a "Role1" to my user.

Swagger page APP reg:

I added permission to the API app reg.

By problem is in the claims i get in the Swagger page I get "Role7" which is from the API app reg. And I would expect to get the roles I have setup in Swagger page app reg. How do I setup the appregs so it will be the web page and not the API that controls access and roles?

The API must be the one that decides what roles the token can contain. It is after all the one authorizing the tokens.

So you have two options (at least):

1. Make one app registration instead of two, Swagger UI is just part of the API. Now role management is on this one app registration.
2. Stay with two app registrations. Roles must be assigned on the API to apply there. Client could check what roles the user has from the API.

If you have P1/P2 licenses, you can make option 2 easier by assigning a group to the same role on both the app registrations. Then you have one place where you can edit the members of that role.