Search code examples
azure-active-directory

Adding custom claims to access token issued by Azure ad


im building an web application with next.js i configured its authentication with auth.js with azure ad provider. now im getting accesstoken from there, and i want to pretect with that token my backend asp.net web api, but to do this i need to have custom claims in that token, about department, jobtitle, companyName from azure active directory. So from here is a deep forest of azure portal where i cant understand how to configure my azure ad app with that custom claims.

Some tutorials i used was near the thing what i need but i faced some error in next js:

error_description: 'AADSTS50146: This application is required to be configured with an application-specific signing key

what i just did to the app i went to enterprise application > Single sign-on > Attributes & Claims > Edit > (added user.companyname, user.department, user.jobtitle)

after that my program stopped with that error.

now im looking for solution to make it work and to have those attributes encoded in that jwt access-token

i also did i app registration in Manage: Manifest

"acceptMappedClaims": true,

but that step of application-specifi signing key i dont understand a thing what is it used for how to create it or add this to make it work. any suggestions? or any guides that explain things in human readable language


Solution

  • Initially, I too got same error when I ran the application without setting "acceptMappedClaims": true, property in Manifest:

    enter image description here

    The error still occurs if you changed the setting in Next JS web application but missed changing in Web API app registration.

    To resolve the error, make sure to change below properties in Manifest tab of both app registrations like this:

    {
        "acceptMappedClaims": true,
        "accessTokenAcceptedVersion": 2,
    }
    

    NextJSApp:

    enter image description here

    Web API:

    enter image description here

    As you are generating token with Exposed API scope, make sure to add claims in Web API application like this:

    Go to Microsoft Entra ID -> Enterprise Applications -> Select Web API app -> Single sign-on -> Attributes & Claims -> Edit -> Add Claims

    enter image description here

    In NextJSApp application, make sure to add Web API permission and grant admin consent to it:

    enter image description here

    Now, I ran the web application again and got tokens in the console like this:

    enter image description here

    When I decoded this access token in jwt.ms website, I got the custom claims named companyName, jobtitle and department successfully like this:

    enter image description here