Let's Learn Auth0 Actions!

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. And welcome to another episode of Learn With Jason. Today we’re coming to you in full 1080p for the first time. I hope this looks great. Please let me know how it looks for you. We’re also using a new audio chain, we have a new A/V setup, we have camera two, right, feeling good about that. And most importantly, we’ve got Will Johnson. Will, how you doing, man?

WILL: Oh, man, I’m doing great. I just took my, you know, my morning dose of raw liver. So, you know, feeling good.

JASON: That joke is like an onion, it’s got layers.

WILL: Yes, it does.

JASON: Oh, man. I am very, very excited to have you on the show today, but before we talk about why you’re here, let’s talk about who you are. So, for folks that aren’t familiar, can you give us a bit of a background?

WILL: Yeah, sure. First, I want to say congratulations on your move on going out on your own solo. You know, I was on here like three years ago, when I was starting in tech, and you were fairly new at doing this. So, it’s kind of cool how the progress that you’ve made. So, congratulations on all of that, man. It’s really, really cool to see.

JASON: Yeah, it was great. So, Will and I got a chance to catch up at Jamstack Conf this year, and it was great to share stories about how much we’ve grown. I remember I met you when you were first starting out at Egghead, you were just kind of breaking into tech at that point, and now you’re over at Okta, working on Auth0. You’ve come so far, and it’s so impressive watching you kind of make your way up the ladder in tech. It’s always fun when you meet somebody and get to grow together when you’re out and seeing what’s good.

WILL: Yeah, it’s been great. And you’ve been someone I’ve been watching and, you know, trying to emulate and stuff like that. Yeah, it’s been really, really cool. But for me, I’m Will, self taught developer. I was doing mainly factory work for years, and just didn’t like it, you know, it was boring, I didn’t like the same movement 400 times for 12 hours. So, I wanted to be more create I have, so I start learning how to code, got notice of Egghead, start working there. There when I met a lot of developer advocates, I didn’t even know this was a thing. So, I met a lot of developer advocates at Egghead. Okay, I think I can do this, as well. So, that’s how I ended up here at Auth0. And I’ve been doing, you know, developer activities, I was speaking at conferences, speaking at company events, doing YouTube videos. It’s been a really fun and exciting ride. And can’t wait to see, you know, what else gets done and what else gets accomplished.

JASON: Yeah, absolutely. Well, yeah. So, you have made the move into DevRel, doing a great job at it, and we are now actually going to talk about your day job today, we’re going to talk about Auth0 and, specifically, Auth0 Actions. Let’s talk about what that is. Hold on, I just saw a comment. Ben, yes, the captions now go into the Twitch player. I am so happy. I’ve wanted this to be true forever. It is so exciting to me that this is now a thing. So, the way that this works is there is a plug in called like OBS StreamText something, something. So, I work with White Coat Captioning. So, Ashly is here today, and we have live human captions on the show. And the problem with live human captions is that there’s like a very specific format for sending closed captioning into a live broadcast. And I don’t know how to do it. And OBS is written in C. So, like, I have no idea how to make this work. But, so, there is a plug in, I can’t remember who originally built it, but Liz Fong Jones updated it for OBS28, so now I can run a little node script on my computer that reads the StreamText event that White Coat is sending to and pipes that directly into Twitch, into the live stream as a closed caption channel. So, you’ve got that CC toggle button now if you want to follow along with closed captions. And I’m so excited, because that means now I don’t have to do the whole embed on the home page, send people to the home page to look at the captions, and all that kind of stuff. So, big improvements all around. Real excited about that. So, Will, let’s talk about Auth0 in the abstract first. Auth0 is, I guess, not really a start up anymore, they’ve been in the game for years. What I remember Auth0 being good at, when I used it, is I could put a log in to my website and the thing that I was always excited about is I could use third party services, log in with Google, with Twitter, whatever else, right. I think a lot has changed since I was deep in Auth0. So, can you give us a bit of an overview about what the company is, what it does?

WILL: Sure. So, for Auth0, I mean, you know, essentially, it handles authentication and authorization for you. So, authentication is being able to log in. You never have to build another form again, right. You don’t have to worry about auth flows and stuff like that. The nitty gritty of handling authentication is handled by us, we take away that for you. As far as same with authorization, roles, and access, and things like that, you don’t have to worry about those things. Hook up Auth0 to your account, and we kind of or to your application, and those things get taken care of. And like you said, it has definitely grown, and there’s a lot more to it, you know, outside of that. Like we help you protect your accounts, we do multifactor authentication, the whole magic link thing. It goes on and on. If it has to do with you logging into your application, we have a solution for you that’s fairly, fairly easy. Even my favorite thing, biometrics, right. Biometrics at Auth0 is one click of a button to set that up, and you’ve got users logging in with their face or fingerprint, or if they have a UB key or something.

JASON: We just had Joyce Park on the show to talk about the Fido 2 and Web auth and stuff. That’s the future I want. I can just touch the button instead of having to remember a password or open up my password manager. Just hit the thing, yeah, this is your computer, that’s your finger, so let’s go.

WILL: Yeah, exactly. I don’t know if you’ve seen that tweet that people have where it’s like the future and it’s like flying cars and stuff like that. Society if we did something. That’s how it feels, society, if we didn’t have to use passwords, that’s how the future is.

JASON: Yes. I definitely think passwords are a constant source of pain, and I am very, very happy that I no longer need to deal with them in certain cases. I’m trying to find a link to this StreamText repo real quick, just to make sure that it shows up in the notes. All right. So, let’s talk a little bit about two things. Let’s start with actions. So, what are Auth0 actions at a high level?

WILL: Usually when I’m talking about actions, I like to use an analogy, right. So, let’s say that you’re the owner of a Mexican restaurant, right. You sell Mexican food, quesadillas, tacos, enchiladas, fajitas, right.

JASON: Man, you’re making me hungry.

WILL: I mean, you got the pizza shirt on, so you’re making me hungry.

JASON: True, my fault, yeah.

WILL: But… so, let’s say the restaurant gets super popular. Say the people that come to the store say, you know what, what if you all made pizza, but not Mexican pizza, straight up pizza, right. So, you have a few different options. So, you want to take care of your customers and give them what you need, right, you have a few different options. You can, you know, buy a pizza oven and start making pizza there, train your employees on how to make pizza. You could partner with a popular pizza company in your area and be able to have them, you know, sell their pizza there, right. Or you could buy some premade, prepackaged pizza from Target, you know, and put that in your store and sell it to people. So, you have different options to satisfy your customers. So, the same thing with actions, right. If someone says, you know, hey, I want to be able to verify with my ID, or I want to have voice recognition to log in, you know, something along those lines, with actions it allows you to add those things to your application. And you have different options, right. It’s not like it’s only one way to do it and you don’t have to really mess with your core code base. You can add these extra things and still serve your customers without it being like a super headache and a lot of leg work on your end.

JASON: Got it, got it, got it. So, then what I’m able to do is so, if I’m setting up an app in Auth0, I am going to be, for example, I have a dashboard for my app, and I’m going to have people log in, and I want them to see their own data, so I need some kind of authentication provider, so I add Auth0 on top. They will handle the user accounts and they’ll make sure that they have permissions to see the things that I’m showing them and all those sorts of things. What you’re saying is that with actions, I can extend what happens as part of the authentication process, or is there… is it bigger than that? Am I oversimplifying?

WILL: I wouldn’t say you’re oversimplifying, but, yeah, that you can extend basically, with the actions, and we’ll see when we log in, you have different trigger points in our authentication flow that you can interrupt and have an action run. So, for example, like logging in is one. Then there’s pre user registration. That’s like before a user gets sent to the database, you might want to customize their profile with something, you’d use pre registration. Post registration, you know, after they are set to the database and registered, you might want to use that to send a welcome email or something like that. Post change password, so, there’s like different points in that flow from logging in that we can interrupt and have that action run.

JASON: Got it. That’s super cool. So, I’m kind of imagining if somebody changes their password, then I might want to run an action that goes through every surface of the app and make sure to delete the cookies, so that everybody who’s already logged in gets removed, right. Or, you know, like something like I want to clear the offline data and make sure they get a fresh copy of the data now that they’ve changed the thing. So, something that wouldn’t really be built into Auth0, but is very tied to, like, the experience of a logged in user in my app.

WILL: Yeah, exactly.

JASON: Even things like audit logging, right. I might want to send a log to whatever I’m using for log tracking. I’m going to send an event to Honeycomb, Sentry, whatever my tool is, so I can say this is how often somebody resets their password.

WILL: Yeah, exactly.

JASON: Yeah, so, I mean, I’m kind of probably coming up with contrived examples you could solve in other ways, but it’s very cool when you see a system provide hooks. Like you said, it’s very difficult for a company to just anticipate every single way that somebody might want to use the tool. So, instead allowing extension points and letting somebody say, all right, I’m going to use your tool for what your tool is great at. You have your team focused on being the best in the world at that thing that I need. And when I have something custom, I’m not harassing your sales team like saying hey build us this custom feature. Instead, I can use the extension point and build out my little bit of custom code, and I move on with my day. I really like that model of whatever it is, SaaS, you know, where you’re not like stuck in the we’ll build it or you don’t get it model from the companies that you work with. I very much like it when they, you know, certain things I want them to build for me, but a lot of things I know I just have a weird edge case, because I’m doing something that the tool wasn’t built for. I’m very guilty of constantly holding tools wrong and trying to twist it to do something that was never built to do. So, if I get the keys and can go make my own mess, I can then manage my own mess. I don’t have to dump that on you. Can you build this custom API endpoint for me so I can do something silly.

WILL: Yeah, yeah. Yeah, that’s the cool part about actions. Even when I’m out talking to people, you know, who use them and stuff, it usually is like a specific, you know, edge case that they are able to build themselves. And they have access to those points, to where they don’t have to go do a whole bunch of stuff in their own code. Like for one example, someone would if they clicked a certain thing in their app, like during sign up, they’d send them to a CRM to put them into an email funnel using like Zapier, and that’s not something everybody would need, but because they had actions, they were able to take care of that, you know, on their own. And there’s also options, there’s a marketplace for actions. So, you can just kind of click and add things that are already pre made, so you don’t have to always write your own code.

JASON: Yeah.

WILL: And as time goes on, they want people to be able to, if they do make a custom action that solves a problem, they can put it on the marketplace themselves and have other people have access to it. That’s like future down the line, but that’s kind of like the direction that it’s going.

JASON: Yeah, that’s cool, too, because what I’m hearing off that is it solves another problem that I’ve seen, which is a lot of companies end up reaching for Zapier or If This Then That or other kind of work flow chain things that are just event driven pipelines. And in a lot of places, you are happy to bring one of those in, they are excellent tools, they are very utility tool types of applications. But in the case of, okay, we’re a brand new company, we’re setting everything up, and the only thing that we need this workflow automation with is Auth0. I don’t want tool sprawl yet, right. I would very much prefer to be able to put the serverless function into Auth0 than have whatever my stack is, then Auth0, now I’m setting up a Zapier account. Now we’ve got lots of credentials to manage, workflows, people have to remember where those things are, it probably turns into something we’re paying for, so now we’re paying for Auth0 and Zapier, whereas we could not use Zapier yet, we’re not there yet. Come back over, put it all in Auth0. Now it’s one account, one centralized place to handle the whole flow. Less context, less challenging to document, less likely to get out of sync or kind of age out over time. So, that’s pretty compelling, especially when it comes to identity code, because it tends to be such a no two apps tend to do identity exactly the same. There’s always something you need to do. Like you mentioned, your CRM, that’s also huge when somebody logs in, if they perform certain actions, maybe you want to tell Hubspot, hey, they’ve explored this new area of the product, let’s send them an onboarding sequence and teach them how it works. Hey, they haven’t tried this thing yet. If they’ve logged in five times and haven’t looked at this page, maybe we should give them a nudge that says look at this section of the app, because this is where a lot of the value is and it looks like you haven’t discovered it yet. So, there’s so many things you would do. There’s no way that Auth0 could build that. How would you as a company build that out. So, then the other way that it goes, the company goes, well, our auth requirements are so complex that we need to build it in house, then you’re down this other whole rabbit hole of managing, like, the security data of all this PII, there’s GDPR problems, there’s all this stuff happening because now you are responsible for all that data. So, it really does get tricky. Again, it’s about finding that right balance, but I love the idea that you could just add the extensions you need, the customizations that you need, and let Auth0 be great at identity, let your stack be good at being the stack that you built. And then you have the little bits of glue code that let you do the custom stuff that you want to do.

WILL: Yeah, yeah, exactly.

JASON: Cory is in the chat saying then companies go down the wrong rabbit hole. 100% yes.

WILL: Yeah.

JASON: Okay. So, Will, is there anything else that you want to say about actions before we flip over and start building one?

WILL: No, I think, honestly, I think the best way to see how cool actions is, is to make one.

JASON: Let’s do it. All right. I’m going to flip us over into the paired programming view. Here we go. Let me get this out of the way, because that’s going to be disconcerting to look at. Then we’re going to be here. All right, we are looking at the home page. If you don’t want to watch the closed captions in the closed caption viewer, because look at it! Look at it go! Wait, look, there they are. That’s amazing. But, so, Ashly is here from White Coat Captioning today putting all this together. Thank you so much, Ashly, for being here. And that is made possible through the support of our sponsors. We’ve got Netlify, Nx, and New Relic kicking in to make the show more accessible to more people, which I very much appreciate. We’re talking to Will today. Will, where is the right place to send people, Twitter still the right place?

WILL: Yeah, Twitter is the best place. Is that a script kit?

JASON: I do have script kit somewhere. I think that was Alfred.

WILL: Okay.

JASON: I do like Script Kit. Script kit is let’s see, I have… is it over here? No, that’s not it. That’s the old one. That’s before it was Script Kit. That was when John was still just kind of Script Kit, there. Fun little thing for automating on your local computer. All right. So, we’ve talked about you. Talked about John Linquist, now I’m ready to talk about Auth0. Auth0.com, this is the tool we’re using today. Where should I start first? What’s the first thing we should do?

WILL: If you already have it, we should just log in. We’re going to create a new application, and I’m going to have you download a sample app.

JASON: Okay. (Siri in background).

WILL: Okay, Siri, wasn’t talking to you. That was loud.

JASON: Okay, let’s see what’s in here. I have not used my Auth0 account in a minute. Okay. So… I’m ready.

WILL: Yeah, click on applications. Then applications when that drops down. Then create application in the upper right. So, since this is going to be React, yeah, put a name. Single page web applications. This is going to be React, create, yep, yep.

JASON: Okay.

WILL: All right. From there click on React. So, I’m going to have you download a sample app. Basically, the sample app is already configured with Auth0, because that’s not really what we’re, you know, trying to show today. So, I sent a message to you. You can just copy that and clone the repo.

JASON: Okay. Got to figure out where I am here. This one. That’s where I need to be. All right. I’m going to head over into my terminal, which is in the wrong window. That’s what we need. All right, so, I’m going to clone, and we’re going to say LWJ Auth0 Actions is going to be the name of this. Okay, so, we have little bit of code here. Sample one. All right. Should I just fire this up?

WILL: Probably do an NPM install. In the sample 01.

JASON: Okay.

WILL: All right. And then go to the auth config.JSON sample. You can either make a copy of it or delete the sample at the end of the file name.

JASON: Okay.

WILL: All right, so, then we’ll go back to the Auth0 dashboard. And go to settings. Copy the domain and paste that there. And the client ID, as well.

JASON: All right. Collapse this. We’re going to copy the domain. That goes in here. Copy the client ID.

WILL: Right. This is how we connect this application to your Auth0 account. And then delete audience, because we’re not, you know, using an API or anything. So, you won’t need audience there at the end.

JASON: All right. So, that’s set up, and I believe everything is installed, so I should be able to just start it?

WILL: Not yet. One more thing we need to do on the settings page. Scroll down. Then for loud callback URLs and

JASON: 3,000, right?

WILL: Yeah, local host 3,000. Set that for a callback URL, allow URL, and allow web origins. So, for people who don’t know what these things mean, the allow callback URL basically, for people who don’t know, when you have an account with Auth0, put it to your application, when you click log in, you actually get redirected to Auth0 to actually handle the log in process. So, as I said earlier, you don’t build a form or anything like that. We take you to an Auth0 provided log in page that you can customize if you want and things like that. But after you log in there and that user is authenticated, we want to know where you want to redirect the user back to. So, of course, for this we want to use local host 3,000, but the URL is going to be different when using a production application. Then the same thing with allow log URL. Where do you want them to go when they log out, right, what page you want them to show up on. And allow web origins is basically where is this call coming from, because you’re making the call to the Auth0 endpoint from the front end. You want to allow that URL to make that call, so you won’t have course errors and stuff like that.

JASON: Yeah. So, this is allowing us to you know, just a security thing. We don’t want people setting up their own websites and trying to get into our stuff.

WILL: Yeah, exactly. Then make sure you scroll down and save those.

JASON: I think I did. Saved. Okay. Now I can run dev?

WILL: Yeah, you can run the NPM run start, or however you’re comfortable for that.

JASON: I’ll do the let’s see how it goes. What is this? I’m going to figure out what that is later. For now we’re going to grab this, come over here, open up a new tab, and

WILL: This is like the sample project that’s already configured with Auth0. So, if you hit log in… this is the Auth0 universal log in. You can sign in.

JASON: What have I done? Why are we on Gatsby stuff?

WILL: That’s just the probably signed in something associated with Gatsby.

JASON: You know what I think is happening? I bet this is an account how do I make this because it’s trying to relocate or redirect to the wrong place. What are you doing? So, I configured this here. That’s the right one.

WILL: Yeah.

JASON: So, why the heck is it going to the Gatsby stuff? Oh, here’s a whole bunch of mess happening. Crap. So, I need to do can I set up like a new

WILL: Yeah, probably create a new tenant, yeah. Go to the upper right where it’s let’s see, I’m trying to look at both screens. The upper right where it says J. Lengstorf. See if you have another tenant first maybe.

JASON: Looks like I don’t. Switch tenant. I have a Learn With Jason one, perfect. Okay, let’s get in here. We’ll just try this whole thing again, because I think, yeah, I think I had some stuff set up for Gatsby that I need to get away from. So, go to applications. Here we go. And we’re going to do one of these. Try it again. Single page, create, we already cloned the app, so I’m going to go to settings, and in here for callback URLs, I have these. Save. Then I need to go

WILL: Yeah.

JASON: This one. And this one. All right. So, that probably needs to stop and restart. And I’m going to come back over to here, go back to 3,000. I’m going to try logging in again. Hey, now it’s not showing me Gatsby stuff. And I want to sign up. I can continue with Google. Let’s do it. Secure my account. Can I skip this? No. So, I’m going to pull this off screen, put my phone number in. It’s going to text me a code, give me a second. 209133.

WILL: Live is always fun.

JASON: All right. Now that I’ve put in my phone details, I’ve got the accept. So, it’s going to get access to my profile and email, good. I’m okay with that. We’re going to accept.

WILL: Log in. Got a little profile page you can visit. And then the information here is from when you authenticate with Auth0, they issue an ID token. So, this is the information that’s in the ID token right here.

JASON: Yeah.

WILL: So, your name, your family name, links to the name.

JASON: Okay. So, now we’re logged in, right. We’ve got this thing set up. And it looks like for whatever reason Google doesn’t want to share my image, but that’s fine. We all know what I look like. So, then what should we do next?

WILL: First, go ahead and log you out. On the profile page. So, now we can get started with some actions. We got an Auth0 account set up, got applications set up. Now let’s write an action. So, let’s go back to the dashboard. And click on the left, actions. And click on library. So, this here will show all of your actions if you made any already, but since we have it, we want to click build custom on the upper right.

JASON: Okay.

WILL: All right. Then let’s say log in let’s say welcome video, right. This is what I want to do. I guess to explain what we’re doing here is when our users log in, we’re going to redirect them to a video that I want them to watch, like a welcome video, like welcome to the site, you know, so glad to have you here. Just like a video to get them excited about using our product, right. So, it will be the log in and post log in trigger, and keep the run time at node 16. Then click create. All right. So, this here will bring you to the actions editor. So, all the code for actions is held here on the website. So, you don’t have to open up your code. You can come in and make these changes fairly quickly. So, there’s a function already there, the on execute post log in function is asynchronous, and it takes in an event object and API object. The event object kinds of talks about contextual information about the particular user that’s logging in, and then the API object provides methods that you can use to change the behavior of the flow that you’re using.

JASON: Got ya.

WILL: So, for this we’re going to use a redirect since we want them to go somewhere else and watch a video first.

JASON: Got ya, okay.

WILL: Just to go over some more things about the editor. On the right hand side, there’s a play button. Left, man, I’m left handed. It’s like I always get those things backwards. Left hand side, left hand side, there’s a play button. So, that you can go to test out the actions before you deploy them. You can click that and get a look at it or whatever. It also lets you see what’s available in the event object, too. I think that’s really cool.

JASON: That’s really handy, okay. Do I get to customize this, too, if I want to?

WILL: I mean, yeah, you can put in different values, yeah, yeah.

JASON: Yeah! That’s slick. So, that’s wonderful, because then I can go in and mess around in here and get this all kind of fixed up. That’s pretty great, okay, cool.

WILL: All right. Then

JASON: There’s a bunch in here. We’ve got geo data, we’ve got here’s the user data. That’s slick. This is really slick. Okay, great.

WILL: Yeah, it’s a ton of information in there. It gives you a lot of power, you know, to be able to customize what you’re doing. It’s really cool.

JASON: Awesome, okay. All right. So, we are getting access to this event. That’s what we want. And I want to, you said, redirect. So, what we want to do is on successful log in, which I guess if it’s post log in, every log in that gets here is successful, right?

WILL: Yeah.

JASON: Okay. So, we don’t actually need to check if it’s on successful. We can just say redirect the newly logged in user to a welcome video.

WILL: Yeah. All right. And, again, just for the tour, on the left hand side there’s like the key. Then you can use that to store secrets, API keys from like a third party, like Twilio or Stripe or something like that, you can store the secret there is. We’re not going to get into that today, just because I want to keep it light and easy as possible. And then on the bottom one, the box icon, that one is where you can store you can add NPM packages, right. So, you can add

JASON: Oh, slick.

WILL: Yeah, yeah, it’s really dope.

JASON: And is this anything off of NPM?

WILL: Yep, yep.

JASON: Nice, really nice.

WILL: Yeah. So, those are kind of the tour. Go ahead.

JASON: I was just going to say, this looks like it gives you the full tool box, this is everything you could need. So, I’m ready. Let’s put one of these together.

WILL: All right. So, we’re going to do a first simple action. So, we’re going to do a redirect. So, we’re going to use the API object. That’s how you redirect. So, you would type in inside the function, of course, API.redirect.senduserto. And then that will be, you know, yeah, send user to. And then I’ll send you the URL in the chat.

JASON: Copy the link here, send the user to here. Okay.

WILL: Then, so, that will be it. This is all we need to do to do the redirect. Click deploy in the upper right hand corner. You could click up there, but I’m going to have you go through the men use on the left hand side, where it says actions, click on flows, and we’re going to do the log in flow, and those are the different trigger points that you have. So, this is the visualizer. This is a drag and drop. This is where you can actually add the actions to your flow. So, you go to custom. Drag welcome video in between the user logging in and the token being issued. Click apply.

JASON: Okay.

WILL: So, this should have it live on the application. Should be able to go to log in, the application, and get that welcome video.

JASON: All right, let’s give this a shot. So, back here, we are not logged in, so I’m going to go to do my log in, continue with Google.

(Rick Roll) Knew it was coming, did it anyways.

WILL: How’d you know it was coming?

JASON: You get the URL, you know it’s a YouTube. Something is going to happen. That’s great. This did the thing that we wanted it to do. And if I open this up here, this did it redirected us entirely. So, if I go back okay. So, that did what we wanted. (Jason continuing to be Rick Rolled) Go away. So, what it did, though, is interesting, is it looks like it broke my log in, because I’m not actually logged in after having gotten redirected.

WILL: Correct. Of course, I did this for fun, but usually if you’re doing like a redirect, you want them to do something, and then once that thing is done, then you can what you’ll do is you’ll send the user back on your actual application, right, you would send the user to the continue end point from Auth0. And then that will continue the log in. But just for this little joke, no, it doesn’t log in. You have to go through the whole process.

JASON: That’s really cool. So, we have the ability to do things, and, so, knowing that this is possible, I could add some logic in here, and I could say go into my custom flow here. I’m going to open this up, and then I could do something like, you know, if the event.user.email is Will Johnson, thinking up an email here. Now it’s only your problem. I’m starting to see very quickly how much this can do, where we can check things like the first thing I think about is things that I know we would get asked to do if we were in like a product capacity, right. So, we’re building the product, and the marketing team, the sales team, they want to know who’s signing up for the service, so we can check for which domains are being used for registration. In the CRM in Salesforce, Hubspot, or whatever, we can add people to a group that’s like ideal customer profiles. If they log in or register with one of those emails. I can see wanting to do things like as somebody is moving through the app, if they are I actually kind of want to look at what the options are here. So, pre user registration, post registration, if they change a password. There’s a lot going on here that gives me the opportunity to do a decent amount as we go. What else do you want to look at today?

WILL: All right, cool. First, let’s go back to the flow and then the log in, and we’ll take that action off. Click apply. I always forget to click apply and wonder why it’s not doing what I want it to do.

JASON: Now it’s going to do the thing again. Do that again. Okay, perfect. So, we’re in. It’s working.

WILL: Yep.

JASON: All right.

WILL: All right. The next thing that we’re going to try to do is, on the application, on that profile page, we got the information from the ID token on the actual application, like the app itself. I’m on the wrong screen. Yeah, okay, I thought I was so delayed, you were on completely something else. I was like anyway, on the profile page, we have the information from this ID token. And, so, this is what you can use to, like, customize user profile, you know, maybe have a particular welcome message or something like that. You can do that with the ID token. Next thing we’re going to do is add some information to this ID token. We’re going to do this in two steps. We’re going to create an action on sign up. So, you might want to do a new account for this do an action on sign up that adds user metadata to a user’s profile, and the data gets stored on Auth0 and we want to do another action that takes that metadata and displays it and adds it to the ID token as a custom claim, which is the information about the user that we can add.

JASON: Got ya, okay. So, the first thing we want to do Rafael is saying I got serious after the video. No, just really serious about building good auth flows. No, we’re going to go in here, you said it’s going to be on post user registration. Checks notes… pre user registration.

JASON: Okay, for my mental framing, that’s not before they have hit actually, of course it’s not. It’s not before they’ve hit the button. After they’ve hit register, but before it’s saved to the Auth0 database, there’s pre user registration. After it’s saved to the database, it’s post user registration.

WILL: Yep.

JASON: Got it. Okay, after they register, but before it gets saved in Auth0, we are going to modify their user object.

WILL: Yep.

JASON: So, add custom user fields. All good?

WILL: Uh huh.

JASON: Okay. So, in we go and I’m ready.

WILL: For this one still, I’m trying to keep it simple. API.user.set user metadata. Then inside of there, it takes a string, which will be the name of the metadata. So, for this one we’re going to put “are tacos sandwiches.”

JASON: I assume it needs to be key or can it be anything?

WILL: Just can be a string. I usually do the underscore thing because it’s easier for me to read.

JASON: Snake case definitely is nice with this. And I’m not going to give you an option to tell me what it is.

WILL: In my notes I had it as yes. Also, the value can be anything. Value of the claim can be any value, but the name has to be a stream.

JASON: Got ya, got ya, got ya.

WILL: Make sure I’m on your right stream. Click deploy on the upper right.

JASON: Deployed. Oh, add to flow. Oh, sick. That’s handy.

WILL: Super. The team that works on actions has put some work to make it super developer friendly. All right. Let’s sign up a new user.

JASON: Okay. So, we’re going to log out. We’re going to sign up. Use a different email this time.

WILL: I think it has to have a user name and password for changing the metadata.

JASON: Okay, I can do that. Let’s go back. Local host 3,000. Okay, we’re going to go in. No, go away.

WILL: Yeah, still want to wait for that. That’s what’s connected to at the moment.

JASON: Okay, I’ll log in and log out, I guess. Okay. Do one of those. Decline! Ha ha, okay. So, now I can go out to local host 3,000 again, we can log in, I’m fine. Okay. Then we’re going to sign out. Sign up. And put in an email address. Let’s do one of these. And then we’ll make up a password for it. Okay. We have continued. Oh, for goodness sake. Okay.

WILL: You must have that set up in your tenant for the

JASON: Yeah. Let’s see here. Now we’re back here. It wants to give the profile an email, we’re good. I’m going to hit accept. And we have done it. And if I go to my profile

WILL: Is, it’s not there yet, right. That’s just the user metadata that we set. This is the ID token that gets issued when you log in. So, go to user management on the left. Users. The user you just set up. Then scroll down. All right. Now in the user metadata, it says “are tacos sandwiches” is set to true, which is something I can agree with. This was a real application, you know, probably wouldn’t be “are tacos sandwiches true,” but it will be a preference you want to set up, or select, you know, do you prefer delight mode, then you’ll store that here in the metadata, then you can put it in the ID token and allow that to show up on their profile when they log in and things like that.

JASON: Got it. Cool.

WILL: And for this site, right, if they say that the answer is true, we might send them, you know, 10% coupon. If false, they get charged 10% more.

JASON: Right. Yes, the true believer discount, I believe, is the right call. So, for us to do this, then, I can go into a flow, and we want this to be after somebody logs in, right, we’re going to check their metadata and change something in the token that comes back?

WILL: Yep, yep, yep.

JASON: Cool. So, I can go into my library, we’ll build another custom one. Update based on metadata. It’s going to be on log in. Good. Keep it node 16. Here, I think I get… so, if I get an event.user.metadata, user metadata, dot are okay, so, I think we probably need to do it like this. Are tacos sandwiches, is this how we did it?

WILL: Yeah. So, here’s what I was going to well, first here’s the first thing we do. I was going to just destruct are tacos sandwiches out of user metadata.

JASON: I got you. We can do that. We’ll do a const are tacos sandwiches.

WILL: You haven’t used this before, the fact you know what to type.

JASON: It’s got auto completion. I can see what’s happening, so I kind of made some guesses, right. I can go around, and I started typing meta, and it showed me these two. This is like the magic of type script, it makes that piece I kind of don’t care about type script for actual compilers, but I can’t not use it now that I know that autocomplete works. For me it’s all about the IDE auto complete.

WILL: Okay, cool, cool. I’m looking at, you know, a different screen. I’m like he already knows what to do. It does… yeah, the actions editor does have the auto complete makes that a lot easier. I’m working on an Egghead course, and I don’t know if you’ve seen my about actions. I don’t know if you’ve seen my tweet about I was talking plus coding plus recording is so hard. So, having the auto complete in actions made the recording process a lot better, whew!

JASON: 100%. Feels like such a game changer, because I used to spend so much time I would start typing, then forget what the thing was called, so flip over to the docs, then find the property name, got to flip back into your code, write that piece. Those little three second loops just add up to make it so frustrating in small innocuous ways. It’s not that big of a deal, but it adds up, makes you a little bit slower, it’s a little bit more frustrating. Those tiny convenience methods are so, so critical for me in keeping me in the head space of what I’m building.

WILL: For sure, I agree. It’s been very, very helpful. It’s like people when they look at TypeScript, hey, I’m no TypeScript expert or zealot. People think it slows you down, but it speeds you up in a lot of ways, too.

JASON: Like every tool, there’s a point of diminishing returns on it. So, you’re going for what’s going to make me more productive, not 100% score, right. TypeScript, all these things. If you’re just a completionist about it, then you’re setting yourself up for I would say a pretty bad time, because you’re going to spend up with a lot of time fiddling with the edges that don’t matter, instead of getting the major benefit, which is enough tests, enough TypeScript, so that people can very confidently and quickly move around your code base and work with it. That’s the whole game. That’s the big game changer.

WILL: Yeah, for sure.

JASON: All right, so, I’ve got my tacos. And I’m ready to do a thing. What should I do next here?

WILL: All right. So, the next thing I want you to create a variable called name space. And then set it to a string of, I guess, LWJ.dev. And then the reason why we’re doing this is because so, the ID token that gets issued is a JWT. So, the values, and they are called claims, and when you’re making a custom claim, because that’s pretty much what we’re doing here, making a custom claim to add to the ID token. You can have name space claims, which is basically like a unique identifier for the claim, or you can have non name space claims, which you can put are tacos sandwiches or whatever. We support both for our ID tokens. We support both cases, but we recommend that you use name space, because it will be completely unique, it does have to be in like a URI format. So, it needs the HTTPS in the slashes, too. So, it has to be in that name format, but helps with naming collisions. It’s just a unique URL that you’re using for the name space. Doesn’t have to point anywhere, but we need it for the naming. Won’t be called or anything like that.

JASON: Got ya, I understand, yeah. Okay, cool. I’ve got a name space. Now I’ve got a metadata piece. And we want to add a custom claim. So, what’s the claim that we want to add to our user token here?

WILL: So, to do that, probably go down a couple lines. And then we’ll do an if statement, and we’ll put if event.authorization. So, if the event is an authorization event that this user is trying to do, we’ll type in API.IDtoken.set custom claim.

JASON: Is the key the name space?

WILL: We’ll do a template literal, because it has to be a string. Then inside the parentheses, the curly brackets, we’ll put slash are tacos sandwiches.

JASON: Like that?

WILL: Yeah, exactly. Are tacos sandwiches, as well.

JASON: Got it, okay, I can get into this.

WILL: Make sure you hit deploy. That should save the action.

JASON: Deployed, and now we want to add it to a flow.

WILL: Uh huh.

JASON: Here.

WILL: Yep. Hit apply.

JASON: All right. So, then when we go back this way you know what I did?

WILL: Probably want to log out first.

JASON: I don’t think I saved that password. It should be stored in here as one of the passwords that I just created. Give me just a second.

WILL: All right.

JASON: Nope, it definitely did not. All right, we’re going to create a new one. So, this time I’m going to use one that I can remember. So, we’ll do a Jason plus manual 2 at learnwithJason.dev. This time we’re going to give it a very good password. So, we can continue here. Oh, I got to turn that off. Demo accounts, okay. Once this shows up. So, we’re coming back. I have accepted. And now there it is.

WILL: It should be there, yeah. Because sign in is essentially logging in as well.

JASON: Yes. So, if I log out, and will log back in as what was it? Got to go to my profile, and it’s still there. Okay. So, this is really cool. Obviously, we’re kind of contriving examples here, but I feel like this is such a clear demonstration of what this starts to open up. Because if this is in my token, right, this is what’s being sent, then we can start to put some stuff together. Like when you log into the dashboard, for example, we can start doing things like we could actually, let me ask you a question. So, if I want to have somebody do is there a machine to machine, does this mean I could do something custom? How would I do this, like trigger one of these from my app if I had, say, an area as they activate new features on their dashboard, I want to, say, add a piece of metadata to their token. Is there an easy way to do that sort of thing, or kind of how I guess maybe I’m just kind of spinning up an example here that doesn’t need to be spun up. What would you what else could we use this for?

WILL: I mean, the use cases are pretty vast.

JASON: Yeah.

WILL: Are you talking about this particular the ID token thing?

JASON: I’m just kind of my wheels are spinning now, and I’m just trying to kind of imagine how other people are using these things. What else exists that’s using this setup in the world.

WILL: Actions or the ID token thing in particular?

JASON: I mean, why don’t we broaden out to actions. Like what have you seen people using these for?

WILL: So, a lot of the things that I see people use is being able to hook up with other types of authentication services. For example, I don’t know if people are into crypto, and I so regret these decisions now, but there’s certain services where you can upload a picture of your driver’s license and use that to verify your identity. There’s a service that will verify those credentials are valid, but, you know, Auth0 doesn’t offer something like that. So, you can connect that to if you need that, you know, might be a government application or banking or something. You can hook that up with an action to redirect to upload those pictures and get their ID verified that way.

JASON: Got ya. Yeah, yeah, really cool ideas here. Corey is in the chat asking about progressive profiling. So, yeah, this is actually a question that I do think is worth asking. If I have in my application a need to update my users’ metadata, I think we’re outside of actions at that point, because it wouldn’t be based on an Auth0 action, like a log in or log out. Is there an API that I can use to update the users’ metadata within my code that I could then, you know, add a log in flow to update their metadata based on, or to update their claims, sorry.

WILL: To be honest with you, I don’t know off the top of my head. I do know that you can add information from like a third party or somewhere else with it. I was going to say the management API, Corey, but I wasn’t sure. I didn’t want to say it and it was wrong.

JASON: Nice, yeah. That’s great. We can grab an API, and if somebody, say, activates a new feature, then I can go turn on the metadata for which features they have, or if they have a subscription, we can modify their subscription level and put that right into the token, which makes it so much easier, because that information about what they are allowed to access, the roles and those sorts of things, those become part of the user token. It’s no longer get the token, make a request to the database, and get back the information. You can kind of plug it all together.

WILL: Yeah, yeah.

JASON: To me, that feels it feels less likely for me to experience a lot of pain as I am trying to make this happen. So, I see you just dropped a link in the chat, so I’m going to pull this up for a second. So, yeah, this will give us the ability to client grants, we can mess with the users, and I want to update a user, and there we go. We can now update app metadata, all these pieces, user metadata, and that’s being done through an API. So, that’s really slick. I’m going to drop this link again, because it goes into my I have a little link tracker system.

WILL: All right.

JASON: Yes, exactly. Corey is saying once we’ve used this API to update their metadata, then the actions would come back to we would just build another one of these over here. Not that one. This one. We would build another one of these to check that metadata that we’d set. And we could add more custom claims, which would allow us to then modify the UI based on the user token. So, this is really, really cool stuff. I feel like this opens up a ton of just great workflows that don’t require me to reinvent a bunch of wheels in my own software.

WILL: I agree. I’m laughing at this, what Corey said in the chat, interesting for a scenario when someone is late on a library book or a bill payment.

JASON: Yeah, but what a good point. You could add something like as part of their log in. So we go in, go into the log in, and their flow could be first one could be check bill status, then we could update their metadata or I guess we could do it all in the same action.

WILL: Yeah, that’s another thing.

JASON: Go ahead.

WILL: Okay. Also, another thing, you can have multiple actions in here, right. So, it doesn’t have to be just one. They recommend one to three tops, just for speed purposes, but you can add, like, up to 20. Again, wouldn’t recommend it, but it doesn’t have to be just one action in here. Of course, they’ll fire in the order that you put them in, from top to bottom.

JASON: Yeah. We could do some pretty cool stuff here, where, you know so, because we have the ability to add external libraries and all that good stuff, we can do something like let’s update based on taco metadata. What if we go in here and let’s just add node fetch. And we can wait, is that done? That’s there. So, then we can do something like get fetch out of node fetch. And then in here we can, I don’t know, we’ll get the data equals await fetch. Schedule. And then we can do a then res. So, what I’m doing here is we’re just grabbing out these pieces. And, so, I can actually just even get, like, next episode. And then we can do something like if I can remember how this API works, which I’m going to just open it and look before I break something. So, we’ll be able to do next episode.title, right. So, we can do one of these and say set custom claim. Next episode. Then we can do next episode.title. So, now I deploy this, I can come out here, I can log out, log in again, and this is going to be manual 2. Nope. We can do super secret 123. Continue. No! What did I do wrong? To a dynamic import. Oh, oh, no. My life hard. Going to fail, wasn’t it? That going to work? Try again. Just refresh, does that work? Nope. Okay. So, we’ll go back to here. Log in one more time. Debugging on the fly, cannot use import statement outside of a module. Great, I’m giving up. It’s a great idea in theory. So, what that would let us do, once I debugged the node fetch, I think I’d have to go to node fetch a previous version, because they went to ES modules. And, so, that is all fine. It would give us the ability. But, yeah, I think what we would need to do, Corey, just to save you the I think it’s like node fetch oh, now there’s just a node fetch common JS that we can use. Anyways, the catch is that we’ve got CJS exports, and it’s trying to do ES modules imports, or the module itself is ES modules. This is like the forever problem of changing package formats. Everybody’s got to use the same one.

WILL: Bryan Robinson said he gets that so much he switched back to Axios. Even the example I’ve seen, people use Axios to fetch external data.

JASON: Yeah. Well, the nice thing is once we hit node 18, the fetch API is built in, so you don’t need Axios, node fetch, any of those. It’s a thing you can just use now. I’m just kind of waiting for the day that everybody is using node 18 by default, and that’s going to be a great day. Cool. Okay, so, we have about ten minutes left. Was there anything else that you wanted to show off or talk about before we run out of time?

WILL: There’s nothing else that I want to show off. I wanted to try to keep it light and stay away from adding libraries and stuff today. Just kind of give like a fun intro, I guess, to actions. But for to, you know, learn more and learn some of the other features, I am, like I said, working on an Egghead course for actions that should be out some time Q1.

JASON: People should follow you on Twitter to get that?

WILL: Yeah, to get the announcements and whatnot.

JASON: Great, great, great. What about you mentioned that there was a marketplace where I could see other people’s actions. Where do I look at that?

WILL: I would say go to the marketplace.Auth0.com, of course. And then scroll down and click actions under features.

JASON: Cool, okay. So, under actions. We’ve got the ability to, let’s see, verify age, country based access control. That’s kind of cool.

WILL: You know what, yeah, let’s show that off. I can show you how to do a drag and drop action. You could just go back to the dashboard. You don’t even have to go here. I forgot about that. So, yeah. Actions. So, let’s do log in.

JASON: Okay.

WILL: Got the create one. So, go to custom.

JASON: Do I need to install an action?

WILL: Yeah, yeah, I’m tripping. Yeah, install action. You know what you’re doing. Country based access.

JASON: Country based access was up here somewhere. Here. All right.

WILL: Click add integration. It should have you fill out some accept permissions.

JASON: Okay, that all makes sense. I’m going to continue. Country codes to block. Yeah, put in U.S. so it tells me to go away. I don’t know what the sanctioned under U.S. export controls. Okay. So, if we had an e commerce store, we can’t legally sell to countries that are sanctioned, right. So, we can hit that button to not have to do it. And then all right. So, now what should happen?

WILL: Get out, Yankee!

JASON: Okay. So, I’m going to create that. And now we’ve got country based access. So, if I go back to my flow, go to my log in, I can just drop this right in the chart. So, now what we should see, right

WILL: Click apply.

JASON: Should bounce me.

WILL: Got to click apply first. I forget that, too. I forgot it when I was recording a lesson.

JASON: Oh! All right. Here we go. So, I am not logged in. I’m going to log in now. Boom.

WILL: There we go.

JASON: No, you can’t come in. I’ll get rid of this one. Apply. Go back to local host 3,000. Log in again. And don’t know which account I’m logging in with right now. Okay. Okay. Now it lets me back in. You know, our action is still working and all that good stuff. I mean, that’s pretty cool stuff. I love I didn’t have to think about it at all. I just configured it the way I want it configured. That’s really handy. So, this is, yeah, this is pretty excellent. Then I’ve got my installed ones here, and if I want to update that config, I can come back in here and get rid of that or whatever. Pretty cool stuff. And with that, where would somebody go if they wanted to actually, let me really quickly make sure I link to this. It was here, here. Do a link to the marketplace for actions if folks want to check those out. What about documentation? Is there a place somebody should go if they want to build their own integrations?

WILL: Yeah. I can Auth0.com/customize/actions. And I can drop the link in the chat, it will be faster. Boom. But, yeah, that’s the docs for actions.

JASON: All right. Docs for actions. And with that, Will, I think we can call this one a resounding success. We were able to build out very quickly the ability to build custom flows. So, we built out the ability to Rick Roll people, so, redirect based on who’s coming in, we can add custom user metadata, and we can do that, we did it manually, but we can do that based on what country they are coming from, what their status is. Corey was saying we could look at a database and see what their account status is, are they overdue anything, we can add that metadata. We wrote in an action that lets us actually update their user claims based on their user metadata, so we can provide actual information in the user token that the app receives. We also looked at how we can use this marketplace to get a bunch of pre made actions already for us. Will, anything else you want to add before I take us home?

WILL: You know, if you have any questions about actions, like actions is kind of like my favorite thing with Auth0. So, if you have any questions about actions or you made a cool action, please show me so I can get that over to the actions team. They love to see their work in the wild. But, yeah, just hit me up on Twitter if you have any questions about not even necessarily about actions. Just Auth0 in general, because a lot of times I’ve been here for a year, and someone may ask me that I’m not particularly sure of, because I haven’t run across it. It always deepens my knowledge of the product or identity topic. So, I welcome all the questions, so let me know.

JASON: Absolutely. All right. So, on that note, we’re going to do the rounds. So, we have had White Coat Captioning. Ashly has been with us all day doing the captioning. That is now available in Twitch itself. Just click that closed caption button, and it’s always available on the homepage, as well. That is made possible through the support of our sponsors, Netlify, Nx, and New Relic. Oh, all kicking in to make this show more accessible to more people, which I very much appreciate it. While checking out the site, make sure you head over to the schedule page and see what’s coming. We’ve got a whole bunch of fun stuff. Most notably, let’s see, I’m going to be out on Thursday. I’m going to be out of town. And then next Tuesday I’m going to do a solo show. So, I will be on probably just keep working on the Learn With Jason mono repo switch. We’ve got Dominik coming to talk about TanStack Query V4. This is the framework agnostic revolution of React query. It’s a really cool library. Dominik and I talked a bit about what it can do. Super excited about this. It’s going to be a good episode. We’re going to be building custom developer training requests, Nuxt 3 and Nitro, build a Docusaurus site, we’re going to do component driven dev with Faker. There’s so much coming, y’all, it’s going to be great. I think, Will, we can let you go. Thank you so much for hanging out with us today. This was an absolute blast.

WILL: Thanks for having me. I had fun.

JASON: All right. With that, we’re going to call this one done, y’all. We will see you all next time.