 Do you want to add custom claims to your user's ID tokens or not zero, but don't know how? But not my friends. I've got you covered in this video I'm going to show you how to add custom claims to your user's ID tokens using actions Before you guys started on creating our first Actions that adding a little bit of information on our ID tokens I want to show you the app that I'm using to demonstrate how to do that So I've created a single page application inside my odd zero dashboard and Downloaded the react sample that you can find in the quick start from that application And I already got that running here. I installed The packages that I need and I follow the readme instructions on that sample to configure that into my odd zero dashboard And let me show you what that looks like So here I have my application This is the first page you see once it is running and that's the home page and I can log in here And it's going to show my login box And I can see here my email and password and I can log in as you can see. I'm a person that loves dogs I'm a dog person and Once that loads, uh, you see that not much change into my application, but I can see here that I have Profile picture at least a standard one because I haven't changed that if I go to my profile You can see here that I have some details of my id token For that user profile And what I wanted to do is actually add a picture of a dog in my profile page So that a person that loves dogs like me can see a cute dog Whenever they logs in and go into their profile page and the way to do that I'm going to be using the user's id token. So now that you know how the application Works, let's go into our odd zero dashboard and create a first action And we are only going to use one action actually and then update the code for our application And the way to do this is once you go into your dashboard. I'm already seeing the details from my application that I call dog five I'm very creative with names for my applications And on your left hand menu, you can go into actions and you're going to see two options flows There are the flows that you usually see like logging flow MFA and things like that and library where you can see available actions From the marketplace and ones that you have created. So let's go into flows And I want to use an update my logging flow And once it loads, you can see here that this is my logging flow currently I don't have any actions to Extend this logging flow, but let's create our first one and it's going to be a custom action. So if I come in here And you can see that I don't have any custom actions yet And I can click on the plus sign and I can create a new action by clicking on build custom action and in this Menu, you can choose the name for your action How it's triggered which part of the flow it it is used and the runtime Let's leave the runtime as it is and since I'm already going to add this to my logging flow I'm going to leave the trigger as is and create the name. So I'm going to use a sign Random dog Because I'm going to use an api. I open api In free one to add a random down to the user profile So once you do that Once you create your action, you can see the actions editor and This actor is actually really good because it's going to help you do a lot of things. First, let me show you something Here we have modules. That's where you can install your npm modules And we're going to use one external modules as long as the module doesn't need any bindings You should be fine and be able to use it This is if you click on the little key there, you can Store your secrets safely So for example, if you're going to use an api, then it's an api key to access you can use that to start that api key and Test where you can try it out your actions and see the results and the budgets if you needed before deploying it So that's really good as well So the first thing i'm going to do is actually change a little bit of the code i've got here So what i wanted to do is actually access one external api and grab Random dog picture So to do that we're going to need a npm module and the module is called axios So let's add that module here And by default it's going to bring out the latest Version of any module that i want but you can add the version if you need a specific version For your usage and i can create And this makes axios available on our runtime And if i close this i can then Add axios to my code And you can see that the editor auto completes and show options to you on how to edit the code Okay, now i have axios and i can use it So the api that i'm going to use is actually an api from dog.co And you can see that here in the end point that i need is actually An edit point for random pictures, and this is the path image random And if you access that you're going to receive a message Saying a link a url to Image from a dog and the status of your request there was a success and here's the answer Something goes wrong. You're going to see that in here as well So if i go back to my actions i'm going to Use this url to make my request using the axios ones and i'm going to call the answer to my request random dog And this is done by calling axios doing a get passing along the url for my end point And if i do my semicolon here should not have any problems Now this random dog will be a structure of a message and a status so inside of my request response and to add that to my User ID token that is a very easy way To access that type of information. So first things first. I want to check whether or not the event that i'm going to be analyzing Is happening during authorization So The event in this case brings details about the user on the the context of login So i'm going to do a check if event Is doing authorization purposes authentication Authorization Me and my typos And the thing i want to do is actually use the api object that is when i can Use that interface to access the methods to change the behavior during login So let's use api and you can see here the editor is super friendly and already gave me options so that i can use I could do Added the access token adding much factor or something like that But what i want is id token and if i select that i can then see The method for setting a custom claim. So let's set the custom claim And So a good standard here to avoid clashing of your custom claims with a standard Claim is to add URL As a basis for your claim. So i'm going to do that and it can be anywhere else doesn't have to be Something that exists and i'm going to call it Dogify because that's the name of my application Dot com slash random dog which is which actually is the name of my claim Random dog this way i avoid Having clashing issues with all those standard claims To access the data that we want that is the message the URL for the dog picture We're going to use random dog dot data and then access the data that we want That is message And now we should be able to try out our Action for the first time And i'm going to save this as a draft and that allows me to try out My actions without having to deploy it or add it to an any flow So once i come in here in my test tab And you can see here that i already have some details about the events that i'm going to be doing and if i run this If you run this without saving it is going to save your actions as a draft Oh, i forgot something So once we do a request we need to add an away here. Oh, of course Now let's try to save the draft and run it again And we're going to see the test results and there you go now the commands that we run Uh, so we are going to add this custom claim to my id token And i know this is going to add a custom claim because we're going to be using the type of the command that i'm running is Add custom claim and the value for that custom claim is this image here So if i copy this, uh, actually going to see A image there. Oh, that's so cute Beautiful dog And now if i go back i can deploy this And it takes a while but once it's done. It's done. You can go back to your flow And add that action that is on your custom tab And to your flow and you drag and drop and that's it. Don't forget to apply in this way the next time i use the logs into your Application it is going to be a sign of a dog. Now notice i didn't Add this yet. So if i go into my user management page, and if i go into my users You're going to see that i have two users here. I have my Auto user and i have my log dogs user And if i go into that one You can see that no extra information is on the metadata Because well, i'm not adding that And that is my devices history and everything else So i did a success exchange here that when i logged in And these are the details of my User, right? So that's the name that is my email that i signed up the nickname Which is usually before the ads on the email the picture and so on and so forth Now if i go back to my application And since login i'm going to log out And logging back again So here's my user password and i can log in And now if i go back to my profile page because i want to see the content of my id token You're going to see here that now i have My random dog picture And notice that every time we log in or that i get a new id token You're going to see a different picture, which is awesome Now let's go back to my application code because while having this year's school and all But i don't want people to have to copy this URL and then paste it on another tab to see the actual image I'm going to edit my application and add in This image as part of the profile page So the way to do that is you go back to your application code Go into rc Views and you should find your profile.js file And Here we have the code. Let me Hide this terminal a little bit and we have the code for the profile Page so here we have the user User picture that's the profile picture the username and things like that And i'm going to add a new thing here that whenever a user has a random dog On the id token, we are going to display that into my application And because i already have that code ready, i'm going to copy that into this file Now every time that user has the dog Random dog picture on the id token that should be displayed On the profile page And if i did everything right and go back into my application, you see our dog. Oh, look at that Isn't it cute? Oh, I love it That's amazing That was fun And now you know how to add a custom claim to your user's id tokens using actions. Isn't that fun? Of course, you might want to add something more serious to add your tokens Or something else and now you know how to do it I hope you had a lot of fun watching this video that I prepared for you And don't forget to subscribe to the channel and check out the links in the description We have a bunch of information about actions and documentation that you might want to see And all the other uses of actions in there. See you soon. Bye