Add a Custom Claim To Auth0 JWT Id Token
After a user successfully logs in, Auth0 sends an ID token to your React application. You can use the data from the ID token to personalize the user interface of your React application. ID tokens issued by Auth0 are JWTs and you can add custom claims to the JWTs using Actions.
Create a Login Action to add the user metadata as a customer claim.
exports.onExecutePostLogin = async (event, api) => {
const namespace = `https://myapp.example.com`
const { favorite_ninja_turtle } = event.user.user_metadata
if (event.authorization) {
api.idToken.setCustomClaim(`${namespace}/favorite_ninja_turtle`, favorite_ninja_turtle)
}
};
Auth0 allows namespaced and non-namespaced claims.To avoid name collisions, we recommend using namespaced claims.
You can use any non-Auth0 HTTP or HTTPS URL as a namespace identifier.
Use a URL that you control as a namespace identifier; this allows you to avoid the risk that someone else is using the same namespace. The namespace URL does not have to point to an actual resource. It is only used as an identifier; it will not be called.
The JWT returned to the requesting application is built and signed at the end of the trigger running. The final, signed JWT is not accessible in an Action.
Check out the docs to learn more about creating custom claims
Instructor: [0:00] Back on our sample application, if you head to the profile page, you see there's some information here about the user, but you don't see the user metadata for the favorite Ninja Turtle that we set in the previous lesson. That's because the information on this profile page is taken from the Auth0 issued ID token. [0:24] The ID token is a JWT. To get the favorite Ninja Turtle user metadata to show up on the profile page, we must add it to the JWT as a custom claim. On the Auth0 dashboard, let's go to actions, library then click on build a custom.
[0:50] We create an action called add metadata to claim. We'll use the trigger for login, pulse login so when the user logs in and gets issued that ID token, the user metadata for favorite Ninja Turtle will be passed along with it.
[1:07] Click create. The actions editor, you have the exports.on execute post-login function. It is asynchronous and you pass in the event object and the API object as parameters. The first thing we're going to do is create a variable called namespace. We're going to set it to https://myapp.example.com.
[1:46] Next, we're going to extract the favorite Ninja Turtle from the user metadata. Next, we're going to check if the event is an authorization event. If that is 1, we're going to use the API object to set a custom claim for the ID token.
[2:13] Gotta love that auto complete. Inside of set custom claim, we'll pass in a template string that includes our namespace and the name of our metadata. Then we'll pass in favor Ninja Turtle and this will be the value of the claim.
[2:36] I want you to keep in mind that we're using namespace here as a prefix to the name of our claim. We're doing this so we won't have to worry about any naming collisions.
[2:47] The namespace is just a prefix for the name of the claim. Auth0 does support namespace and non-namespace claims, but we recommend that you use a namespace claim to make sure that there isn't any collisions or anyone else isn't using the same name.
[3:07] The namespace does have to be in a URI format. It does not have to point to anything so it doesn't have to be a live URL, but it should be one that you own to avoid any naming collisions. Once you are satisfied with your action, click deploy.
[3:31] Then we can click the add to flow menu that shows up. This will take you to the login flow, drag and drop editor. We can grab add metadata to claim. Then make sure that we click apply. It says that the login flow has been updated.
[3:52] Let's go back to the sample application. Click login and let's login with our user. Let's go to the profile page. As you see, the favorite Ninja Turtle has been added to our user's profile.