[FIXED] What is the best practice to give different results depending on users app role in an ASP.Net Core Application

Issue

I have a VueJS Frontend and an Asp.Net Core Backend.

The user authenticates through the VueJS MSAL library in the Frontend and gives the resulting bearer token to the Backend with each request. I also obtain ID Token and the ID Token claims.

In the backend the token is verified and the scope is checked.

Scope check:

static readonly string[] scopeRequiredByApi = new string[] { "access_as_user" };
internal void VerifyAccessAllowed()
{
    HttpContext.VerifyUserHasAnyAcceptedScope(scopeRequiredByApi);
}

Token verification:

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme).AddMicrosoftIdentityWebApi(builder.Configuration);

builder.Services.AddAuthorization();

var app = builder.Build();
app.UseAuthentication();
app.UseAuthorization();

Now I created "App Roles" and assigned the user. I get the app role as an ID Token claim.

App Roles in Azure Portal
Role from ID Token (jwt.io)

I now want to give the users different results from the backend depending on the role they are assigned to. Mainly that will be subsets of lists. A "CEO" sees the full list and a "PM" only an assigned subset.

As it seems right now, I don't have access to the ID Token claims in the Backend. I could just send the ID token in the header and try to decode it manually but that seems odd to me since everything else is working (almost) automatically.

I think there must be a clean and easy way to do this since this scenario is not very uncommon.

To me there are 2 possible options to do this:

1. Include role in Access Token
2. Send and decode ID Token with every request

Is any of this possible or is there another nice way to do this.

I hope I included all necessary information, if not please ask and I will provide :)

Thanks in advance, Paul!

Solution

I will answer this question in case someone else will come up with a similiar problem.

The problem with the approach I took was that I tried to authenticate frontend and backend with 2 app registrations. The access token provided by the frontend registration was also valid for the backend registration (through API permissions). By removing the frontend registration and directly requesting access through the backend registration, the backend got access to the role from the token which before it did not have. (I read some things about that and it seems that had something to do with the scope and that the roles were created for the frontend registration.)

Now with my solution I only use one app registration. That also leads to the frontend not being protected via Azure Portal, which I did manually.

I am not sure whether that is an optimal solution, but it worked out for my use case.

Answered By - P D

Answer Checked By - Mary Flores (PHPFixing Volunteer)