DEV Community

Robertino
Robertino

Posted on

Adding Custom Claims to ID Tokens with Auth0 Actions

Learn how to create a new custom action that will add a custom claim to your Auth0-issued ID Token.


Did you know that you can use Actions to customize the user ID token? Well, if you need to add custom claims to your users' ID tokens, you came to the right place! With this tutorial, you'll learn how to use the power of Actions to include custom claims to users' ID tokens.

If you prefer, you can also watch the videos below with me explaining to add custom claims to your users' ID tokens using Actions πŸ‘‡!

Auth0 Issued ID Tokens and Custom Claims

ID Tokens are commonly used in token-based authentication to pass user information to a client application. At Auth0, ID Tokens follow the JSON Web Token (JWT) standard; this means that all ID tokens Auth0 issues are JWTs.

Claims are pieces of information about a given subject. In the case of ID Tokens, claims will contain information about the user, such as the user's name. Using custom claims can give your ID token extra information that can improve your application, for example, storing a user ID from a third party or system.

In this example, you'll see how to use Actions to make a request to an external API and store back the obtained information as a custom claim to ID token payload to be used on the sample application.

The Sample Application

Before you begin, you will need a sample code to customize.

For this blog post, you will use the React single-page application (SPA) sample. Keep in mind that you can use what you'll learn here and apply it to your app no matter what language or framework it uses.

You can clone the sample application from GitHub with the following command:

git clone https://github.com/auth0-blog/assign-random-dog.git
Enter fullscreen mode Exit fullscreen mode

After the cloning finishes, follow the README.md file instructions to configure it to use Auth0. You'll need an Auth0 account, and if you don't have it, you can get one for free here.

After configuring the sample application, you can go into the app root folder and run it with the following command:

npm start
Enter fullscreen mode Exit fullscreen mode

Open your browser and access https://localhost:3000/. You should get the following page:

Sample app home page

Read more...

Top comments (0)