React.js User Login and Registration with Auth0

today we're going to look at an easy way to add a full featured login system to your react projects and it also includes social media integrations [Music] hello and welcome hi i'm dave today we're going to use authxero to quickly add a full-featured login system to a react app i'll share links to all resources and source code in the description let's get started we're starting today at authxero.com and i want to note that this is not a sponsored video when we finish i'll share my honest opinions both good and bad about why you may or may not want to use auth0 for your projects and really even if this was a sponsored video i would still share my honest opinion alright let's get started by clicking the sign up button here on authxero.com this should take us to a page where we can create a login but we don't have to use an email and a password we can use one of the social connections they provide so i used github now you probably haven't done this yet so go ahead and do that i've already done this after you create your account here then it'll probably take you to the login page which i'm going to go to with this link right up above and as i mentioned i used my github account so we'll once again see a login here and i'm just going to continue with github and this should take us to the dashboard for the auth xero login okay i'm at the auth xero dashboard if it takes a little time to get here that's okay it took a little time that i just clipped out of the video okay let's go to the applications over here in the left-hand menu and when we click that we get a drop menu and i'll click applications from the drop menu as well this is going to show a default application that you probably have in your account and i created a test one here already so i'm just going to create one more by clicking create application and instead of my app which is the default name let's call this react spa for single page application and we can choose single page web applications right here and then click create and now we're on the page for our application and it's asking us what technology we're going to use for our web app so i'll choose react and now it gives some tips and some links to the docs that you could use but we're going to walk through some of that today already go to the settings tab which is the very next one after the quick start and here we get some information that we're going to come back to especially the domain and the client id but we want to scroll down and when we get down here a little ways we'll see allowed callback urls now this is the url that auth xero should redirect to after a successful login so for now in our development environment we just want localhost port 3000 because that's where we develop our react apps when we just use npm start and start them in our local development environment so that's where you'll want it to redirect back to and also the log out url should be the same and also the allowed web origins now note this is just your development environment you go into production you need to change these to your domain name or wherever you're hosting this application okay after you add that address into those three spots scroll all the way down and choose save changes we should get a notification up here that yes all that has been saved so i'm going to scroll back to the top and we need to go to the connections tab that we see over here i believe you'll have a couple of defaults in here when i first created my account i had maybe google and the username password authentication but nothing was enabled so whatever you have go ahead and enable it over here on the right hand side you can see that i added github so if you want to add more social connections you can do that go to get started in the top left of the menu and then if you scroll down just a little bit we should see add a social login provider you can click add social connections from there when we get this page you want to click create connection and then we'll see all the different integrations that auth xero has available here you see apple facebook microsoft linkedin paypal scroll down here's twitter there's many more so you can choose whatever you want you can see that i added github and then after you add github you want to go back to the applications and then go back to the next applications link and from there click your application and then go back to that connections tab that we were at and just make sure that the new ones you added are also turned on because i don't think they default to being turned on i could be wrong but i know when i first created my account nothing was on here and you do need to turn these on okay let's go back to the settings because we're going to need that domain and client id when we get into visual studio code next okay i'm going to resize my window here take it over to the right and now i've got our auth 0 page here on the right with the information we need and on the left i've got visual studio code now i've already got a react app created if you are brand new to react this tutorial may be too advanced for you and i suggest going to my react js full course for beginners and i could link to that in the description below as well but what we need to do here in the react app i've already created is install a dependency and you can see that is at auth 0 slash auth 0-react so i've already installed it but you could open a terminal and then inside the terminal window we're going to want to type npm as soon as i get my cursor ready to go npm i and then at auth 0 slash auth 0-react and press enter now i've already got it installed so i don't need to do it again but this is what you need to type to go ahead and install the auth xero library that you will need okay so after you do that then you should see this in your package.json file okay let's show the file tree over here quickly now over here by the package json and the readme you can select one of these if you want to we need to add one more file and this is a dot env file this holds environment variables things that we want to keep secret and we don't want to send to github with a repository actually we don't want it in our git repository at all so we're going to put the dot env file into our dot get ignore file but first let's add the secrets we need here for development okay in react every environment variable needs to start with react underscore app underscore and then whatever you want to name it so we're going to use the auth 0 underscore domain and you could name this different if you want to but that's what we're naming it here then we just need to copy that domain and paste it right in here then just go down to another line no semicolon needed anything like that we just have the variable name equal sign and the value so now we'll have react underscore app underscore auth 0 to keep our naming pattern going and then client underscore id set that equal to copy the client id paste it right in here as well and that's all we really need so i'm going to save after we've put these two environment variables in now let's quickly remember to add that dot e and v to our git ignore file so if you don't have it added now react automatically has some of these in the git ignore file but it doesn't just have dot e and b i can spell it correctly there we go and we just want to add that instead of being green over here it should gray out there we go so it will not be added to our repository now this is good for development but it's not really good for production either we can put these environment variables in here but when we build our react app those values are injected back into the code because it runs in the browser so you could browse around in the javascript even though it might be minified or whatever else and eventually find those values this will help not send those environment variable values to github and of course it can be discovered there and you don't want that but when you build your application they get injected back so what we really want to do is hide it on the back end and retrieve it and i've got a couple of videos about that so i'll put links to those in the description below you can create a serverless back-end function that will grab those values for you or you can create a node relay and you could hide the values there and then grab them with your app as well okay we're ready to move on to the index js file so i'm going to press ctrl b now to hide the file tree i'm also going to grab my visual studio code and just resize it so we have more room okay in the app component we need to import the auth xero provider and that comes from the at auth zero slash auth zero dash react library that we've already installed okay after we do that we need to define a couple of variables so let's define the domain and here we set it equal to process dot e and b so we're pulling those values out of the environment variables and we'll have react underscore app underscore oops auth 0 underscore domain okay now i'm going to press shift alt and the down arrow and just change domain here to client id and then change domain here to client id as well but it's client underscore id as we defined it inside of our environment variable okay now that we have those let's go ahead and wrap our app in the auth 0 provider and after we have that we'll highlight the closing tag here for the component and put it after the app so we have actually wrapped the app in it and then we need to pass a few things to this auth xero provider so we need the domain to be equal to the domain and then we need the client id set that equal to client id and then the final one we need is a redirect uri we're going to set that equal to the current address of the application which would be window dot location dot origin and save okay normally i would move on to the app.js next but instead i need to create a couple of components we're going to put in the app.js so let's create a new directory inside the source directory and call this directory components and the first component we'll create in here with a new file is the login button.js okay at the top of our login button we need to import use auth0 and that is going to come from that at symbol auth zero slash auth zero dash react library now i'm going to type underscore r a f c e and this is because i have react es7 snippets extension installed and i should be able to just go ahead and press enter and yes i have got a functional component created quickly that way now inside the component we need to pull a couple of things out of the use auth hook so we'll say const and then we'll have login with redirect and then we'll also get is authenticated and both of those are going to come from use auth 0 the hook there after that we just need to change up our jsx i'm going to change this div into a button and before we actually show the button we want to make sure the user is not authenticated that's what we would want if we were going to show a login button so we'll say not is authenticated and then we'll put parentheses i guess i could just cut the button here and put it inside of these parentheses that we've created and after that we need to go ahead and just put some text on the button we'll say sign in and then we need to give the button an on click let's set this equal to an arrow function and inside the function we'll call login with redirect and save and now that we have a login button we also need a log out button i'm going to select all of this code with control a then press control c to copy and now i'm going to create another new file over here in the components directory and call this logoutbutton.js okay inside the new file i'm going to paste everything we had from log in button select both instances of the word login button and change it to log out button other than that we still need the use auth zero hook we still need the is authenticated but we're going to change login with redirect and i can select both of those and just change them to log out so now we're going to call the log out function on a button click and we'll switch the words to sign out instead of sign in and instead of checking to see if the user is not authenticated we want to make sure they are authenticated before we allow them to see a sign out button so now we should be able to save this component with both of these components now created let's go to the app.js and import them and pull something together here that we can see inside of the web app so we'll say import and then we'll have login button and there we go and once we have that we'll go ahead and do the same on the next line down and we'll say import log out button and now we have it as well and now i'm going to highlight this div and select both instances of that and change it to a main element and then also on the very first opening tag of the main element i want to add a class name and i'm going to set that equal to column now i've included a little bit of css inside of this repository that you can download in the description if you want to use my css you could use your own as well i'm going to add an h1 element and this h1 element is just going to say auth0 login and then we'll add our button components below that so we'll have our login button that should only show if we are not authenticated and our log out button that should only show if we are authenticated and save so now i'll press control in the backtick get a terminal window type npm start we didn't get the m on there npm start and we'll fire up the react app and see if it responds as we expect it to okay the app is up and running one thing we haven't done yet though is sign out of our auth0 account here so if we hit this sign in button we're not going to get exactly what you might expect because of that so let's go ahead and sign out of our auth xero account on the main page and that way it won't already know who we are so now you can see the sign in we have here from author zero but let's check out the sign in for our react app we should be redirected to the auth xero sign in here we are and now we have fewer socials i only have google and github right here or we could use the email address and password we also have a sign up option instead of a sign in and we can go back to the login page over here so i'm going to go ahead and sign in with my github credentials and then we should be redirected back to our application okay it's asking if i authorize because i used a social sign in so i'll just click accept and now it should take us right back to our react app but instead of saying sign in it says sign out you may have noticed it briefly said sign in and we're going to fix that in just a little bit but first let's add another component so i'm going to go back to vs code we can close out of the terminal for now and inside the components directory let's add one more component and let's call this profile dot js okay i'm going to go to our login button component once again select all copy with control c and now go to back to the profile component and paste everything in again we still need to import use auth 0 the hook and now i'm just going to change the two instances of login button here to profile inside of the file and then instead of login with redirect and is authenticated we still need is authenticated but here we just need the user information so we'll say user and is authenticated now in the jsx we want to make sure a user is authenticated before we would show anything else so we've got that much now i want to use a article element here and it's not auto completing for me so i'm just going to type it out there we go and now inside of the article element well let me go ahead and put a class name on this as well just to add some quick formatting okay so inside the article element really i'm going to show more than this but a quick dump would be to say json.stringify and then just pass in the user information so this will let us see it quickly at first so let's save that now let's go to the app.js and import that profile component and now that we've got it imported let's show it down here as well okay now we'll resize our visual studio code and we've got some information here in the window it's kind of bigger than the windows providing so let me expand here and we can see that json stringify dump and all the user information that we got from my github account that at least was allowed to share and that's something to consider because depending where the user logs in from they might not have the same information so we want to be cautious as we access this so we'll probably use optional chaining let me go ahead and resize chrome once again and i'll resize visual studio code and we can continue to work on this profile okay back in the profile component let's not do the json stringify and let's make this a little more uniform so we'll start out by saying if we have a user picture we could get that information as that was available from my github account now let's go ahead and put in an image element and i'm going to set the source equal to user.picture we've already checked to see if we have that so it's safe to not use optional chaining there then we'll say alt for alt text is going to equal user now i'll do optional chaining and i'll say dot name i'm going to press ctrl b to hide that file tree so we can see everything a little bit better too then after that we need to close out that image element so that provides an image if it exists and then i'm going to put an h2 element and inside the h2 element i'm going to once again reference that user all lower case though user optional chaining name if it exists we'll go ahead and use it inside of an h2 after that i'm going to put an unordered list now inside the unordered list i'm going to use object dot keys i'm going to pass in the user information and then we can map over it and so we'll have an object key and i want to say object key there so i don't get confused with the list item key that we're going to use and then we'll also have the index and now we can have a list item here so we'll say list item and it has a key as we iterate through those and then we'll use that object key and then i'll put a colon and then let's reference the value and we'll do that with user and then say whoops not here we need a bracket there we go object key so we actually get the value out of that and i'll press alt z to wrap this as well so we can see everything that's happening here so down here then we have the closing list item tag and we're closing that out and that should pretty much do it so we're going to map over the user information and it's an object so we're passing it to object keys and this should look a little bit better than that json stringify dump so let me go ahead and bring this back over and yeah we can see our page looks quite a bit better here now let's expand that and there is the user information much more readable and i've pulled in my image from github as well so let's sign out again and try the sign in and see how everything looks so now i'll click sign in it shouldn't need my permission again after this but we'll see i've got to click continue with github that's how i choose to do it no it came right back but once again we saw a little bit of a page flash and it said sign in and then it re-rendered and said sign out so let's update that because auth 0 gives us some tools to handle that ok i'm going to resize chrome once again pull it over here to the right and resize visual studio code and get it back to a full screen whoa that's not what i wanted at all here we go back to the full screen still getting used to my larger monitor alright now that we've done that let's go to the app js component and in here we're going to want to import that use auth zero hook as well so use auth0 and now that we have that we need to pull some information from it here so we want to say const and then is loading and air and these will both also come from use auth 0. now if these look familiar it's the same kind of logic that we would use in a use axios or use fetch hook where we get a loading state and an error state and then we can conditionally render some things here inside of our component so i'm going to leave the header where it is but then after the h1 header i'm going to say if we have an error then i want to go ahead and just show this authentication and then put error so we've got a paragraph that says authentication error now the next possibility would be to say if there is no error but we are in a loading state and then we'll go ahead and put another paragraph and just say loading this would be a good spot to actually put a spinner or some type of loading animation if you had a component that did that i'm just putting the loading paragraph so finally here our third option is to say if there is no error and we are not in a loading state then we can put another ampersand or a double ampersand and we want to go ahead and put these components inside of this but they need to be wrapped actually inside of a fragment so let's create that fragment and then we can put these components in there and save for a little bit better formatting and all that looks pretty much like i think it should so let's go ahead and save all of that and come back to our application once again okay i'm going to resize this so it also looks better for now and we'll sign out and try this again and see if we see the flash or not so when we sign in we should get redirected there we go continue with github is what i'm choosing and now we got a little loading and then sign out so we didn't see that flash from the sign in we did see a little bit of flash that showed our loading state but that's expected and okay so overall would i use auth0 well it really depends on the situation if my employer wanted a finished product rolled out quickly and was willing to pay for the auth zero service then yes i would you can absolutely add and deploy features faster but for my own projects i think i would build my own login system to avoid the monthly fees it would also give me more flexibility and control where i wouldn't have to request a feature that didn't exist and then in addition i'd have one more thing to learn from and add to my portfolio and speaking of that remember if you haven't built your own login system yet check out my full react login tutorial series remember to keep striving for progress over perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 73,476

Keywords: React.js User Login and Registration with Auth0, react, react js, reactjs, auth0, user login, user registration, react user login, react user registration, react register user, react js login, reactjs login, user register, react user register, user authentication, auth0 authentication, react auth0, auth0 tutorial, react auth0 tutorial, react user login tutorial, user login react js, react login page with authentication, react login page, login, react auth, react authentication

Id: pAzqscDx580

Length: 25min 28sec (1528 seconds)

Published: Fri Mar 04 2022