azure msal-brower with nextJs: passing only one scope to the API

I've got a SPA calling an API. The user authenticates using Azure AD and I'm exposing the API with a custom scope (access).

I report below the responses based on different scopes:

• scopes = ['access'] => Authorised. Scope in the passed token is: "access"
• scopes = ['user.read'] => Not authorised. Scope in the passed token is: "openid profile User.Read email"
• scopes = ['access', 'user.read'] => Authorised. Scope in the passed token is: "access"
• scopes = ['user.read', 'access'] => Not authorised. Scope in the passed token is: "openid profile User.Read email"
• scopes = ['profile', 'email', 'openid', 'access'] => Authorised. Scope in the passed token is: "access"

I don't think it's normal behaviour because I couldn't find any reference around it. What if I need, in the API, the info coming from the User.Read as well?

Dep version: "@azure/msal-browser": "^2.26.0"

I tried to reproduce the same in my environment and got the same results.

When I passed ['access', 'user.read'] ,I got token for only access scope like below:

Please check the aud (audience) claim of the token you are generating.

• If you are giving access as your scope, your aud will be api://your_app_id.
• If you are giving user.read as your scope, your aud will be 00000003-0000-0000-c000-000000000000 that means graph.microsoft.com.

If you are giving 2 different scopes like ['access', 'user.read'], it will only consider first scope and generate token for that specific audience like below:

As mentioned by Juunas in this SO Thread, access token is valid for one API only based on the audience.

If you want the info coming from the User.Read, you need to generate two tokens, one for your API scope (access) and another for Graph API scope (user.read).

For more in detail, please refer below link:

azure - Passing multiple scope values to Oauth token endpoint - by Hari Krishna