 My name is James quick and I'm a developer advocate here at all zero in this video. I'm going to show you how to set up authentication in a react application in five minutes. Now, before you get started with this video, make sure to check the description below where you'll have a few links that will be really helpful. There's a link to a full blog post covering authentication and react with all zero. There's also a link to the starter code that we will use in this demo. And then lastly, there's a link to the official quick start documentation on all zero for getting started with react. So you have all of those at your disposal. All that said, let's go ahead and get started. All right. So the first thing you'll want to do is sign up for a free account at all zero. There's a link below for you to sign up. Once you do, you'll have to create a tenant. I've got my James, you quick demos dash to tenant selected here. A tenant is basically a grouping of applications. So I'm going to go in and create a new application. So we'll go to create application, call it all zero react five minutes and then make sure this is a single page web application. Now, once this is created, we'll be taken to a quick start page where you can find documentations for integrations with different platforms. But we're going to start in the settings tab. Now, notice the domain and the client ID. These are two properties we'll need in a second. So make sure to take note of those. And then if we scroll down, we'll need to update a couple of different properties in here for callback URLs, allowed logout URLs and allowed web origins. Now the redirect flow with authentication here redirects the user to all zero and then back to our application. So we're telling all zero that we want to allow that process to happen from local host port 4040. All right. Our next step is to go ahead and clone the starter repository. Now you'll have a link to this repo in the description below. So make sure you use that. And once you clone it, go ahead and open it up in your editor of choice. Now that we have that project open in VS code, we can run an MPM install to install all of the packages. And then we'll need to create a .env file that will hold some of our environment variables for this project, namely the client ID and the domain for our application. Now, if you remember back in the settings tab, you can find both of them inside of the settings for your newly created application. So I'm going to take both of those properties and put them into the environment variable file with react app all zero domain and then the same for the client ID and go ahead and save that. In the meantime, it looks like all of our packages have been installed, but there's one additional dependency that we need to add, and that's the actual auth zero slash auth zero dash react package. This is the library that we're going to use to be able to add authentication to our app. All right, it looks like that finished installing as well. So then I'm going to go into source, add a new file called auth zero provider JS. And what we're going to do is basically take the author provider that comes from the SDK and then add a little bit to it. I'll show you that in a second. So I'm going to copy a little bit of starter code for this from that blog article that you'll have a link to in the description below. So make sure you check that out and we'll cover what this does here in a second. So I'm going to copy and paste this into our author provider file and what this does is it will use the author provider that comes from the SDK notice that up here. It's going to create a provider around that and then we're going to tell it what the configurations are, including the domain and the client ID that will help set all that up will export that thing at the bottom. And the main thing we're trying to do here is use history from react router to attach it to this provider. So once we have that boilerplate code in place, we can come over to our application and we want to import the all zero provider with history and then wrap this entire app with that provider with history because that's what we named it inside of this all zero provider here. We wrap it with our entire application. I got an auto import in here. So make sure you do that import. This will make the hooks from all zero available to us in any component that we decide to work with. To make sure this is working, let's go ahead and run an MPM run start. And it looks like that application started up correctly, which is great. Now let's go into our components and then into the main nav file where we'll add a couple of buttons for our nav bar. Since this function component originally has an implicit return, we'll need to put this down on a new line to make this explicit. So we'll come all the way down and add a closing bracket here. That way we'll allow ourselves to write some code inside of this function. So now that we've got that formatted, we want to use the use auth zero hook. Notice I get auto import in here again. And from that thing, we want to destructure certain properties. So we want to get the login with redirect function, the log out function, as well as the user and is loading properties as well. And now we can use those to display our login and log out buttons. So if we come down here underneath that nav link, what we're doing is we create two different buttons, one for login and one for log out. And then we conditionally display them based on loading and user. So if it's no longer loading and we still don't have a user, we want to show the login button that calls the login with redirect function. If it's not loading and we do have a user, we want to show the log out button that does call that log out function. So this should conditionally display those two different buttons for us. So you see here, we have our login button. Let's try to go through and log in. If you're doing this for the first time, you can go to sign up and create an account that way. After sign up was successful, we can authorize the app. And after that login process is finished, notice that we now have our log out button instead of the log in button. So we know that that is working correctly. Now that is log in and log out, adding authentication to your application in just a few minutes, but let's take a little bonus time and add profile information about the user. So let's open up the profile component in here and we'll update this to include a little bit of information about the user. So I'm going to paste in a little snippet. What we'll do is use that same use all zero hook. We'll grab the user from that hook. We'll get the name, picture and email, and then we'll display that information in the profile page. So let's say that and when the page refreshes, if we navigate to the profile page, we should see information about the logged in user. And then lastly, if we log out, you can see that we've logged out and now the login button shows again. All right, so that was authentication in react in five minutes. Let us know in the comments below if you'd like to see another five minute tutorial doing authentication in a different framework. Which framework would you like to see? Let us know that in the comments. If you enjoyed the video, make sure to like it. Subscribe to the channel so you can see more content and I'll catch you next time.