Need help on getting idtoken user_metadata with react-auth0-sdk

Help
,
1

Hi there,

I attached some user metadata on an Auth0 action on Login, and I can see them correctly attached on Auth0 dashboard. Here’s how it appears there:

{
  "sub": "auth0|6237476d0f4b920069241ec6",
  "nickname": "admin",
  "name": "admin@example.com",
  "picture": "https://s.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fad.png",
  "updated_at": "2022-03-28T23:10:02.568Z",
  "https://dev-r3pn41if:us:auth0:com/organization": null,
  "https://dev-r3pn41if:us:auth0:com/position": null,
  "https://dev-r3pn41if:us:auth0:com/phone_number": null,
  "https://dev-r3pn41if:us:auth0:com/dummy": "dummyvalue"
}

But when I access user property from react sdk, I get only the stardard attributes (user_metadata and app_metadata does not appear).

Here’s how I get user property:


const { user, getAccessTokenSilently, logout } = this.props.auth0;
console.log(user);  // displays only 'standard' attibutes

My question is: how I get user_metadata with react-auth0-sdk?

3

Hi @dudumonteiro,

Thanks for reaching out to the Auth0 Community!

Once you have attached the user_metadata to the ID Token using an Auth0 Post Login Action, you can use the useAuth0 hook to call the getIdTokenClaims method to retrieve the custom claims.

For clarity, your Post Login Action script should look something like the following:

/**
 * @param {Event} event - Details about the user and the context in which they are logging in.
 * @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.
 */
exports.onExecutePostLogin = async (event, api) => {
  const namespace = 'https://my-app.example.com';
  if (event.authorization) {
    api.idToken.setCustomClaim(`${namespace}/user_metadata.fav_color`, event.user.user_metadata.fav_color); 
  }
}

Lastly, you may find the https://auth0.github.io/auth0-react/modules/use_auth0.html reference useful.

Please let me know if there’s anything else I can do to help.

Thank you.

1 Like
4

Hi @rueben.tiow !

Thank you for reply.

Unfortunately I’m still getting only standard attributes.
I did your tip on login action and using getIdTokenClaims.

My login action:

exports.onExecutePostLogin = async (event, api) => {
  const namespace = 'https://dev-r3pn41if.us.auth0.com';
  const { organization, position, phone_number } = event.user.user_metadata;

  if (event.authorization) {
    // Set claims 
    api.idToken.setCustomClaim(`${namespace}/user_metadata.organization`, organization);
    api.idToken.setCustomClaim(`${namespace}/user_metadata.position`, position);
    api.idToken.setCustomClaim(`${namespace}/user_metadata.phone_number`, phone_number);
    api.idToken.setCustomClaim(`${namespace}/user_metadata.dummy`, 'dummyvalue');
  }
};

My app:

        // ...
        const { user, getAccessTokenSilently, getIdTokenClaims,logout } = this.props.auth0;
        let claims = await getIdTokenClaims();    
        console.log(claims);   // displays only  standard attributes

Here is what I get from auth0 dashboard:

{
  "sub": "auth0|6237476d0f4b920069241ec6",
  "nickname": "admin",
  "name": "admin@example.com",
  "picture": "https://s.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fad.png",
  "updated_at": "2022-03-31T12:56:32.246Z",
  "https://dev-r3pn41if:us:auth0:com/user_metadata:organization": "turtle",
  "https://dev-r3pn41if:us:auth0:com/user_metadata:position": "biologist",
  "https://dev-r3pn41if:us:auth0:com/user_metadata:phone_number": "1000-1000",
  "https://dev-r3pn41if:us:auth0:com/user_metadata:dummy": "dummyvalue"
}

Here is what I get from console.log display:

aud: "gAkDn9TJlEmDqsc62MYdCiNc2tVP0qLp"
email: "admin@example.com"
email_verified: false
exp: 1648765861
iat: 1648729861
iss: "https://dev-r3pn41if.us.auth0.com/"
name: "admin@example.com"
nickname: "admin"
nonce: "Mlc1OXVHTlFVZ1ExQjNxSWx2UmZySUh6MVJ0bW9sWmFYMklDeWRiR293TQ=="
picture: "https://s.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fad.png"
sub: "auth0|6237476d0f4b920069241ec6"
updated_at: "2022-03-31T12:22:23.277Z"
__raw: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImswVnVUMHRodmtYbG9yT25Eb0JuZiJ9.eyJuaWNrbmFtZSI6ImFkbWluIiwibmFtZSI6ImFkbWluQGV4YW1wbGUuY29tIiwicGljdHVyZSI6Imh0dHBzOi8vcy5ncmF2YXRhci5jb20vYXZhdGFyL2U2NGM3ZDg5ZjI2YmQxOTcyZWZhODU0ZDEzZDdkZDYxP3M9NDgwJnI9cGcmZD1odHRwcyUzQSUyRiUyRmNkbi5hdXRoMC5jb20lMkZhdmF0YXJzJTJGYWQucG5nIiwidXBkYXRlZF9hdCI6IjIwMjItMDMtMzFUMTI6MjI6MjMuMjc3WiIsImVtYWlsIjoiYWRtaW5AZXhhbXBsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImlzcyI6Imh0dHBzOi8vZGV2LXIzcG40MWlmLnVzLmF1dGgwLmNvbS8iLCJzdWIiOiJhdXRoMHw2MjM3NDc2ZDBmNGI5MjAwNjkyNDFlYzYiLCJhdWQiOiJnQWtEbjlUSmxFbURxc2M2Mk1ZZENpTmMydFZQMHFMcCIsImlhdCI6MTY0ODcyOTg2MSwiZXhwIjoxNjQ4NzY1ODYxLCJub25jZSI6Ik1sYzFPWFZIVGxGVloxRXhRak54U1d4MlVtWnlTVWg2TVZKMGJXOXNXbUZZTWtsRGVXUmlSMjkzVFE9PSJ9.FfHijwgVuKXonQRqw_X91w_-eygKHTNQlBmv5bWaI8fy2RIwQTMQUnmhq5qaCOAtNt7keqs76xbkoDuhCGlHVnTAFMVfnQLPjG7-gC8jM1sr_zfHDgKjS4bDLGsgsriZkhBuRg9IpTlAbuk0ZXPR4QqBOeRJuSXl3wHSovoM0R8gS2cXZbo7y2AYfmkWPwWb8qkux7RnmZkAXxoygViS3ED52iv_5h_yyLIRcPyGDNeZTppouINIqlaI5yQM-LLJVX1E1w4dP9NfOaVNz8sNlILnUILbAgahZj52av5I1QsY7HkqpcF3PeV2veKV8DV2CUNNAAsMp5aaec34fQ-MyA"
1 Like
5

Hi @dudumonteiro,

Thank you for your response.

The issue involves using one of the reserved namespaces. As described in our Create Custom Claims documentation, namespace identifiers must use any non-Auth0 HTTP or HTTPS URL as a namespace identifier. Auth0 domains cannot be used as namespace identifiers, and include:

Once the namespace has been fixed, you will be able to decode the custom claims correctly.

Hoped this helps!

Please let me know if you have additional questions.

Thank you.

1 Like