WEBVTT 00:00.020 --> 00:00.380 Hey guys. 00:00.380 --> 00:06.380 So in this video you're going to see how can we actually log out the user. 00:06.380 --> 00:12.650 But first what we are missing here is we don't really have a sign in link. 00:12.710 --> 00:15.560 That's why this is the thing I'm going to add. 00:15.560 --> 00:18.200 First we need an alternative here. 00:18.200 --> 00:23.600 And let me just add a link to the login page. 00:24.290 --> 00:27.050 Why won't we just call it log in. 00:28.880 --> 00:31.250 So it should look like this I'm not authenticated. 00:31.250 --> 00:34.460 I should be able to go to the login page. 00:34.460 --> 00:38.300 And then we are going to implement this step. 00:38.330 --> 00:41.810 We're going to clear the user ID from the session. 00:41.840 --> 00:50.840 Or even better we are going to destroy the whole session just to make sure that if we sign out there 00:50.840 --> 00:53.510 are no traces left. 00:55.460 --> 00:58.670 So let's jump to the auth controller. 00:59.480 --> 01:06.460 So we've got the create method for displaying the form the store star method for signing in. 01:07.420 --> 01:08.950 Now let me add another one. 01:08.980 --> 01:11.410 We're going to call it destroy. 01:11.470 --> 01:15.040 So let me add the destroy method. 01:15.070 --> 01:22.900 Now again I'm calling those actions the way they would be typically called in a Laravel application. 01:22.900 --> 01:26.860 I think it makes sense for couple of reasons. 01:26.920 --> 01:33.310 The first is there is a high probability you are going to use Laravel as a PHP developer. 01:33.310 --> 01:38.110 So it's good to be accustomed with Laravel conventions. 01:38.110 --> 01:47.740 And the second reason is I think that the conventions in Laravel are so good that they should be applied 01:47.740 --> 01:49.000 everywhere. 01:49.060 --> 02:00.490 So by naming the actions using the same conventions, we just make it so much easier to understand to 02:00.520 --> 02:04.210 everyone what's happening inside a specific controller. 02:04.240 --> 02:14.190 If we stick to conventions, So create is about displaying a form to create a resource store is creating 02:14.190 --> 02:14.970 that resource. 02:14.970 --> 02:19.050 In our case it is creating an authenticated user. 02:20.010 --> 02:26.970 So destroy would destroy the authenticated user, which means it would destroy his session. 02:26.970 --> 02:29.790 I think it all makes perfect sense. 02:29.970 --> 02:32.820 So we're going to use an hourglass here. 02:32.940 --> 02:38.250 We should have a logout method which we don't have. 02:38.250 --> 02:42.090 And we obviously need to create it. 02:42.510 --> 02:47.190 And then we're going to redirect to a login page. 02:47.190 --> 02:50.670 This also makes sense after you sign out. 02:52.260 --> 02:53.730 So this is void. 02:53.730 --> 02:57.690 So I properly don't return anything from this. 02:58.620 --> 03:01.050 And now let me jump to routes. 03:01.260 --> 03:10.410 So since the logging out is not really a safe operation and it changes the state on the server, we 03:10.440 --> 03:17.250 should not use the get verb for it, because there are a couple of reasons we shouldn't do that. 03:17.280 --> 03:26.460 Once is all the pages that use get verb are vulnerable to cross-site request forgery. 03:26.550 --> 03:31.410 Think I've explained and we protect it from in the previous project. 03:31.410 --> 03:35.460 And we are about to add that to this project as well. 03:35.460 --> 03:40.140 So an attacker might trick you into logging out. 03:40.260 --> 03:46.260 Then some browsers might try to prefetch all the pages. 03:46.260 --> 03:54.840 That or all the links that use the Get request, which might inadvertently lead you to logging out. 03:54.840 --> 04:01.530 Sometimes pages or URLs that use this Get request might also be cached. 04:01.530 --> 04:06.690 So there are a lot of potential problems we might be running into. 04:06.720 --> 04:14.690 That's why operations that do things like this, they change the state on the server, which means calling 04:14.690 --> 04:19.340 them again would not yield the same result. 04:19.370 --> 04:25.580 Which means they are not idempotent, as this is professionally called. 04:25.610 --> 04:32.480 You should at least use post preferably that would be a delete request. 04:32.510 --> 04:38.900 It's not easy to do a delete request from within HTML and forms. 04:39.230 --> 04:41.690 We would have to use JavaScript. 04:41.690 --> 04:44.240 That's why I'm going to use post for that. 04:44.990 --> 04:48.800 So we will have to submit a form. 04:49.490 --> 04:53.390 This leads to auth controller destroy. 04:54.470 --> 04:57.200 Let me add the forward slash here as well. 04:57.950 --> 05:02.630 And now we should implement this method. 05:02.630 --> 05:08.450 So let's jump to the auth class and let's add a static logout. 05:12.350 --> 05:15.560 And I don't think it should return anything. 05:15.560 --> 05:17.110 So it's void. 05:18.250 --> 05:22.270 So the first thing we should do is we should destroy the session. 05:22.270 --> 05:29.470 It's important that if the session should no longer be authenticated, we should destroy everything. 05:29.500 --> 05:33.220 Delete all the data that was inside the session. 05:33.220 --> 05:34.720 That's the first thing we do. 05:34.750 --> 05:37.810 We've got this static user field. 05:37.810 --> 05:40.480 Let's reset it to null. 05:42.730 --> 05:44.110 So we are sign out. 05:44.110 --> 05:45.460 There is no user. 05:45.460 --> 05:47.020 That's actually everything. 05:47.020 --> 05:53.590 We just made sure that everything from the session is being wiped out. 05:55.600 --> 05:59.170 Now we should jump to the layout. 05:59.170 --> 06:10.450 And since that's a Post request or this logout route is using the Post method, it can't be just a link. 06:10.510 --> 06:22.140 So a elements can't direct you to a URL uri that is using a Post Request here. 06:22.140 --> 06:23.850 We need to submit a form. 06:23.850 --> 06:31.950 Yes, that is extra work, but I just want you to use the best security practices. 06:31.950 --> 06:36.930 So there is no way we're going to use a link to perform a logout. 06:36.930 --> 06:41.700 That's why we just need to go ahead and add this form. 06:43.350 --> 06:50.190 So the form action is forward slash logout. 06:51.900 --> 06:54.390 We need to submit this form. 06:54.780 --> 07:01.350 So let me add a button I'm going to call it logout. 07:02.790 --> 07:08.520 It's important that the method here is post. 07:11.430 --> 07:18.300 And let me just add the user email and remove this link. 07:18.300 --> 07:27.210 Now sure this won't look perfect but in reality You can style the buttons the way that they look like 07:27.210 --> 07:31.200 links, so I don't think there should be any problem. 07:31.620 --> 07:33.840 Now let's see how does it work? 07:36.210 --> 07:40.980 So let me authenticate using admin example.com. 07:42.210 --> 07:43.890 Let me check the password. 07:44.070 --> 07:46.350 So that's admin example.com. 07:46.350 --> 07:49.140 The password is admin 123. 07:49.470 --> 07:51.960 Let's see if everything works fine. 07:53.010 --> 07:53.280 Okay. 07:53.280 --> 07:56.370 So yeah that's not perfect. 07:56.370 --> 07:59.550 But at least we are safe. 07:59.550 --> 08:04.920 And as I've said it's totally not hard to style this button the way. 08:04.920 --> 08:07.140 So it looks like a link. 08:07.800 --> 08:11.070 Now let's verify if the logout works. 08:11.070 --> 08:17.220 And then later on we might worry about styling our page a little bit better. 08:17.310 --> 08:25.710 So I'm pressing the link and we were signed out properly, which confirms that everything works fine.