<Auth0Provider
domain={"dev-5om225fvn1mnxkrw.us.auth0.com"}
clientId={"kdQnDELfUHjAqka75bCVMQfHThzMsWd1"}
cacheLocation={"localstorage"}
authorizationParams={{
redirect_uri: window.location.origin,
scope: "profile email user_metadata app_metadata la_user_id offline_access",
}}
useRefreshTokens={true}
>
{...}
</Auth0Provider>
I then access it in
const { user, getIdTokenClaims, getAccessTokenSilently } = useAuth0()
Adding it to app_metadata on my user:
{
"la_user_id": 1
}
Adding it as an action like this:
exports.onExecutePostLogin = async (event, api) => {
const namespace = '...';
const { la_user_id } = event.user.app_metadata;
if (event.authorization) {
// Set claims
api.idToken.setCustomClaim(`${namespace}/la_user_id`, la_user_id);
}
};
But I don’t see the la_user_id in either the token claims or in the user.
Hi @johan.lindell
Welcome to the Auth0 Community!
I have tested your Auth0 Actions and it appears to be working as intended on my end.
I have set a test app metadata on the user and the action appears to fire as intended as seen in the images below:
App metadata set on the user:
Result after login:
Action Code:
exports.onExecutePostLogin = async (event, api) => {
const { test } = event.user.app_metadata;
if (event.authorization) {
api.idToken.setCustomClaim(`testing_data`, test);
}
};
You might not be setting the app metadata on the user in your implementation. Once the app metadata is set, does the user inside your Auth0 tenant reflect that as well?
Kind Regards,
Nik
The app_metadata is set, still not seeing the added data. In which function of the React SPA should I be seeing this data?
Hi @johan.lindell
In order to retrieve the custom claims that you have set for your user, you will need to use the getIdTokenClaims() when you are populating the user’s profile after authentication.
const claims = await getIdTokenClaims();
This function is available whenever you are using the useAuth0 hook for the React SDK.
You can review the following community post in regards to accessing User Metadata in React.
You can also read more about the functions available in the React SDK in our documentation.
Basically, once you have set the app metadata using an action, it should be available in the user object:
const { user } = useAuth0();
Alternatively, you should be able to access it via the loginWithRedirect() function as explained in this community post.
If you have any extra questions on the matter or if the resources provided above were not useful in resolving the issue, feel free to leave another reply on the post.
Kind Regards,
Nik
This is how I’m calling the code:
const { user, getIdTokenClaims, getAccessTokenSilently } = useAuth0()
void Promise.all([getIdTokenClaims(), getAccessTokenSilently()]).then(([claims, token]) => {
console.log({ user, token, claims })
})
and this is the output
{
"user": {
"nickname": "karen.gordon",
"name": "karen.gordon@example.com",
"picture": "https://s.gravatar.com/avatar/4696d67e45e98125a5310496e0d7b8ab?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fka.png",
"updated_at": "2025-01-23T22:57:02.900Z",
"email": "karen.gordon@example.com",
"email_verified": false,
"sub": "auth0|67904a785762111cf5940d3f"
},
"token": "...",
"claims": {
"__raw": "...",
"nickname": "karen.gordon",
"name": "karen.gordon@example.com",
"picture": "https://s.gravatar.com/avatar/4696d67e45e98125a5310496e0d7b8ab?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fka.png",
"updated_at": "2025-01-23T22:57:02.900Z",
"email": "karen.gordon@example.com",
"email_verified": false,
"iss": "https://dev-5om225fvn1mnxkrw.us.auth0.com/",
"aud": "kdQnDELfUHjAqka75bCVMQfHThzMsWd1",
"iat": 1738000940,
"exp": 1774000938,
"sub": "auth0|67904a785762111cf5940d3f",
"sid": "7YDXwcnMC6dBOJZcGBMnnPHjlgM5S1jC",
"nonce": "..."
}
}
Hi @johan.lindell
I am currently investigating the matter, could you please confirm that in the namespace of your custom claim that you are setting you do not use any Auth0 HTTP or HTTPS URL as a namespace identifier? These would be:
Kind Regards,
Nik
This is the action I’m currently using:
exports.onExecutePostLogin = async (event, api) => {
const { la_user_id } = event.user.app_metadata;
if (event.authorization) {
// Set claims
api.idToken.setCustomClaim(`testing`, la_user_id);
}
};
Hi @johan.lindell
Thank you for providing that info.
When you configure the Auth0Provider component in your React application, have you added the following authorization parameters?
audience: "https://{yourDomain}/api/v2/",
scope: "read:current_user_metadata update:current_user_metadata"
As mentioned in our documentation for Calling an API using React, these are needed so pass an access token to the API for your application to access private resources. That access token can be then accessed in the Profile component as seen in the example provided by our documentation.
Let me know if the following info and documentation is helpful regarding the matter.
Kind Regards,
Nik
My provider:
<Auth0Provider
domain={"dev-5om225fvn1mnxkrw.us.auth0.com"}
clientId={"kdQnDELfUHjAqka75bCVMQfHThzMsWd1"}
cacheLocation={"localstorage"}
authorizationParams={{
redirect_uri: window.location.origin,
scope:
"read:current_user_metadata update:current_user_metadata read:current_app_metadata update:current_app_metadata profile email user_metadata app_metadata la_user_id offline_access testing",
audience: "https://dev-5om225fvn1mnxkrw.us.auth0.com/api/v2/",
}}
useRefreshTokens={true}
>
my response:
{
"user": {
"nickname": "karen.gordon",
"name": "karen.gordon@example.com",
"picture": "https://s.gravatar.com/avatar/4696d67e45e98125a5310496e0d7b8ab?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fka.png",
"updated_at": "2025-01-23T22:57:02.900Z",
"email": "karen.gordon@example.com",
"email_verified": false,
"sub": "auth0|67904a785762111cf5940d3f"
},
"token": "...",
"claims": {
"__raw": "...",
"nickname": "karen.gordon",
"name": "karen.gordon@example.com",
"picture": "https://s.gravatar.com/avatar/4696d67e45e98125a5310496e0d7b8ab?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fka.png",
"updated_at": "2025-01-23T22:57:02.900Z",
"email": "karen.gordon@example.com",
"email_verified": false,
"iss": "https://dev-5om225fvn1mnxkrw.us.auth0.com/",
"aud": "kdQnDELfUHjAqka75bCVMQfHThzMsWd1",
"iat": 1738008011,
"exp": 1774008009,
"sub": "auth0|67904a785762111cf5940d3f",
"sid": "7YDXwcnMC6dBOJZcGBMnnPHjlgM5S1jC",
"nonce": "ejhTTzdWdTN6NHRjSHhsWERDTmFjRGJ3Vm0xckV6UEt3M1gyNDV0Z1ZBNQ=="
}
}
Hi @johan.lindell
By any chance, have you tried to validate your ID token using JWT.io as mentioned in this community post in order to inspect if the custom claims are added to it?
Please attempt to do so and let me know if the test claim is visible in there or not.
For the information that you have provided so far, you seem to be setting the action accordingly and when you try to retrieve the custom claims in your React App they should be definitely visible in your console log.
I will be looking further into the matter and will try to come back with an update as soon as possible.
Kind Regards,
Nik
Hi @johan.lindell
Unfortunately, I was not able to replicate the issue that you are experiencing in viewing the custom claims set on the user.
In my integration with Auth0 and React, the token was successfully set on the user upon login and I could visualize the data on the profile page, in the console log and also when decoding the token as seen below:
CONSOLE LOG OUTPUT
aud: "55A0Xjvh8cgvMGbs3pByoGZkTDIHRT06"
email: "test_user@test.com"
email_verified: false
exp: 1738054863
https://randomwebsite.org/test: "test_data.jpeg"
iat: 1738018863
iss: {auth0_domain}
name: "test_user@test.com"
nickname: "test_user"
nonce: "R0pDQmhQV1RVcE5saX5CQjg3dXVKS200ZHRKaWZwSEdoS3B4Nm9Jc2xQeg=="
picture: "https://s.gravatar.com/avatar/6c5b304584f0752458be5188441937e5?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fte.png"
sid: "eHG3adosfTkehFl8vsfJVbdy5tIHjmne"
sub: "auth0|679418144c63f5ec2de7943f"
updated_at: "2025-01-27T23:01:01.740Z"
raw: {raw_token)
DECODED TOKEN
{
"https://randomwebsite.org/test": "test_data.jpeg",
"nickname": "test_user",
"name": "test_user@test.com",
"picture": "https://s.gravatar.com/avatar/6c5b304584f0752458be5188441937e5?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fte.png",
"updated_at": "2025-01-27T23:01:01.740Z",
"email": "test_user@test.com",
"email_verified": false,
"iss": {your_Auth0_Domain),
"aud": "55A0Xjvh8cgvMGbs3pByoGZkTDIHRT06",
"iat": 1738018863,
"exp": 1738054863,
"sub": "auth0|679418144c63f5ec2de7943f",
"sid": "eHG3adosfTkehFl8vsfJVbdy5tIHjmne",
"nonce": "R0pDQmhQV1RVcE5saX5CQjg3dXVKS200ZHRKaWZwSEdoS3B4Nm9Jc2xQeg=="
}
I believe that the custom claim is not being set on the user, however, you implementation appears to be just fine.
Did you check if your action is being fired after a successful login? Can you also double check if you have deployed and assigned your action to a trigger?
Otherwise, I believe the only possible issue is that there might be some kind of misconfiguration with your integration, otherwise, the claim should be set on the IdToken just fine after the user completes the login process.
Also, having the fact that you are using refresh tokens for your integration that should not affect the outcome in any way.
If you have any other questions or additional info on the matter, leave another reply on the post.
Kind Regards,
Nik
OK I will experiment some more, maybe there’s a user error here. Thank you for looking into it.
The issue was that I hadn’t set the action to be run as a trigger!
Hi @johan.lindell
Great to know that the issue got resolved and for updating us on your situation!
If you have any other questions, feel free to always drop a reply or post on the Auth0 Community.
Kind Regards,
Nik
