Roles undefined in idTokenClaims but exist in token

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.22.1

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.3.1

Description

idTokenClaims.roles returns undefined. The claims I get are: aud, exp, iat, iss, name, nbf, nonce, oid, preferred_username, rh, sub, tid, uti, ver … but no roles. When I print the token from msalInstance.acquireTokenSilent and decode it on https://jwt.ms/ I can see the roles I assigned to the account.

MSAL Configuration

export const msalConfig: Configuration = {
  auth: {
    clientId: process.env.REACT_APP_MSAL_CLIENT_ID || "",
    authority: process.env.REACT_APP_MSAL_AUTHORITY,
    redirectUri: process.env.REACT_APP_MSAL_REDIRECT_URL,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
};

Relevant Code Snippets

const { accounts, inProgress } = useMsal();
let roles = accounts[0].idTokenClaims.roles; // <-- returns undefined

### Identity Provider

Azure AD / MSA

### Source

External (Customer)

[svrooij]

@NidalGhonaim and if you don’t want to replicate the roles in the client app. You can use the client id of the api in the client app, but I’m not sure what the official policy on that is.

[derisen]

@NidalGhonaim the resource server (API) should decode and validate the access token, so that’s fine. If you need to adjust the UI based on user’s role then duplicating roles on the client app registration also makes sense (here’s an example doing that).