Is there any way to use one AzureAD app for both frontend and backend

Question

I have react front-end app and AWS lambda backend. I already integrated AzureAD authentication to my react app using MSAL. I wanted to clarify a couple of things

• after the user logs In to the front end i want to call one of my backend APIs and call the azure graph api via my backend service. for the backend azure interaction, I had to create another app in the azure ad. my question is can i use my frontend access token to call the azure graph api since my front-end access token belongs to a different app in the azure Ad? if not what would be the suggested way to do this kind of flow?

• is there any way to add the user role like admin, manager, user to the active directory and retrieve that role when the user logs in. my requirement is once a user logs in I need to display certain features to my front-end app based on roles. I have seen that there are things called scope but couldn't figure out if it satisfies my requirement.

Answer 1

I tried to reproduce the same in my environment and got the results like below:

You have to create two Azure AD applications for authentication.

I created Azure AD ServerApp and exposed an API like below:

Is there any way to add the user role like admin, manager, user to the active directory and retrieve that role when the user logs in.

And in the ServerApp, I created App roles:

Now, in the ClientApp, I added API permissions like below:

Now, I generated access token via Client Credentials Flow by using below parameters:

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

client_id:ClientID
client_secret:ClientSecret
scope:api://SeverAppID/.default
grant_type:client_credentials

When I decoded the token, the App Roles are displayed successfully like below: