Okay, so now we have our login functionality working, but we want to be able to log out.
So there's two things that need to happen when we log out.
One is we need to have a log out endpoint in the users API slice to hit the user's URL slash log out
because that's how we destroy the cookie in the on the server in the back end.
Then we also want a log out in our auth slice that will take care of the local stuff.
So basically just removing it from local storage.
So we'll start with the user's API slice and let's just go right under login and let's add log out.
It's going to be a mutation because it's going to be a post request and we'll say query.
We're going to say URL is going to be user's URL slash log out and then we want to make that a post
request and that's it.
So very simple.
Now to export it, we need to add use and mutation on the beginning and end of the name of the function
or endpoint, which is log out.
So let's say use log out mutation.
And then in the fourth slice, we're going to add in the reducers here.
So after set credentials, let's say log out and that's going to actually take in state and action.
Okay.
And then what we're doing is setting the user info part of the state to null.
So our redux state and then we're removing it from local storage.
Okay, so they have two different purposes.
This is for the local stuff, this is for the server.
So now we have to implement both of those in the header because that's where our logout link is.
So let's go to components, let's go to our header.
And let's see, we're we're bringing in.
What do we need to bring in extra here?
So we need the mutation, the log out mutation.
So let's go.
Right here.
Let's say import.
And we want to do use log out mutation.
And then we also want the log out from the user slice.
So let's say import log out.
From.
And that's going to be from our sorry, our auth slice.
So both of those then we are going to want to navigate.
So let's bring in let's see, do we have anything from React router?
Dom No, we don't.
So let's do that.
Let's import.
Navigate I'm sorry, use navigate from React router dom and then to deal with the state, we need use
selector which we already have and then use dispatch.
Okay.
So because when we call the log out, when we call this, we have to dispatch it.
So now down here.
Let's initialize dispatch and navigate.
So const dispatch equals use, dispatch, const, navigate equals use, navigate.
And then in our log out handler, let's get rid of that.
Let's actually make this asynchronous.
And then we're going to do a try.
Catch.
And in the try.
Let's.
Actually, you know what?
We need to get our mutation function because we brought in use log out mutation, but we need to get
the actual function to call.
So let's go right above the log out handler and we'll say const, and then we'll call this log out API
call.
Set that or just destructure that from use log out mutation and you could call this whatever you want.
So now we want to do that first.
So let's await on the log out API call and since that's going to give us a promise, we just want to
add dot unwrap onto it.
Okay.
And then once we do that, let's then dispatch the logout action, which is just the local stuff, just
clearing local storage.
And then finally we can navigate to let's navigate to the login page.
And then if there's an error, we're just going to do a console log of error.
Actually, let's do, let's keep it consistent and do r.
An IRR.
And I think that should do it.
So let's save.
Export log out.
Imported as logout was not found in auth slice.
Let's see if we go to auth slice.
Um.
Oh, yeah.
We didn't export it here, so just want to make sure we do that.
So let's try it out.
So I'm logged in right now.
I'm going to go ahead and click log out.
And now it brings me to the sign in page.
You can see I no longer have my dropdown here and if we check.
In application.
Uh, where am I going?
Application.
And we look for our Http only cookie.
It's not there.
So it did.
It communicated with the back end.
We can even see that in our network tab.
Actually, we can't unless we do it again.
But it made a request to the back end and then it also cleared it from local storage.
And we can check that out.
If we go to application local storage, you can see all I have is my cart stuff.
We don't have the user.
And just to kind of show you the process again, we'll sign in.
Let's sign in as admin.
Sign in.
Okay, so now this just says admin user because that's what I have for the name.
And if we look in local storage, that user is stored in local storage.
And if I go down to my cookie, you can see that my http only cookie is stored as well.
So I'm logged in.
And then if I log out, that gets destroyed.
So I think that this is not only it's not only more secure than sending your Json web token back to
the client and storing it in local storage, it's not only more secure than that, but it's also easier.
We don't have to worry about sending a token, you know, manually to every protected route because
it's always going to be sent when you store it in Http only cookie, it's going to be sent until it's
destroyed.
So I prefer this way over storing it on the client.
All right.
Now, that's pretty much it as far as our login.
Now what I want to do is make it so that we can register because we don't even have a register page
yet.
So let's do that in the next video.