Simple React.js User Login Authentication | Auth0

[Music] today i'm going to show you how easy it is to add authentication to a react application really quick before we get into it do you like to win prizes do you like to solve real world problems auth0 is hosting their first ever hackathon from august 7th through 9th where you can work with other developers to solve real-world problems all while competing for ten thousand dollars worth of prizes auth0 is the easiest way for developers to add authentication and build secure applications for this hackathon auth0 has partnered with microsoft amazon digitalocean gatsby ionic versailles and more you won't want to miss this sign up now to put your skills to the test and tackle world problems like addressing the after effects of covet 19 security and connectivity sign up now with the link in the description below since the sponsor of this video is auth0 it's only appropriate that we use auth0 to incorporate authentication into a react app so let's get straight into it i have a blank project folder open here and we're going to open the terminal and we're going to use npx create react app dot and that puts it in this current directory this just takes a minute so i'll speed the video up all right that's done so let's close the terminal and we're going to clean it up a bit so let's go into public we're going to delete all these files that we don't need now i am expecting you to have some basic knowledge of react and how it works so we're going to clean this up and we'll just say react app with auth 0. save that now let's go into our index and we don't need that we don't need the service worker and we don't need any of this we'll leave everything else the same for now then in the app.js we'll just get rid of all the content here for now we don't need this logo save that and then the css we're just going to remove everything we'll come back to that all right now that we've got it all cleaned up the first step actually is going to be to create an auth xero account and uh create the application so let's go to auth0 all right now it's not going to cost you anything to sign up so go ahead and sign up and once you have signed up go to applications and then we're going to create an application now name the application whatever you'd like all right i'll just name it react auth tutorial and then it's important here that we pick single page application then we'll hit create and then which technology we'll say react next we'll go to settings all right we're going to need some of this information in just a minute but for now let's scroll down and under allowed callback urls we need to add localhost 3000 we'll need this in here during development because what happens is when we go to authenticate it's actually going to redirect us to auth0 and auth 0 handles all of the authentication and then it redirects us back to our website so we need to authorize our website during development it's going to be localhost for 3000. once this is pushed to production then you're going to want to change this to your normal domain same thing under allowed login urls and for allowed web origins at the very bottom save changes and then we'll go back up to the top because we're going to need some of this information next so let's go back to vs code the next thing that we're going to do in the root is we're going to create a new file env and then in this env we're going to add two parameters the first one is react app auth0 domain and the second one is react app auth0 client id and so we go back to author0 and we have those here the domain and then the client id so i'll copy that there's the domain and then we'll copy the client id of course your domain and your client id is going to be different than mine and after this tutorial i'm going to delete this so these will not work for you all right now we have our environmental variables set up we can close that file the next thing that we'll need to do is let's open the terminal again we need to install the auth0 package so we'll do npm i at off zero slash auth 0 react this is just going to take a second all right we can close the terminal next we'll take a look at the index.js the first thing that we'll do is we're going to create a couple of variables so we'll say const domain equals process.env so we're going to grab our environmental variables and it was react app auth0 domain and the next one is const client id and that was process env and then react app auth 0 client id all right now we need to import auth0 so we'll say import auth0 provider from at auth 0 off 0 react right now we can use this auth provider so that is going to actually wrap our app so we can change that out now because this auth provider component uses react context we'll be able to access all of its properties from within our app and it's going to take a couple of parameters so we can say domain that is going to equal our domain and then client id and that will equal our client id and lastly the redirect uri that is going to equal window dot location dot origin so that's going to pass it our current location our current url that's in our browser and after the login is complete it's going to direct us back to this url all right and that is all that we need for the index.js so the next thing that we're going to do is we're going to create a login button so we'll create a component for that under source we'll hit new file we're going to create a directory as well components slash login button dot js right that created the folder for us as well as the login button in here i'm going to use a snippet so it's r a f c e this quickly creates a react functional component for us and it has named it so in here we're going to import use auth0 so this is a hook that auth0 created and it's going to come from auth 0 react then we can use that hook inside of our function so we'll say constant we're going to destructure log in with redirect and that is going to equal our use auth 0 hook all right now we want to return and it's not going to be a div we're going to return a button so we could say button and then on click we want to have an arrow function here and then we'll say log in with redirect and then the button will be named log in all right let's save that and now we'll go to our app and we need to import that so we could just for now we will take this out and we'll say login button and we'll just render that for now all right we'll save that and then let's run this so we'll say npm start all right now we have a log in button let's just pull up our dev tools make sure that we don't have any errors i'll zoom in a little bit all right so now when we hit log in we should get redirected to our auth0 login page and it has already remembered me from already being logged in let's uh we'll log out and log back in in just a minute we'll go ahead and authorize this and we've been logged in so now we need to allow the user to log back out as well so let's go back into vs code we can close the terminal i also have a bit of css that we're going to add in here and i'll just copy and paste it it's very little it's a little bit of resets adding some padding to the body and then adding some margin and padding to the button very simple stuff next we're going to create a log out button so back into components create a new file logout button dot js all right and then we have to import from here as well we can just copy that then in here we're going to get a const and we're going to grab instead of the login we're going to grab log out from the use auth0 hook all right and then in here again we're going to have a button and then on click we're going to have an arrow function and log out very simple and we'll just name this log out save that and go to our app now we'll include log out button and of course we need to wrap this so we'll just wrap this in a fragment now we'll save that and go back to our app now we have login and log out so let's log out and then we'll log in now that we've logged out you can see what this should look like initially you have the option to sign in with google or just type in your email and your password so i'll use google and now we have to authorize the app and now we're logged in so what can we do with this information now that we know that the user is logged in we can now give them access to parts of the app that they would not normally have access to if they were not logged in let's create another component we'll call it profile we're going to import auth0 again then we'll create our const this time we're going to grab user and we're going to make that equal to our use auth 0 hook and now we can return a bunch of information so in this div let's just return jason dot stringify and then we'll pass in that user we'll say null and two all right we'll save that let's go back to our app and let's bring that in so we'll just add that below here profile all right save that and let's go back to our app oops i misspelled off use auth0 let's go back and fix that that's in profile right there use auth0 typo typos happen all of the time all right now we're working we have a false that is because the user is not logged in we don't have a user yet so let's log in there we go now we have all of our information let's make this a little bit prettier because that's hard to read go back this is not something that you have to do but i'm going to start a new console and i'm going to add a new package npm i react json pretty this is definitely optional all right let's close the terminal then in our profile here going to import json pretty from react jason pretty and now what we can do is within this div let's just we'll add jason pretty and we have to pass some data so we'll say data equals user close that out and let's just comment this one out so let's open the terminal close this terminal and let's stop that one ctrl c and then npm start again we have to restart it all right now let's log in and there we go now we have the user's information so we have the name nickname name altogether we have a picture locale updated email email verified and then this is the unique id for this user it tells us first what platform the user authenticated with and then it gives us their id so within our app we can use this for user specific things such as saving settings or if the user uploads files or photos we can use this to track what belongs to which user now i want to render some of this information and i also want to not show log in if i'm logged in and i want to show only log out when i am logged in right so let's go back and let's do some of that let's close the terminal so in here we have the user so we could do image and then our source that would equal user.picture and then we can set our alt to equal user.name and then let's set nh2 and within that we could say user.name and then a paragraph and we could say user.email oh i have to close this out there we go all right if we go back to our app we should have some more information so the issue here picture is not defined because we're not logged in so we need to first find out is the user logged in and we only want to display this information if the user is logged in so we can easily do that by pulling another property out so we'll pull out is authenticated pretty simple and now we're only going to render this if the user is authenticated let's move that over and down we're going to say is authenticated if that's true then let's render all of this save that and go back now it's working user is not authenticated so now let's log in and now the user's authenticated wow that's really big let me scroll out [Music] now the user is logged in and we have that information okay let's let's fix that image i'm not trying to do much css here but that image is crazy big let's just say image width uh 120 pixels save that go back much better now we can zoom in a bit and we can see all of the information all right so now let's work on these buttons so we can do the same thing so we'll go here we'll say and bring in is authenticated and then if the user is not is authenticated right so not authenticated then we'll do this and then basically the same thing we can copy this go to the log out button if the user is authenticated then show the log out button and of course we still need to bring it in as well is authenticated all right so let's go back to our app now we only see a login button because we're not logged in and now we see the log out button and if you noticed very quickly it said login and then it said log out right so it it re-rendered so i want to fix that let's go back into our app we're going to go to app.js and we're going to import auth0 here as well import use auth 0 from cloth 0 react so within our app we're going to create const and we're going to pull out is loading so that's another thing that we can pull out of the use auth 0 book and then we'll say if is loading then we want to return we'll just return a div that says loading just very simple all right so if it's loading this is what we're going to get if it's not loading then this is what we're going to get why is that a div that's strange okay so this is what we'll get if it is not loading all right let's save that go back to our app right let's log in and pay attention to that button there if you saw just for a second there it said loading and then log out all right well that's the basics of adding authentication to react but we've only scratched the surface of what's possible with auth0 let me know in the comments below if you'd like to learn more about authentication like this video to help me out and subscribe if you haven't already for more videos like this

Channel: codeSTACKr

Views: 125,071

Keywords: react authenticat, react login, authentication auth0, auth0 react, oauth2, openid connect, jwt, json web tokens, javascript security, react security, how to secure react applications, how to add login react, oauth, identity, iam, authentication, react, reactjs, javascript, react authentication, jwt authentication, react app, react auth, react authentication jwt, react authentication and authorization, react auth0, react authorization jwt, react authorization, json web token

Id: MqczHS3Z2bc

Length: 19min 45sec (1185 seconds)

Published: Thu Jul 23 2020

Reddit Comments

[u/codeSTACKr]

In this video, we will add a basic user login with authentication to a React.js app using Auth0. Auth0 is the easiest way for developers to add authentication and build secure applications.

Auth0 makes it easy to add authentication to React with their npm package auth0-react, which uses React context and hooks.

Let me know if you would like to learn more about Auth0.