generating common access token for MS graph api and custom api

I have an Angular app and Python REST API server. I have created 2 Azure AD apps for authentication - one SPA Azure Ad app and another Webapi Azure AD app. I have exposed an API from Azure AD app api:///Files.Read. I am using msal v3.

The authentication works fine now I have to implement authorisation. Therefore, I have defined the roles in Webapi Azure AD app and in this app itself I am managing the assignment of the roles to the users. I want the role information in the Angular app to show role based views/screens/interfaces. For getting information of roles, I am relying on Microsoft graph API as I do not want to store and access the access token from local storage and session storage.

How can I generate an access token which can commonly be used for accessing roles from Graph API and my Python API server? Is it even possible to have a common access token? If yes, How should the configuration be done in the msal config such that the access token is generated for both the audiences - graph api and python api?

Note that: It is not possible to generate a single access token for different resource that is Microsoft Graph and the Web Api.

• One access token can have only one aud not two or more.
• The aud claim in an access token is specific to the API or resource the token is issued for.
• Hence to access Microsoft Graph and the Web Api, you need to generate two distinct/different access tokens.

Otherwise, as a workaround you can get the roles and scopes of the signed in user in one access token like below:

Created a Microsoft Entra ID application and exposed an API:

And created app role:

Assigned user to the role:

For sample generated access token by using below parameters:

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

client_id: ClientID
grant_type: authorization_code
scope: api://xxx/.default
redirect_uri: RedirectURL
code: code
client_secret: Secret

The access token will contain roles and scp claims: