Okay.
So we have authentication in place.
So we can log in and register our user.
And then we control our routes based on a authentication of that user.
But we don't have a way to log out yet.
So what I can do in this video is we will enable logout.
And that's actually very simple.
So first thing first we need to have something to click on to log out.
You can have a button or we can have something else.
In my case what I will do is I will use one of the icons.
So let's search for sign out.
And we have a few icons here.
You don't have to use the same one as I do here, but I will say use this first one.
So I will just click on this one to import it.
So I can go to my code here.
And in app.js, basically what I want to do is I need to have a logout button when I'm logged in, so
I don't need to do it for out.
I need to do it for app.js here, and that's my entire application.
When I have a list of movies and everything.
So I will import that here and I will copy that icon.
And let's say we could have that in a header.
So at the moment we have this in a header, but just below this I can have that icon actually, maybe
I can put that in let's say H1 tag.
So I'll put that icon inside H1 tag here.
And I can put some styles here.
So I will do class name and we will use a tailwind.
So let's say we want to have position absolute in tailwind.
It will be absolute.
And then we can have top.
And let's say we'll have top five which is will be aligned to the top five.
And then right.
And let's do five as well.
So if I will save it now I can go here to my application.
So I'm seeing that here.
This is too small.
So what I could do is maybe.
Three x.
So text three XL maybe.
And this is much bigger now.
So what I can also do is I could have a pointer.
So point cursor pointer.
So if I will hover over it this will be like a button here.
So it will tell the user that this is clickable.
Okay so this is Tyler.
And what I will do is I will have that onclick.
So I will say onclick.
And then we'll have mouse event and then we will trigger something.
So I will do logout user.
So basically we need we need to create that.
Function here.
And that's going to be arrow function like that.
And inside here we need to log out our user.
So how can we do that.
Cookies here use cookies provide us a way to do it.
This is a little bit misleading.
I kind of left it from the previous context, but in fact it's supposed to be a cookie.
And if I'll rename it, maybe that will make a little bit more sense.
So I will change this to cookie.
Like this.
So the first argument here is the cookie.
The second argument is set cookie.
and the third one is to read the cookie.
Of course, you can name it whatever you like.
And I had a token.
But basically this is cookie and we used the cookies here.
This is the name and a default name for for the cookie I'm referring here.
And if I, if I will say cookie this one, it will give me that token.
So I think that naming convention is a little bit off a little bit more sense.
So now if I have that three methods here, the last one is delete cookie.
So if I will copy that and I will do that, of course we will need to use the same here.
So at the moment we could remove more than one cookie at a time.
So I will provide an array.
And the first one and the only one I actually want to remove is Mr. Token.
So basically if I click on that icon I will delete the cookie Mr. token from our cookies.
So to test that I will go to application.
And I have that here.
So if I click it nothing actually happens.
So if I will cancel, if I will refresh it now.
So let's go to application.
And this is gone.
So it wasn't really here.
So I need to log in again.
So it was to remove but I couldn't see it live there.
So let's log in again.
So I will log in and I have that back again.
So if I will click it I don't see any changes here.
But I guess if I will refresh it I will log out here.
So what we could do is we could also provide a way to navigate here.
So it will be the same as this one.
So it's not automatically detected whenever we have it there.
But we can navigate here to to this whenever we log out.
So let's say we will log in back again once more.
And if I will click it now you see I'm back in login.
So this is how you do how to remove a cookie and how to I think if I will refresh it.
So if you click refresh here you should see the new value here.
And this is how we can log out in our application.