Full Stack React & Django [7] - Frontend Authentication

alright guys so in the last video we did quite a bit we implemented react router we created our login and register components at least the UI and then we created our auth reducer we created a load user action that will basically check to see if we're logged in with every request with every every time the app loads so and we also created a private route so that we can't access the dashboard unless we login so now what I want to do is jump into actions off j/s and then create an action to actually log in so we're gonna add a couple types as well so in types let's add two types here so one is gonna be login underscore success and then one is gonna be login fail so let's save that and let's go back to our is so under the load user action here actually what I'll do is copy this because there's a lot that's similar so we'll just grab that and paste it in and let's change this will say login user and we're just gonna call this login now for this login we don't need we don't need to check for a token because we're actually trying to get the token that's the point of this so we don't need this get state oops we just want the dispatch since there's only one parameter we can remove the parentheses we don't want this user loading we don't want to try to get the token however we do want the app the content type and the headers we don't want this now this is going to take in a username and password obviously because we need to validate the user against the back end and we want to stringify that content so basically turn it into Jason so let's say request body so create a variable called body set it to Jason dot stringify and we'll just go ahead and create an object here username and password okay same is doing like you know username username password password so now that we have the body let's go down to our request which now is going to be to the login and it's going to be a post request and right here we want to pass the body and as a second parameter and then the config so this will give us a response if it's good then let's fire off login success and payload will be the res data if not then we'll keep the return errors however this we're going to change to login underscore fail ok so now we'll save that and let's handle this stuff within our reducer so we'll go to reducers auth J s and let's bring in login success and login fail now login fail is going to do the same exact thing that auth error does it's just going to remove any tokens and also set everything to no so we can just simply add that here like this ok so that will do that these two will do the same thing as for the success let's see we're gonna add that let's put that right here say case login success so in that case we want to set the token that we get because remember when we said we login successfully it gives us a token so we want to store that so set item and we want to set token and then pass in the token which will be in the action dot payload payload token so that's the first thing we'll do is set that then we want to return on a return our state and let's return the whole payload so action dot payload and then we're gonna set is authenticated to true because we're now logged in and make sure that is loading is set to false all right so we'll save that now of course we need a way to call this login action that we created and that's obviously going to be through the login component so let's go to components accounts login je s and in order to interact with redux of course we need to bring and connect so let's go up here and let's bring in connect from react router not react router react to redux and let's do prop types and then we need to bring in the login action so up two levels into actions and then off we're also going to bring in redirect from react router Dom because if we are logged in there's no sense in being able to go to the login page we want it to redirect to the dashboard all right so let's see let's go down the bottom here and let's create our map state to props all right now for this I could do off state off and then I could call this dot props dot off dot is authenticated but since is authenticated is the only thing that I need I'm actually going to set that as a prop so is authenticated and set it to state auth dot is authenticated alright and then we're going to export default connect and let's pass in here map state to props and then since we're using the login action we're going to pass that in as well okay and then let's add our prop types real quick so up here let's do static prop types and we have our login action so that's a function and then we have is authenticated which is a boolean which is not going to be required all right now obviously we want to fire the the action off in the on submit so let's replace this with this dot props dot login and pass in the username and password which are stored in the component State okay so that should do it let's save and just double check ok so the last thing I want to do is is just redirect if we are logged in so in the render I'm just going to put a simple if statement here and say if this dot props dot is authenticated then let's return redirects to slash alright and that should do it let's save it let's reload okay so obviously the use it's calling load user we're getting our auth error so what I want to do is try to login with some someone that doesn't exist we should get login fail which you can see right here and then let's try with John who does exist and login we get login success and we're redirected to the dashboard so it's doing exactly what it should and if I try to go back to login I can't because of this right here it were authenticated and you can see that if we go in off we have our token stored we have is authenticated true and we have our user so we have access to any of this data and every time I reload it calls that load user right you can see right here user loading and then user loaded the get errors just is just firing off because we still can't access the leads we have to do some stuff later to be able to do that all right but we do have login functionality now I think the next step should be to do the log out okay so we don't have a logout link up here so let's head over to our header let's just close some of this stuff up so it doesn't get too confusing so in header j/s basically we want certain links to show if we're logged in and certain ones to show if we're if we're not logged in so what I'll do is we need to actually check if we're logged in and in order to do that we need to deal with redux so let's import connect okay let's do prop types and let's also well will create the logout action after I just want to at least get the the correct links showing because now that we're logged in we shouldn't be seeing these so let's go down here and let's export default connect okay and we want to map state to props because we need access to off so off state off and let's pass this in here and we'll add it as a prop type it's an object okay so now what I'll do is in the render I'm gonna pull out is authenticated and the user from the from this dot props dot off okay so let's say Const is authenticated and user let's pull that from this dot props dot off okay and then I'm gonna have two variables that hold the the guests links which is the links that should show if we're not logged in in the off links so let's say Const auth links and for this I'm gonna go ahead and grab let's see I'm just going to take this ul right here this whole ul and I'm going to cut it out and I'm going to put it in here and let's also create let's see we'll save that will also create guest links and then I'm gonna paste that in there as well okay now this these are the guest links we can leave that but for the auth links we're gonna have this is going to be a bit different we're gonna have a button to log out so let's see we're gonna have Li that can stay however this is going to be a button and this is going to have let's give it a class name of nav - link as well as BTN BTN - info and BTN - SM and let's do text light and this is gonna say log o and we're gonna add an event to this but I just want to get a displaying first so let's go down where the UL was which was right here and let's just put out let's use a ternary operator so we'll put an expression and we'll say if is authenticated then show the off links else show the guests links so let's actually know what this is correct but no the UL actually went shoot where did the UL go knob our brand let's try that okay so that looks good as far as the log outs yeah I think that should be good all right so let's see let's add functionality to this log oh now we're going to need an action first so let's go to actions off j/s and from here let's go under to our log in say log o user and actually we're going to add another type as well so in types we want log out success so change this to log out okay and let's see let's actually copy let's copy the load user because we need the token in order to log out cuz it needs to know which user to log out so I'm going to copy load user and then let's paste that in here change this to log out so we need to do this stuff we don't need the the user loading however we need to check for the token and if the token is there put it in here and then make a request to off log out and we actually need to pass in null as a body for this to work this actually got me stuck for a while but we need to just pass in null as the as the data as the body all right and then we're gonna dispatch log out success and we don't need to send anything so log out success if there's any errors then we're just gonna do our return errors all right so let's save that and then let's go to our reducer and handle the log out success so let's go to or is it reducers off and we'll bring in log out success and I all it's going to do is the same as auth error and log in fail it's just gonna clear everything out and of course on the server side it's going to destroy that token so it's say log out success and there we go so we'll save this now back in our header we're gonna bring that action in so let's import log out actually I'm sorry dot dot slash actions slash off we need to add that logout down here that let's add it as a prop type prop type stock funk okay so let's see where we want to call this we actually need to create an on click on this button right here this logout button so simply say on click equals and let's call this dot props dot logout which we'll call the action okay we don't need to send anything along with it it should just call it it should clear everything out we should be all set so let's reload and let me just make sure there's no strange errors good and then let's try it so we'll click logout okay so it looks like we're getting some errors here 401 authentication credentials are not provided they shouldn't have been because we call logout we get the token add the token to the header we call API auth logout add the config here hmm oh we need to put a forward slash keep forgetting that let's try that I reload no that didn't work either still getting a 401 we try and clear my cache API auth logout null config I'm not sure what's what's wrong here oh is it the request yes it is it's the get we need to move this needs to be a post request all right log oh there we go and you can see down here fired off logout success and if we look at our off now everything is null and false good so we can now log in and out now there's a couple extra things I want to do here one when we have a bad log in I want it to tell us that like right now if I do Brad which doesn't exist and login it doesn't show us anything in the UI it shows us down here but normal people aren't going to have their Redux tools open so what I'll do is if we take a look at the error so if you look at errors message we have this non filled errors it says incorrect credentials so remember our alerts component so we can go into let's see where is it layouts alerts j/s and we can actually check for this non fields this non fields errors thing here so let's go and it's going to be an error so after this where we check for the message let's actually we'll just copy one of these if statements okay so we're gonna check for error dot message dot and it's called non underscore field underscore errors and then we simply want to alert dot error you can get rid of all this stuff here because we just want to pass in error dot message dot non field errors join which will show this message here okay so let's save that and let's try that out so now if I reload I try to login with someone that doesn't exist incorrect credentials okay so I know I personally like how we set this error checking up because it's very easy to just simply add an alert just like that you know instead of instead of putting it in each individual component and after having to deal with the error state we just have this single alerts component that we deal with which isn't the prettiest you could probably make this look a little better but I think it's fine for now for a small application okay so let's see let's actually log back in whoops so John okay so now we're logged in another thing I want to do is just show that I want to say like hello and then the username up here so that's in the header so header j/s where we have our what are they off links right yeah we're gonna go in off links and let's go right above the logout button here and we're gonna put in let's see oh we want to do this let's put in a span because in bootstrap if you want to put text you do a span and let's do class name of navbar - text and then I'm gonna put some margin right to push it over so mr3 and then inside the span I'm gonna put some strong tags and inside here we can get the user we have the user right here so we want to check to see if the user is actually there so if the user is there then let's say let's put some backticks and we'll say welcome and then user dot username else then nothing so save that and reload and now it says welcome John okay and welcome whoever is logged in now another thing I want to do to kind of clean up our code a little bit if we go to our actions and we look at the law go we have we're getting the token setting the headers and then checking for the token and adding it to the headers we're doing the same exact thing in load user getting that right here getting the token setting the headers adding the token and we're going to be doing this with any routes that are protected so I'm going to just create a separate function that will handle this so let's go down let's actually copy these three parts so getting it creating the headers and adding the token and we'll go down to the bottom here and let's say setup con fig with token and this is a helper function so we'll do export so we can use it in other files as well Const we'll call this token config and this is gonna be an arrow function and it's gonna take in get state because we need that to check for the token and then let's paste in those three things here and at the end we simply want to return the config like that all right so now instead of let's go up to the the logout which is right here instead of doing all this we can actually now get rid of this these three steps and where we have this config right here we'll just do token config and we need to just pass in get state which comes from right here okay so I think it just cleans it up and we can just copy this this token config get State go up to the load user get rid of those three parts and pass that in and we should be able to do the same thing so if we reload everything should still work good all right so the last thing we have to do is registration okay so we would need to be able to register a user well I shouldn't say the last thing we have two main things to do registration and then we need to send our token to the leads the leads end points in order to load them and in order to add them okay those are the two major things we have left so let's let's create an action to register a user okay so we need to type for that or we need two types we're gonna have register success and register fail so let's copy these down and we're gonna have register success and let's do register fail so close that up and let's go to our actions are off actions and let's see we'll go down below let's go above logout and below login and I'm gonna I'm just gonna copy for register I'm gonna copy let's see which one is pretty similar here let's little copy the login so this whole login action I'm going to copy that and paste that in and let's change this to register user change this to register now this is going to take in a instead of just passing in a string of username and password we're going to pass in an object that has a username password and email so we want to D structure that with curly braces so we'll take username password and email and then let's see we're gonna want to set our headers okay remember we're registering so no need to check for a token or anything like that we're registering in order to get a token we do want to create our request body so we'll keep this except we're gonna add email to it let's add that right here I'm just gonna make this a little thinner okay now as for the request we're gonna make a post request to off register and send in the body in the config and then if it's successful we'll go ahead and dispatch register success if not we're going to return errors and then we're also going to dispatch register fail so pretty simple action let's save this now let's go to our reducer and figure out what we need to do here as far as register and fail now basically we already have what we need we're just going to add to this login success right here we're going to do the same exact thing if it's register success okay and that brings it in this is actually pretty cool I'm not sure which extension does it I think it's the es7 react Redux but if I add like I didn't have register success brought in but it did it automatically so if I go down here and I add case register fail and you'll see that now it brought it in automatically so that's that's actually pretty cool so register fail is gonna do the same stuff just clear the token set everything to null and false so we'll save that now of course we need to call this this register action and that's going to be done through the register component so let's head over there we'll go to accounts register j/s and we're gonna be doing a lot of the same stuff we did in the login so if I go open the login gonna bring in all this stuff here so we'll go ahead and paste that in except we're bringing in the register action alright and then down at the bottom it's actually copy from login this whole thing here because if we if we're logged in we also want to redirect to the dashboard there's no need to go be able to go to the register page so we'll copy that we'll put that in register okay of course we need to change this to register and this but we're still getting is authenticated as a prop so at our prop types which I'll copy from login static prop types and put that right here and we'll just change login to register all right now on submit is obviously where we want to call the register method but remember we have a password and a confirm password and we want to do that check in here I don't want to do that checking within the action so we will be using the create message action in this component so I'm going to bring that in as well so let's say create message from action / message alright and then inside the on submit just get rid of that and then let's pull from the state password and password - alright and then what we'll do is just quick check so if password is not equal to password - then we're gonna go ahead and say this dot props dot create message and it's going to be an object remember the message is an object and we'll just call it passwords not match and then for the text will say passwords do not match now in order to use this create message we also have to bring that in down below because that's an action like that alright so we'll go back up here and let's put an else and for now we'll just do a console log submit cuz I just want to test this out now it's gonna send this password do not match but we need to catch it in the alerts all right so let's head over to alerts j/s and in the component did update we want to go down to where the messages are and whoops let's go right here and actually just copy this down and we're gonna check we're going to say if message dots passwords not match then we want to alert it's actually going to be an error form so alert dot error and message dot passwords not match okay and that should do it so let's save and let's reload this and let's just put some stuff in here and not match the passwords okay so let's see create message was sent and it's inside our messages why is it not getting caught here so messages oh it's password not match so let's just change that alright so let's try that again we'll reload passwords don't match good now if they do match we can close up alerts now we should be done with that should be done with login so in here if passwords do match then we want to call the the register action now before we call that we need to format a new user which is going to include all this stuff in the state they use your name email and password so let's pull out from the state's actually no we can do that right up here so we'll pull out username email so basically everything from the state and then down here let's create a new user object and we want an email username and password okay and then we just want to call this dot props dot register which is going to call that register action and we want to pass in a new user remember it takes in an object with the username email and password and it's catching it right here okay so it's going to catch it it's going to go ahead and stringify it it's going to make a request to register and then determining on if it's if everything is okay it'll be register success or register fail if it's register success in our reducer it's going to add the token because we get the token back from a registration and then it's going to just set everything to true it's going to basically log us in all right so there's a couple things that I I missed that we need to check and that is in the actions I didn't bring in register success and register fail so we want to make sure we bring those in and then also if we look at the register we're bringing in username password and email right this is the action however if we go in the register component we sent email username password so let's let's match that order so username password email so I'm just gonna say username password email all right we'll save that so hopefully this works let's reload and I'm gonna try this again okay so and that still didn't work let's see what we got register fail is not defined yes it is no bring it in the register fail huh did I not save this maybe I didn't save it let's try it again bad requests let's check Oh Redux okay so it's calling we're just to fail and our message Oh username a user with that username already exists so I must have already registered Brad okay so we need to handle this error obviously so it's message dot username so let's go into alerts I mean that it might have worked for you guys if you didn't already have the have a user or whatever you entered so I'm going to go to components alerts and let's check for that error so it's it's user name that's the the key here so I'm just gonna copy one of these and let's go to the bottom here and we'll say message dot user name and then all we don't need to put these the stuff here we just want the error message dot user name dot join take that away all right so now if I try that again it should give me an alert saying that username is taken okay so let's try a different one then let's say Brad one I know that's not taken okay so it logged us in you can see up here however we forgot or I forgot to redirect in the register if we're logged in so let's go to register J s and we just want to do the same thing that we did in the login so in the render here let's say if this dot props dot is authenticated then we want to return redirects to slash okay so that should work and you can see it redirected us alright so now once you register it'll automatically redirect you and you can see we're logged in now is Brad one so I'm sorry about the little hiccup there guys like I said this is there's a lot of code here there really is so it's not gonna like a clean cookie-cutter tutorial but you know try to make it the best I can all right so the last thing we want to do is is we need to be able to add leads and get leads so we need to change the lead actions a little bit let's see inside lead actions or actions leads I should say and let's just get rid of I'll close this stuff up now we're gonna need to send along our token and if you remember inside of our auth actions here at the bottom we have this token config function and we're exporting it so we can bring it in to our leads so let's go ahead and do that let's say import token config from dot slash off alright and now when we go down we get the leads let's go ahead and wrap this dispatch because remember we need that get state to get the token so we want to pass that in and let's say we want to EXCI Oh stock get and we're gonna pass in along with that the token config and then pass in that get state ok so any any routes that are protected you just want to pass this in this will send the token along with it and then I think everything else should be fine so let's save that and let's reload now we haven't added any leads so it would make sense that none would show and we're not going to be able to add a lead yet because again we need to send the token we need to send a token for all of these delete add and so on so for the delete let's do the same thing let's do get token or what is it token conf I'm sorry gets state and then we want to pass in token config here so in the delete token config and then pass in get state okay and then this should all be the same so for the ad lead we want to do the same thing want to pass in what do I keep doing that gets state get state and then we're adding the lead so we want to put that the config is the last parameter here which will be token config pass in get state all right let's save this and let's reload now if I open up my console there's no more 401 error so it should it is getting leads we just don't have any so let's try to add a lead and let's let's open up Redux while we do that and you can see yeah you can see get leads is now getting called instead of the error so let's just say I don't know Kevin Smith I'll say Kevin at yahoo.com contact Kevin on Saturday and submit so we got add lead action and if we go down there's Kevin Smith alright let's add one to make sure we can delete just put whatever okay so now we should be able to delete so you can see the alerts are working so delete good now if I log out and I log in as someone else I shouldn't be able to see Kevin Smith because of the way that the backend works so let's log out and log in as John and you can see our lead that we added as Brad one is not here so we can go ahead and add a new lead let's just say Matt Johnson we'll say Matt and yahoo.com and submit and Matt gets added okay and if I log back out log back in is Brad one whoops wrong password and now we can only see Kevin we don't see Matt all right guys so hopefully you enjoyed this series I know that it was it's a lot of code we wrote a lot of code it took up what this is seven videos that are like 4050 minutes a piece so you know hopefully you learned quite a bit in the back end in the front end and don't worry about it if there's parts of it you don't understand just kind of you know the parts you don't understand do some research on those tutorials that are in the description are really helpful they might explain some things that I didn't but hopefully most of the stuff was pretty clear and if you made it all the way to the end congratulations and I thank you for watching I really really appreciate it alright so I'll see you in the next video guys

Channel: Traversy Media

Views: 82,106

Keywords: react authentication, react login, react, redux

Id: kfpY5BsIoFg

Length: 47min 11sec (2831 seconds)

Published: Thu Jan 31 2019