Learn The Mern Stack [11] - React Registration

Key Takeaways

alright guys so in the last video we went ahead and we implemented our reducer for the authentication for the errors and what's going on now is it's constantly checking for a token in local storage and then if it's not there then obviously we get our off error okay so is authenticated as false so we're not logged in now what we need to do is create a way to get that token so we need to be able to register we also need a way to log in and get the token and and one thing that I forgot to do that I realized is in our auth reducer on the success here so right here I'll register success and login success we never actually set the token to local storage we're fetching it up here in the initial State we're also removing it when we log out or it's a fail or whatever but we never actually set it so we need to make sure we do that so right here I'm going to say local storage dot set item and we want to set token and we're gonna be setting that to action dot payload dot token because the token is going to be sent as the payload okay so we just want to make sure that we set that to local storage all right now now that's over with let's let's go into components and we want to start to think about creating a login and a register component so I'm going to create a folder and components called off and inside auth let's create a file called our component called register modal dot Jas cuz this is going to be a modal we're using react strap it's basically going to be one of these with all of our you know name email password so since it's gonna be a modal what I'm gonna do is copy everything that we have in the item modal because it's going to be very similar so we'll go ahead and select all of that code and paste that in and starting at the top here we're just going to change out some stuff we want to import all of this for the modal let's see we're not going to need add item I'm not going to need that action for the state we want to have modal we're also going to have a name but we also want email email we want password and then I want to be able to show a message if we have an error so let's say like they didn't provide all the fields or whatever we need a message so I'm also going to put in message in the components state but I'm gonna set that to null by default alright another thing I'm gonna do is I'm gonna bring in prop types so we can set our prop types and let's change the name of the class here to register modal and down at the bottom we want to make sure we export the correct name of the component so right here we want to change that to register modal again we don't need add item and get rid of that now as far as the state that we want to bring in we want to bring in the value of is authenticated because we want to close the modal once we register we want to close it if we're authenticated so I'm gonna add right here is authenticated and I'm gonna set that to state dot off and then I just want the is authenticated value okay another thing I want to bring in is the error State so that we can output the error message so let's do error and set that to state dot ever okay and again this auth this error where I'm getting this from is the reducer if we look at the the route reducer here we have error and off which will give us access to all the stuff within the state of the error and the auth reducer all right so we're setting those so we should probably add our prot types real quick so we'll go up to the top here let's go under state and just say static prop types so we have is authenticated set that to prop types of the HEC prop types dot bool and we're not going to do required because it could be null and then we also want to put in error which is an object so we want to do prop types dot object and is required okay I spelled this wrong so next thing I want to do let's see we're going to keep the toggle we're going to keep the on change this here the submit this was the item modal so we just created a new item and we called add item we're gonna get rid of those for now and then down here we have the button and then the modal that opens with the form now I don't want to button what we're gonna do is put this in the nav bar so we actually want to nav link instead of a button so I'm gonna bring in up here from react strap I'm gonna bring in nav link as well and then I'm just gonna replace this whole button right here we're gonna get rid of that and put in nav link with an onclick handler and we're gonna set that to this dot toggle which opens up the modal and we'll just put an href that goes nowhere and in here we'll just say register that way we can just stick it right in the nav bar now as far as the modal itself will change the header to register and let's see we're going to have the name as the first value so let's say for name name for the label name equals name that's good IDs should equal name placeholder should say name okay we need some other fields as well so I'm going to copy the label on the input and we need two more separate these so we have the name next is gonna be the email you know so type let's do a type of email name ID placeholder okay and then we want the password a password the type should also be password and then the ID and placeholder okay and then this text for the button will say register so that should give us the correct fields I think we should be able to at least display this so I'm gonna save it and like I said we want to display this in the nav bar so I'm gonna go to the app navbar component and I'm gonna bring that in so I'm gonna say import register modal from and we want to go dot slash in the auth folder and then register modal and what we're gonna put this is in place of this github link right here we no longer need this I'm just going to replace it with register modal I remember it's a nav link okay we have nav link here so it's gonna fit nicely right in there so we'll save that and let's go back we have our register component here register modal if I click it it opens it up I do want to separate these a little bit these fields so what I'm gonna do is go back and let's see on each input I'm just gonna put a class name of MB margin bottom three just to separate these out a little bit I won't use single quotes let's be consistent here actually I think prettier would change it anyways when I save yeah okay so that will space them out a little bit good all right now what do we want to happen once we click register we're going to want it to call an action in the off actions file called register so I'm going to go up to the top here and bring that in even though I haven't created it yet I'm gonna say import register from and we want to go dot dot slash dot dot slash into actions and then off actions and in order to use register or any action we have to put it down here and our connect so I'll say register ok and that's gonna be a prop we're gonna access it with this dot props dot register so let's add it to prop types as well so right here register prop types and it's a function so func and is required all right now let's create that action you can see we're getting an error down here because we haven't created it yet so let's go to actions off actions and we'll put this this is the load user this is our helper function to get the token so we'll go right here and let's say register user so Const I actually want to export Const register oops don't wanna cap their register and this is going to take in a couple things it needs to take in the name and email and password so I'm going to D structure it because we're passing in an object so I'm just going to D structure it right here and just say name email password ok and we want our dispatch now we need to we need to add a headers value of content type since we're going to be sending Jason to the server we're going to be making a post request to API slash users that's the endpoint to register we did that you know two videos back so let's create a config let's just put a comment here we'll just say headers so config is going to be an object and then in that object we have a headers object that has a content type and we want to set that to application slash Jason all right now we want to create our request body or request data that we're going to send which is going to be the name email and password so let's say Const body and we'll set this to Jason dot stringify because we're taking a JavaScript object we want to turn it into Jason so we're gonna pass in here an object with name email and password which is the name and email and password that's getting passed in alright so now that we have that we're ready to make our requests so we'll say Axio start post and we want to hit the endpoint of API slash users and we also want to pass in the body ok the data we're sending along and the config which includes the headers information the content type so that'll give us a promise back so we'll do dot then and get the response ok once we get that response we're gonna want to dispatch C we're gonna dispatch the type of register success because if this passes then that means that you know everything went okay the user was created and so on and we want to send a payload to the reduced of everything just res dot data and if you remember that endpoint returns the user data and the token so that stuff's gonna get sent to the reducer now if something goes wrong let's do a catch here get our error so if something goes wrong I want to do two things one I just want to dispatch the type of off error because I'm sorry not off error register fail okay which does the same thing if we look at our where is it our author adieu sir register fail it does the same as off our log and failed login success it removes the token and just basically sets the the auth state back to default we want that to happen if the register fails okay so let's go back to our actions now we're not gonna say we don't need to send the payload with this we just need to let it know that it failed but I also want to use the return errors method that we have in our errors action so this right here takes in a message a status and an optional ID so this is getting exported so we can actually bring this into our auction so up at the top I already did it never mind I'm kind of losing track here so I already did it we actually used it in the load user so I'm just gonna copy this and put that here except I'm actually gonna add an ID at the end it's gonna be a string of register fail and you'll see why I'm doing this later on okay so that should be it so we'll save this and I just want to double-check this okay let's go back to register modal now we brought in register but we're not calling it and of course we want to call it once we submit right now if we submit it's just gonna close the Moto so in this in this component in the submit let's go right here and let's let's get the name email and password from the state so the form data so name email and password we're gonna take that from this dot state and then let's see we want to call the register action actually before we do that let's create a user object so we'll say Const no user and we're gonna construct that with the name email whoops name email and password and then we're gonna call this dot props dot register okay so that we're calling the register action we're gonna pass in new user okay so what this is gonna do is attempt to register now the closed mode modal I'm actually going to get rid of this for now because we only we don't want it to close if there's an error we want to display that error so I'm just going to save this as is and I'm gonna try it out so go ahead and reload here now I want this to throw an error so I'm gonna leave these blank so let's click register and you can see that exists err fail okay and if we look at our state if we look in the error we have the idea of register fail status 400 and if we look at the message this is a little weird how it is it's Mets msg embedded in msg so we'll have to take note of that but it says please enter all fields so this is coming from our back end if we look at our users routes it's coming from right here okay because we hit this is the route we hit API users and we did this stuff is not included so we sent to 400 of with a message of please enter all fields okay so let's go back now that error I want it to display in the modal because the user might not know you know what's going on it's not working but there's no there's no error okay so there's no notification so up above let's see let's let's put this we want to use the life cycle method component did update so I'm going to go right under the prop types and say component did update and this actually takes in next props I'm sorry I want previous props it takes in previous props and next props but we don't need to use next props we basically want to see if the error when we map the arrow state to our props we want to see if it changed at all so let's say Const let's pull out error from the props okay so this is this is available to us because we brought it in down here we mapped the state to props so we have access to this dot props dot error which I just showed you in the redux tools so here we're gonna check to see if anything's changed we're gonna say if error is not equal to the previous props dot error then we want to check for a register error so this is where the ID comes in this is why I added an ID I'm gonna say if register not register if error dot ID is equal to the string register fail then we know we want to output that error so I'm gonna set the state here remember we have that message value so I'm going to set message to error . msg now this might look a little weird dot msg because as i showed you in the Redux tool we have msg and then msg again we could change in the backend and get rid of this key but i'm just gonna keep it as is so we'll go ahead and do that and then we'll have an else so if it's not the register fail error then we don't want anything in that message so we'll just do this dot set state and we'll do msg no now if this message has something in it then we want to output it in an alert so I'm gonna bring in alert from react strap and then go down to our render and right under the modal body and above the form I'm gonna put a ternary operator and check the this dot state dot msg see if there's anything in there if there is then we want to output an alerts and we're gonna say color equals danger this will make it a red alert and then inside that we just want to put the message so this dot state msg else so we want to go after this ending tag here and say else then we'll just do no all right so now if I go back and we go to register and I hit register without filling in fields we'll get an alert now if I close it and go back you can see it's still there so I want to implement that clear errors function that's why I created that or that action so let's bring that in up above so import we want to bring it in clear errors from our actions and this is error actions and we're gonna elicit might as well add that to our prop types while we're here so clear errors which is gonna be prop types dot function or func is required and then we need to add that down way down at the bottom along with register clear errors so now we'll have access to this dot props dot clear errors and where we want to call this is gonna be in the toggle ok this toggle opens and closes the modal so right before we set the state to open or close it we're gonna go ahead and clear it so X actually put say clear errors and we'll say this dot prop start clear errors so now if I go back and we get the error we close this go back and you can see it's gone clear errors ran as you can see over here ok now even if we do a different register error like let's do an email that's already exists like Brad at gmail we get user already exists so the last thing we need to do in order for the whole registration to work to get the token is once we register I want this modal to close on its own so let's go back in and we're going to let's see we're gonna go to component did update and let's go after all this stuff here and let's do and if let's say if we want to make sure that the modal is open so we want to make sure that this value right here is true which means it's open so the way that we can do that is by saying if not I mean I'm sorry if this dot state modal that means it's open and we will also want to make sure we're authenticated so we'll say if now is authenticated is in the props and we did some restructuring up here so we'll just add it here so that we can just simply say if is authenticated then we want to call this dot toggle which will close it okay I believe that will work let's just put a comment here and say if authenticated closed modal all right so let's try it out we'll go ahead and try our register so please enter all fields now let's actually register a user we'll do Kevin Smith okay so once I hit register it should hit the endpoint it should get added to MongoDB which we should get our token back it should get put in the state and we should be basically logged in because it's gonna load the user and it's gonna find the token so let's hit register okay so that closed up now we have no UI difference here but let's check our Redux tools if we look at state and we look in off you can see we have the token is authenticated as equal to true if we look in user we have Kevin Smith alright so we're getting the exact response that we should be getting good so that's all set now the next thing I want to do is I want to be able to basically log out to bring all this state back to its default and clear the token oh so let's work on that next we're gonna go back into vs code and will most likely do the login modal in the next video but again I want to be able to log out here so in components off right here in components off we want to create a file called logout Jas okay so this is going to be a component let's we're going to need to use some state here because we're gonna need to yeah we're gonna need to bring in off I believe hold on well let me just think for a second here uh actually I don't think we need to I think we just need to call logout which will be an action I just I don't have the exact code right in front of me so let's just just generate a component here and yes so we're gonna need a logout action so I'll bring that in even though we haven't created it yet so we'll say logout from actions whoa action slash off actions and we're gonna need connect so let's import connect from react redux okay and then down at the bottom here we're gonna export default connect and let's see I'm just going to put null here for map state two props and then put our logout here okay and then the name of the component which is logout all right now as far as the the render here it's just gonna be an avalanche okay again this is gonna go right in our navbar so let's return let's return let's use a fragment we actually don't need something surrounding it so I'll bring in fragment from react and let's do return fragment and let's put in an avalanche sea nav link with an on-click we're gonna have to bring in a nav link but this is gonna call this dot props dot logout and then let's just put an href that does nothing okay and then we'll just say log out so this nav link we're going to bring in from react strap and I think that's good actually let's do our prop types so do static prompt types and we want to add our method our action of Lago so let's do log out prop types dot func dot is required all right so we'll save this and now let's go to our app navbar and bring this in just like we brought in the register so import Lago from auth slash Lago and then let's go down here and let's see put in another nav item and put in la goats save that what's this logout is not oh we need to create our action so let's go to off actions now as far as the logout goes all we need to do is is send an action type of logout success to our reducer and then that will clear out the token it'll set the state back we're not actually doing anything on the server side so let's create this right here will save Lago user so Const logout we don't need our dispatch let's just do a return of type logout success okay so hope we need to export this can't resolve react strap let's see is it one word yeah okay so let's try this out let's go back so right now I'm just gonna reload this if we look at our state and off we have everything in there token and everything so we're basically logged in by hit log oh it got rid of the token and now everything is set back which is what we want alright so we can register which will then log us in gives us the token sets everything in the auth state and then we can also log out so in the next video we need a way to actually take a user that's already registered and authenticate get the token and so on and then after that we need to make it so that we can send that token along so we can actually do stuff that that authenticated users can do like add an item delete an item we also want to hide some of this stuff if we're not logged in and also the menu obviously we don't want the logout to show if we're actually not logged in so we're gonna do that stuff in the next video which should be the last video all right so I'll see you in the next one