Get valid Access Token for custom scope from MS Entra for use as Bearer Token

Question

I'm having problems with retrieving an Access Token from Microsoft Entra for use with a Web API

Our basic scenario is a follows. We are developing a Nuxt.js front-end application which needs to communicate with an existing Hapi.js backend. The Nuxt frontend needs to attach a Bearer Token to requests so that the API server can authenticate calls using JWT/JWKS

I have set up a new Application Registration in Microsoft Entra and registered it with the Nuxt application using next-auth-utils and this is initially successful, with both a User and Access Token being returned once the Microsoft pop-up has been completed. However checking the Access Token against jwt.io the token has an Invalid Signature as well as a nonce entry.

Following some further investigation I have created a custom scope under Expose an api as api://<clientID>custom.read and added it under API Permissions. I have also removed the Graph entry that was listed under API Permissions.

Adding config: { scope: ['custom.read'] } to the nuxt-auth-utils setup presents a microsoft login pop-up with "We couldn't sign you in". The address being called is:

https://login.microsoftonline.com/<TENANT_ID>/oauth2/v2.0/authorize?client_id=<CLIENT_ID>&response_type=code&redirect_uri=http:%2F%2Flocalhost:3001%2Fauth%2Fmicrosoft&scope=custom.read&state

Changing the scope to either ['User.Read'] or ['.default'] returns the ability to log-in and return a token, however the token still contains the nonce

Answer 1

Hi @Dan Kelly,

Thank you for contacting Q&A Forum. I would like to provide my findings and proposed solution:

1. When you define a custom API, you need to specify the specific api path so that Entra ID could recognize the source of it.

In the address being called, "&scope=custom.read" is not a valid api as Entra ID would consider it as a scope under Microsoft Graph by default. You need to input the whole name as "&scope=api://<clientID>custom.read"

2. In access tokens, the "nonce" claim in the header is a random value emitted by Entra ID and it's not defined in the developer coding. Thus you don't need to match it to the values from your own side.

Kindly let me know if this work for you and please let me know if you have any further questions.

If I have answered your question, please accept this answer as a token of appreciation and don't forget to give a thumbs up for "Was it helpful"!

Best regards,
Eric

Answer 2

OK. Looks like it's confirmed that nuxt-auth-utils is authenticating against Graph.microsoft and I'll need to wire it up to MSAL in some way.

More information here