Add Login/Auth to your React app in 5 mins

so if you want to add authentication into your react application in less than five minutes well in this particular video we will look into a really awesome react library that allows you to opt in and easily integrate authentication into your react application for like safety with cookies gwd and handling all the sending and the redirects with react routes or dom and all that creepy stuff that you are afraid of with this really awesome and plug and play library so the awesome react library is called react authkit and this basically just gives you a full kit to basically be able to add authentication or integrate authentication into your react application without going into like you know spending the time to go to the crap of adding authentication to cookies and saving it and retrieving it and doing all those creepy stuff that you don't really want to do uh because it just it keeps doing it especially if you have like an application that you that's like going to be like super simple you don't have any custom authentication method we're going to want to just customize this studio point authentication so you can easily use that to get it working as fat as possible so this library is very like what i said before and it's very easy it has really good documentation in here so that's actually what i used in here and in fact it actually uses the auth provider or uses the context api the react context api to be able to access and provide all of those through a context and you can access this from anywhere inside of your reacts application so currently my react application looks something like this it's pretty straightforward so authentication obviously what you want to add it to is actually the login form so this is my login form you got an email password you can have as many fields as you want it can all integrated but mostly like for authentication what you need is actually one email or username or both plus of obviously a password in here so that's that's my form in here and of course i'm going to use this form to use it with like the auth kit in here and to basically just integrate everything as like as fat as possible and to be able to go ahead and redirect and control whether the user is often skater or not to be able to do the redirections and all sorts of stuff [Music] so [Music] oh [Music] and before jumping into the actual implementations i want to just like go ahead and take a quick look into the actual server so the api server and of course i'm not going to go ahead and implement that so i already assumed that you already implemented that and you have that ready whether you're using a restful api a fake api i don't know something else like your own custom server so for me in here using express with node.js so i'm building a custom restful api with authentication using passport.js so it's actually pretty simple so just like for the login he uses an email password he checks the email if it does exist and everything and he uses gwt and that's what i use zoom that you can use but you can use it with any other kind of way so the auth key in there the library can work with anything really so gwc obviously is just like the preferred way so you can start in cookies or either on local storage so here i'm just generating the gw token and i'm just returning that on the response as the token and of course on the front end we can go in and access it and store it in the cookies and of course we're not going to do that it's actually the library or the authkit library that's going to take care of this behind the scenes and if you just quickly test this api in here i got the register in here where you can register so you got already thanks for just streaming so this you add like the full name email and password and we try to log in just to enter your password in here and you enter or sorry your email and your password and do send and you're gonna get the token generator for you and of course the token is gonna be like lasted for a certain matter like minutes it can just become a day or so and um yeah so that's that's pretty simple all right nice now let's go ahead and jump into our reacts project and let's try to go ahead and integrate the react auth kit to make authentication work out of the box now first you need to go ahead and install the authkit so you just called react authking in here hit enter and this go ahead like you need to do add sorry for that and yeah that's going to be added for you i already did add that so after finishing this one you're going to have to go ahead and like grab the auth provider so what you want to do is actually go to the index like where you're going to start the rendering process so this is like the roots of our index in here and this is where we try to get like you know render the whole tree of our react components so what the first what we need to do in here is actually to go ahead and use the auth provider you can go and ignore those there's just like they're not neater or something i just care about this auth provider in here so we do auth provider and give you the auth type it could be either local storage or cookie so where to say that obviously a cookie is a lot more safer i got the auth name in here so what is the name of the cookie that it's like is going to store the auth so i just you know you can name it whatever you can have a cookie domain so whether it's like what is the domain name of the current cookie and if the cookie is secure or not so it's going to be only center https so for this one i'm just going to set it to false because we are on development only in here we're not using https but of course make sure to set this to true when you're using https and the other thing i need to make sure you do is actually wrap this off provider you rub this one on top of like the browser router the react dom router in here or the reacts router dom you need to like put that as a child of the auth provider otherwise it won't work properly and if you head over inside of the application itself going to have of course routes i have the home route in here and this route should be a projected route so i'm going to use that later on to basically present this one and we got the login route and this is where the match is going to start happening so if we head over in here this is actually already implemented like most of it we got some components and i'm using the some you know third-party library to do those components so you're already pretty much familiar with that like a login button and input and everything so they are just like basic and straight to the point now the other thing in here what i really um like you need to make sure to do is you've got like an on submit you can use formic or something and using formatting here for state management for like you know form and everything and the main part that you need to focus about is on on the submit so once i'm in here what i'm doing i'm just doing axios post and i'm sending like the values in here to log in to our route to our server in here basically that's that's pretty simple so we got the values in here and it got the response back now once i get the response back that's where the authentication gonna start so this is this is the part where we need to authenticate the user and save the credentials or save the token received back from the login on the cookies and do all of those and this is where the react authkit library is going to come into the play so i'm going to do const sign in i'm going to do use sign in and of course you need to import this you sign in from the react auth kit that we just installed okay awesome now this sign-in function in here this is going to take care of everything from starting to the cookies and authenticating and doing all this kind of stuff so this particular sign-in function is going to take care of everything from authenticating and saving into cookies with all the remitted data so this is like the you know most important part that you need to call in here for the authentication to take place okay now i need to do sign in and i just call this function right here and i just you know provided with some couple of different options in here so the first one we need to provide with the actual dwt token we received from the response so all you simply do is just like response dot data dot token and obviously that's returned by the server so depending on your implementation you need to choose a different property name in here so you can have like expires in so this is like it's going to send what when the cookie is going to actually expire so this is in minutes so i'm going to say for example it's going to expire an hour or something of course you can implement that a little bit better with the server and everything uh maybe you got like a token type so this is it's going to tell that which token type is it so by default it's going to be beer and this is what you want to be for gwt so you're going to use it like a beer token in here and you can provide the off state as well so what the ah state is is basically the information of the user so like for example username and email of course not a password obviously but you might want to do that so for the odd state i'm gonna do values or i'm just gonna do email i'm going to do values.email i'm not going to include the password obviously so this function is going to take care of like sending the cookie and everything now once you call this you are basically ready to go so if you head back to our application here and try to put an email like alexmail.com that we just wrote with and of course i'm going to put the password in here so alex one two three i guess so hit enter as qc immediately like sets the cookies and i'm actually on the application so i'm going to cookies for a local host 2001 and i got into the application lock tab in here and those are the cookies are being saved by the sign in function for us it's pretty nice and if you look at it you're going to have like the auth so this is actually the original auth token for us the arth type and when the actual one's going to be like expire or something and this is the actual data that you store and of course you can access all of those throughout hooks from the askkit library as well and you can easily manage without going into the details and creating custom functions to retrieve this and that and and keep lingering so you can easily and very quickly integrate that now by just looking at the documentation there are a couple of different stuff that you can implement from refresh token to private route and sign-on and everything now what i want to do is actually the private route because it's very important feature now a private route obviously is going to like allow you to protect a particular route so it's just going to be like available when the user is logged in and it's going to redirect you to login if the user hits like a route that is not supposed to go ahead and see or it's just not not authorized at all so this is actually the api it's pretty simple and i want to actually go ahead and implement that so to do that i'm going to go to the up.typescreen here and i'm going to do um so i'm going to have this like go inside okay sorry so i'm going to home and i'm going to do require off and i'm going to put inside of it um i'm just going to do login path and here just like you're providing with a login path so whenever he tries to hit that it's going to go ahead and redirect it to like the login path right you see in here so he says oh you need to log in first or something okay so saving that getting back in here going to the application and if we try for example right now we're actually logged in right we got everything in here saved now if i go to the home which is just for slash click enter it says oh welcome home bud and if i go ahead and clear out all the stuff in here and i just go ahead and refresh it's going to take me back straight into the log game because it knows that oh i'm not logged in so i just took me back there navigate me back there and then this is of course just working alongside the react router dom also for example you got like a logout button inside of the home or whatever you want to do it i'm just using like a a simple example in here so i'm gonna either log out or sign out so i'm going to do a use sign out and this is another hook and i love actually using hooks it just makes things super easy and super fast to like integrate so i'm going to do sign out in here and this will go ahead and like sign out from from the page and just take us back and if you want to take this even further you can go ahead and like use the navigate from the reacts like router doms i'm going to use navigate do another function called log out and here i'm going to do sign out first then i'm gonna call navigate back to the login path right and this would be a little bit more robust for us so i'm gonna go ahead and just like replace this one with this and if i just try to log in right now i'm gonna have this saved i'm gonna go to home and now if i click log out it's gonna take me back in and just like refresh this one because they're just completely deleted so that means the user is no longer authenticated or logged in and for example if you want to send the request after authenticating your rx application with the cookies that are already saved so if you have like your server for example right here i have my server using cookies so it actually supports getting the gwt from the cookies and parsing and doing all those ads so make sure your server does handle that first properly before jumping into in the next step and then for example here all you need to do for example you got another button that's gonna like after you authenticate on your home page in here you can have like get payments and this just does a request to the payment api with credentials and you must include with credentials so like axios or any other you know http client in here can actually send the co keys alongside the request in here and of course the response is going to have like it's going to be passing through correctly it's going to be authenticated and everything so it's going to work 100 so for example if you try this out as closely we are already logged in if we do like get payment in here i'm going to get the response back like there you have total of like two four hundred dollars whatever so there's actually passing if you get to the network in here go to payment you're gonna see i look at the cookie section you see that all the cookies are being sent through and it's being like completely authorized to get into that request

Channel: CoderOne

Views: 204,658

Keywords: react, react-router, react-router-dom, react auth, react authentication, react login, react register, react login register, react authorization, react cookies, react jwt, react jsonwebtoken, react auth cookies, react auth jwt, add login react, add register react, react login form, react register form, login form, login ui, register form, register ui, react log in, passportjs, passport js, nodejs authentication, nodejs auth, react node auth

Id: wr3VmbZdVA4

Length: 13min 35sec (815 seconds)

Published: Mon Sep 12 2022