MERN Authentication Tutorial #11 - Making a useLogout Hook

Key Takeaways

all right then so in the last video we finished this use sign up hawk and basically we created a sign up function to sign the user up and then when we got this json response we did a couple of things first of all we stored that in local storage under a user property so this includes this response remember a json web token and the email so we stored those two things in json format in local storage so we have that json web token stored now and the reason we do that remember is because if the user crosses off our website and returns a couple of hours later our global state for that user will have reset to null however we can still detect that a user is logged in with the presence of that json web token in local storage this user property right here because that stays so we can detect that and update our state dependent on the presence of that and we'll do that later but after we do that we also update our auth context global states by dispatching this login action right here where the payload is json again this response right here where we have an email property and the json web token the token property so what i'd like to do now is show you how we can log out of the application now i did say at the end of the last video i was going to show you how to create a use login hook but i thought seeing as though we now have that json web token stored in local storage and we're technically logged in the next logical step would be to log out of the application so we're actually going to create a use logout hook now so let's call this use logout.js and then inside here i want to create this and export it so export const use log out and we set that equal to a function and it doesn't need any arguments or anything like that and inside here we want a function called log out and inside that function we don't actually need to send a request to the back end because think about it how do we log out of the application well we have two things in our react application saying that we're logged in the global state and we could easily change that by just dispatching a logout action and also the json web token in local storage and we can delete that as well so if we do both of those things then technically we're logged out because then if we send a request to the back end we're not going to be sending that token or the information from that token to the back end because it no longer exists so we don't need to send a request to the server in order to log out we just need to do those two things update the global state and also delete the token from the local storage so let's do that first of all remove user from storage all right so we can say local storage dots remove item and the item we want to remove is the user item that's what we called it over here so that's the first thing the next thing we want to do is dispatch a logout action now to do that we need to import the use auth context hook so i'm going to do that at the top of the file paste in import use auth context from use auth context and we can now invoke that hook down here and grab the dispatch function from it so that's equal to use auth context all right so now down here we can do another comment to say dispatch logout action and then we can use that dispatch function and the type this time is going to be log out now there's no payload in this case because if we go to the auth context for the case log out we don't need the payload we just reset the user to be null all right so we're doing those two things now and all we need to do is return this function at the bottom over here so we can use it so return oops not in capitals return and we want to return log out all right so now we can use this somewhere in our application but where do we want to use it well i want to have a logout button inside the nav bar so what i'm going to do is come above this div right here and i'm going to create another div and inside here we'll create a button and we'll say log out inside this button and we also need a click handler for this one click set that equal to something and it's going to be called handle click and let's create that function now so const handle click is equal to a function and inside this function we just want to call the logout function so we need to import use logout at the top first import use logouts and this is going to come from dot dot forward slash to come out of this components folder then into the hooks folder and then we want use logout and now we can invoke it down here so we can say const logout is equal to use logout all right so now all we need to do is call this logout function right here so now when we click on this button it should call this logout function that should delete the item from local storage the token and also our global state it should update that so the user becomes null again so that's pretty much it and by the way the reason i've done this in a separate div to this over here is just so that later we're either going to show this the log out button if someone's logged in or these two links if they're not logged in not both at the same time but we'll do that later what i do want to quickly do is style this button inside the css so it looks a bit nicer so let's do it below here i'm going to paste it in the background is white the color is the primary color that's a variable up here this green color scoot this right back down alright so the border two pixel solid primary color again green padding border radius the font families pop ins cursor pointer font size one m so dead simple style so let's save this and preview in the browser all right then so now we can see in our local storage we have this user property so we're kind of logged in where the email is told at netninja.dev and we have the token as well we can see that token over there and down here now if i log out it should delete that but also we should see in the console an update of the auth context state so the user becomes null again so let's log out do that and yep this goes awesome in the console we can see now as well the user is null so now my friends we have successfully logged out of the application so next up we are going to look at logging back in by creating a use login hook