WEBVTT 00:02.240 --> 00:02.660 Okay. 00:02.660 --> 00:04.910 So we have authentication in place. 00:04.910 --> 00:07.010 So we can log in and register our user. 00:07.010 --> 00:12.140 And then we control our routes based on a authentication of that user. 00:12.140 --> 00:14.600 But we don't have a way to log out yet. 00:14.600 --> 00:18.440 So what I can do in this video is we will enable logout. 00:18.440 --> 00:20.060 And that's actually very simple. 00:20.060 --> 00:23.480 So first thing first we need to have something to click on to log out. 00:23.480 --> 00:26.300 You can have a button or we can have something else. 00:26.300 --> 00:29.720 In my case what I will do is I will use one of the icons. 00:29.720 --> 00:32.180 So let's search for sign out. 00:34.730 --> 00:36.410 And we have a few icons here. 00:36.440 --> 00:41.570 You don't have to use the same one as I do here, but I will say use this first one. 00:41.570 --> 00:44.420 So I will just click on this one to import it. 00:44.720 --> 00:46.340 So I can go to my code here. 00:46.340 --> 00:52.070 And in app.js, basically what I want to do is I need to have a logout button when I'm logged in, so 00:52.070 --> 00:53.780 I don't need to do it for out. 00:54.260 --> 00:58.700 I need to do it for app.js here, and that's my entire application. 00:58.700 --> 01:00.650 When I have a list of movies and everything. 01:00.650 --> 01:05.450 So I will import that here and I will copy that icon. 01:05.990 --> 01:08.840 And let's say we could have that in a header. 01:08.840 --> 01:16.290 So at the moment we have this in a header, but just below this I can have that icon actually, maybe 01:16.290 --> 01:22.590 I can put that in let's say H1 tag. 01:22.620 --> 01:26.700 So I'll put that icon inside H1 tag here. 01:26.700 --> 01:28.620 And I can put some styles here. 01:28.620 --> 01:32.220 So I will do class name and we will use a tailwind. 01:32.220 --> 01:36.300 So let's say we want to have position absolute in tailwind. 01:36.330 --> 01:37.890 It will be absolute. 01:40.650 --> 01:43.350 And then we can have top. 01:44.010 --> 01:50.010 And let's say we'll have top five which is will be aligned to the top five. 01:50.010 --> 01:51.900 And then right. 01:51.930 --> 01:53.970 And let's do five as well. 01:53.970 --> 01:58.350 So if I will save it now I can go here to my application. 01:58.350 --> 01:59.970 So I'm seeing that here. 01:59.970 --> 02:01.080 This is too small. 02:01.080 --> 02:03.210 So what I could do is maybe. 02:06.210 --> 02:07.470 Three x. 02:07.470 --> 02:10.140 So text three XL maybe. 02:11.580 --> 02:13.470 And this is much bigger now. 02:13.470 --> 02:17.250 So what I can also do is I could have a pointer. 02:17.550 --> 02:20.830 So point cursor pointer. 02:20.860 --> 02:25.180 So if I will hover over it this will be like a button here. 02:25.180 --> 02:28.060 So it will tell the user that this is clickable. 02:28.090 --> 02:30.280 Okay so this is Tyler. 02:30.280 --> 02:34.900 And what I will do is I will have that onclick. 02:34.900 --> 02:36.940 So I will say onclick. 02:37.600 --> 02:42.520 And then we'll have mouse event and then we will trigger something. 02:42.520 --> 02:45.760 So I will do logout user. 02:46.870 --> 02:51.520 So basically we need we need to create that. 02:53.950 --> 02:54.940 Function here. 02:54.940 --> 02:58.780 And that's going to be arrow function like that. 02:59.080 --> 03:02.500 And inside here we need to log out our user. 03:02.500 --> 03:03.820 So how can we do that. 03:03.850 --> 03:07.030 Cookies here use cookies provide us a way to do it. 03:07.030 --> 03:08.710 This is a little bit misleading. 03:08.710 --> 03:14.230 I kind of left it from the previous context, but in fact it's supposed to be a cookie. 03:14.230 --> 03:17.350 And if I'll rename it, maybe that will make a little bit more sense. 03:17.350 --> 03:20.470 So I will change this to cookie. 03:20.470 --> 03:20.890 Like this. 03:20.890 --> 03:24.010 So the first argument here is the cookie. 03:24.040 --> 03:26.590 The second argument is set cookie. 03:27.810 --> 03:32.340 and the third one is to read the cookie. 03:32.370 --> 03:34.650 Of course, you can name it whatever you like. 03:34.680 --> 03:35.610 And I had a token. 03:35.610 --> 03:39.180 But basically this is cookie and we used the cookies here. 03:39.180 --> 03:43.620 This is the name and a default name for for the cookie I'm referring here. 03:43.620 --> 03:47.550 And if I, if I will say cookie this one, it will give me that token. 03:47.550 --> 03:52.290 So I think that naming convention is a little bit off a little bit more sense. 03:52.290 --> 03:57.870 So now if I have that three methods here, the last one is delete cookie. 03:57.900 --> 04:05.310 So if I will copy that and I will do that, of course we will need to use the same here. 04:05.310 --> 04:10.860 So at the moment we could remove more than one cookie at a time. 04:10.860 --> 04:12.390 So I will provide an array. 04:12.390 --> 04:18.750 And the first one and the only one I actually want to remove is Mr. Token. 04:18.780 --> 04:25.770 So basically if I click on that icon I will delete the cookie Mr. token from our cookies. 04:25.770 --> 04:29.700 So to test that I will go to application. 04:29.850 --> 04:31.350 And I have that here. 04:31.380 --> 04:34.140 So if I click it nothing actually happens. 04:34.140 --> 04:37.540 So if I will cancel, if I will refresh it now. 04:37.630 --> 04:40.330 So let's go to application. 04:40.330 --> 04:42.160 And this is gone. 04:42.160 --> 04:44.740 So it wasn't really here. 04:44.740 --> 04:45.790 So I need to log in again. 04:45.790 --> 04:48.820 So it was to remove but I couldn't see it live there. 04:48.820 --> 04:50.320 So let's log in again. 04:52.750 --> 04:56.830 So I will log in and I have that back again. 04:56.830 --> 05:00.760 So if I will click it I don't see any changes here. 05:00.760 --> 05:04.810 But I guess if I will refresh it I will log out here. 05:04.810 --> 05:10.510 So what we could do is we could also provide a way to navigate here. 05:10.510 --> 05:12.400 So it will be the same as this one. 05:12.430 --> 05:16.060 So it's not automatically detected whenever we have it there. 05:16.060 --> 05:19.990 But we can navigate here to to this whenever we log out. 05:19.990 --> 05:22.720 So let's say we will log in back again once more. 05:26.050 --> 05:29.800 And if I will click it now you see I'm back in login. 05:29.830 --> 05:37.240 So this is how you do how to remove a cookie and how to I think if I will refresh it. 05:37.240 --> 05:40.570 So if you click refresh here you should see the new value here. 05:40.570 --> 05:43.900 And this is how we can log out in our application.