Getting a Microsoft Access Token for a custom scope
Quick bit of background. We are currently running a Vue 2 frontend which communicates with a Hapi.js backend. Authentication is via Microsoft Azure.
I am investigating migrating the front-end to Next whilst keeping (for the moment) the Hapi.js backend
I am having problems getting an Access Token from Microsoft that can be authenticated by the backend (or JWT.io)
If I register a new Application in Microsoft Entra and enter the details into a simple Nuxt Application running
nuxt-auth-utils then I can receive a User and token that shows the correct user details for the selected user. However the supplied access_token has a nonce and does not validate on jwt.io.
The solution I can find is to register and expose an api in Entra. However as soon as I do that and add the scope block to my Nuxt Application I become unable to Authenticate with Microsoft.
scope: ['.default'] and scope: ['User.read'] both allow me to log in. It's only when I change the scope to scope: ['Custom.Read] (as registered on Entra) I get a failure.
I assume that I am missing somehing in the MS registration, rather than the nuxt-auth-utils4 Replies
Hi @dankell.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources provided do not contain specific information about configuring Microsoft Entra (Azure AD) application registration, exposing custom API scopes, or troubleshooting issues with acquiring access tokens for custom scopes in the context of Nuxt or the nuxt-auth-utils module. The available documentation for nuxt-auth-utils does mention support for OAuth providers and using access tokens, but it does not cover the detailed Microsoft Entra setup or the handling of custom scopes and their validation on jwt.io.
Based on the sources, your Nuxt app can use nuxt-auth-utils to handle authentication and session management, and it supports multiple OAuth providers, including Microsoft. However, the issue you're facing—where access tokens for custom scopes are not being issued or validated—appears to be related to the Microsoft Entra (Azure AD) configuration rather than Nuxt or nuxt-auth-utils itself. The documentation does not provide guidance on the Microsoft-side setup for custom scopes or troubleshooting token validation issues for those scopes in this context.
If you need more information on how to configure Microsoft Entra for custom API scopes and ensure your Nuxt app can request and receive valid access tokens for those scopes, you may need to consult Microsoft's official documentation or support channels.
For more on session and authentication setup in Nuxt, you can refer to the Sessions and Authentication recipe, but it does not address Microsoft Entra custom scope issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@602890303753682944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I now have the flow that I need working. I thought I'd pop the solution here for anyone who searches later.
The core issue is that
nuxt-auth-utils gets it's token directly from MS Graph, which doesn't provide an Access Token for other scopes.
The answer is to register a custom scope on MS entra, then use pass the MS Graph token to an MSAL call to the custom scope.
The solution is buried in an old issue on the nuxt-auth-utils GitHub page here
Microsoft OAuth Question about Access Token.GitHub
Microsoft OAuth Question about Access Token · Issue #67 · atinux/...
@jfrelik ; thanks for the Microsoft provider. Works great to authenticate against MS Graph. How do you use it to authenticate against your own API Application? I am stuck, as when I add the access_...