1 00:00:00,230 --> 00:00:05,390 Okay, so now we have our login functionality working, but we want to be able to log out. 2 00:00:05,390 --> 00:00:08,780 So there's two things that need to happen when we log out. 3 00:00:08,810 --> 00:00:17,450 One is we need to have a log out endpoint in the users API slice to hit the user's URL slash log out 4 00:00:17,450 --> 00:00:22,070 because that's how we destroy the cookie in the on the server in the back end. 5 00:00:22,100 --> 00:00:26,960 Then we also want a log out in our auth slice that will take care of the local stuff. 6 00:00:26,960 --> 00:00:29,900 So basically just removing it from local storage. 7 00:00:29,900 --> 00:00:36,740 So we'll start with the user's API slice and let's just go right under login and let's add log out. 8 00:00:36,770 --> 00:00:42,560 It's going to be a mutation because it's going to be a post request and we'll say query. 9 00:00:42,590 --> 00:00:49,280 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 10 00:00:49,280 --> 00:00:51,890 request and that's it. 11 00:00:51,890 --> 00:00:52,940 So very simple. 12 00:00:52,940 --> 00:01:00,660 Now to export it, we need to add use and mutation on the beginning and end of the name of the function 13 00:01:00,660 --> 00:01:02,400 or endpoint, which is log out. 14 00:01:02,400 --> 00:01:07,050 So let's say use log out mutation. 15 00:01:07,680 --> 00:01:11,790 And then in the fourth slice, we're going to add in the reducers here. 16 00:01:11,790 --> 00:01:20,160 So after set credentials, let's say log out and that's going to actually take in state and action. 17 00:01:22,320 --> 00:01:22,710 Okay. 18 00:01:22,710 --> 00:01:26,630 And then what we're doing is setting the user info part of the state to null. 19 00:01:26,640 --> 00:01:30,750 So our redux state and then we're removing it from local storage. 20 00:01:31,020 --> 00:01:32,790 Okay, so they have two different purposes. 21 00:01:32,790 --> 00:01:36,870 This is for the local stuff, this is for the server. 22 00:01:37,140 --> 00:01:42,810 So now we have to implement both of those in the header because that's where our logout link is. 23 00:01:42,820 --> 00:01:46,110 So let's go to components, let's go to our header. 24 00:01:46,720 --> 00:01:50,470 And let's see, we're we're bringing in. 25 00:01:51,920 --> 00:01:54,080 What do we need to bring in extra here? 26 00:01:54,080 --> 00:01:56,540 So we need the mutation, the log out mutation. 27 00:01:56,540 --> 00:01:57,710 So let's go. 28 00:01:58,830 --> 00:01:59,560 Right here. 29 00:01:59,570 --> 00:02:01,190 Let's say import. 30 00:02:01,880 --> 00:02:06,050 And we want to do use log out mutation. 31 00:02:06,700 --> 00:02:09,940 And then we also want the log out from the user slice. 32 00:02:09,940 --> 00:02:13,270 So let's say import log out. 33 00:02:15,160 --> 00:02:16,090 From. 34 00:02:16,090 --> 00:02:19,570 And that's going to be from our sorry, our auth slice. 35 00:02:19,870 --> 00:02:24,130 So both of those then we are going to want to navigate. 36 00:02:24,130 --> 00:02:28,270 So let's bring in let's see, do we have anything from React router? 37 00:02:28,270 --> 00:02:29,560 Dom No, we don't. 38 00:02:29,560 --> 00:02:31,120 So let's do that. 39 00:02:31,120 --> 00:02:32,530 Let's import. 40 00:02:33,180 --> 00:02:40,830 Navigate I'm sorry, use navigate from React router dom and then to deal with the state, we need use 41 00:02:40,830 --> 00:02:44,670 selector which we already have and then use dispatch. 42 00:02:45,380 --> 00:02:45,980 Okay. 43 00:02:45,980 --> 00:02:52,790 So because when we call the log out, when we call this, we have to dispatch it. 44 00:02:53,480 --> 00:02:55,490 So now down here. 45 00:02:56,480 --> 00:02:59,630 Let's initialize dispatch and navigate. 46 00:02:59,630 --> 00:03:06,440 So const dispatch equals use, dispatch, const, navigate equals use, navigate. 47 00:03:06,440 --> 00:03:09,920 And then in our log out handler, let's get rid of that. 48 00:03:09,920 --> 00:03:12,260 Let's actually make this asynchronous. 49 00:03:14,030 --> 00:03:15,710 And then we're going to do a try. 50 00:03:15,740 --> 00:03:16,640 Catch. 51 00:03:17,370 --> 00:03:19,020 And in the try. 52 00:03:19,050 --> 00:03:20,070 Let's. 53 00:03:20,920 --> 00:03:21,640 Let's. 54 00:03:23,870 --> 00:03:24,620 Actually, you know what? 55 00:03:24,620 --> 00:03:30,950 We need to get our mutation function because we brought in use log out mutation, but we need to get 56 00:03:30,950 --> 00:03:33,140 the actual function to call. 57 00:03:33,140 --> 00:03:42,200 So let's go right above the log out handler and we'll say const, and then we'll call this log out API 58 00:03:42,500 --> 00:03:43,730 call. 59 00:03:45,400 --> 00:03:51,530 Set that or just destructure that from use log out mutation and you could call this whatever you want. 60 00:03:51,550 --> 00:03:53,560 So now we want to do that first. 61 00:03:53,560 --> 00:04:00,970 So let's await on the log out API call and since that's going to give us a promise, we just want to 62 00:04:00,970 --> 00:04:03,310 add dot unwrap onto it. 63 00:04:06,000 --> 00:04:06,450 Okay. 64 00:04:06,450 --> 00:04:14,670 And then once we do that, let's then dispatch the logout action, which is just the local stuff, just 65 00:04:14,670 --> 00:04:16,050 clearing local storage. 66 00:04:16,050 --> 00:04:20,940 And then finally we can navigate to let's navigate to the login page. 67 00:04:21,149 --> 00:04:26,250 And then if there's an error, we're just going to do a console log of error. 68 00:04:29,340 --> 00:04:32,660 Actually, let's do, let's keep it consistent and do r. 69 00:04:33,920 --> 00:04:35,240 An IRR. 70 00:04:36,430 --> 00:04:38,770 And I think that should do it. 71 00:04:38,770 --> 00:04:40,030 So let's save. 72 00:04:41,060 --> 00:04:42,950 Export log out. 73 00:04:43,950 --> 00:04:47,160 Imported as logout was not found in auth slice. 74 00:04:47,990 --> 00:04:50,450 Let's see if we go to auth slice. 75 00:04:52,170 --> 00:04:52,560 Um. 76 00:04:52,560 --> 00:04:53,040 Oh, yeah. 77 00:04:53,040 --> 00:04:56,580 We didn't export it here, so just want to make sure we do that. 78 00:04:58,250 --> 00:04:59,420 So let's try it out. 79 00:04:59,420 --> 00:05:00,970 So I'm logged in right now. 80 00:05:00,980 --> 00:05:03,290 I'm going to go ahead and click log out. 81 00:05:03,320 --> 00:05:05,660 And now it brings me to the sign in page. 82 00:05:05,660 --> 00:05:10,220 You can see I no longer have my dropdown here and if we check. 83 00:05:11,370 --> 00:05:13,410 In application. 84 00:05:14,360 --> 00:05:15,410 Uh, where am I going? 85 00:05:15,440 --> 00:05:16,100 Application. 86 00:05:16,100 --> 00:05:18,290 And we look for our Http only cookie. 87 00:05:18,290 --> 00:05:19,340 It's not there. 88 00:05:19,340 --> 00:05:20,810 So it did. 89 00:05:20,960 --> 00:05:23,300 It communicated with the back end. 90 00:05:23,330 --> 00:05:26,300 We can even see that in our network tab. 91 00:05:26,600 --> 00:05:28,310 Actually, we can't unless we do it again. 92 00:05:28,310 --> 00:05:33,560 But it made a request to the back end and then it also cleared it from local storage. 93 00:05:33,560 --> 00:05:34,700 And we can check that out. 94 00:05:34,700 --> 00:05:39,260 If we go to application local storage, you can see all I have is my cart stuff. 95 00:05:39,260 --> 00:05:40,730 We don't have the user. 96 00:05:40,730 --> 00:05:44,420 And just to kind of show you the process again, we'll sign in. 97 00:05:44,420 --> 00:05:46,130 Let's sign in as admin. 98 00:05:49,780 --> 00:05:50,890 Sign in. 99 00:05:50,980 --> 00:05:54,580 Okay, so now this just says admin user because that's what I have for the name. 100 00:05:54,580 --> 00:06:00,340 And if we look in local storage, that user is stored in local storage. 101 00:06:00,340 --> 00:06:06,010 And if I go down to my cookie, you can see that my http only cookie is stored as well. 102 00:06:06,010 --> 00:06:07,120 So I'm logged in. 103 00:06:08,070 --> 00:06:10,680 And then if I log out, that gets destroyed. 104 00:06:10,680 --> 00:06:18,660 So I think that this is not only it's not only more secure than sending your Json web token back to 105 00:06:18,660 --> 00:06:24,270 the client and storing it in local storage, it's not only more secure than that, but it's also easier. 106 00:06:24,270 --> 00:06:30,090 We don't have to worry about sending a token, you know, manually to every protected route because 107 00:06:30,090 --> 00:06:35,730 it's always going to be sent when you store it in Http only cookie, it's going to be sent until it's 108 00:06:35,730 --> 00:06:36,600 destroyed. 109 00:06:36,600 --> 00:06:42,570 So I prefer this way over storing it on the client. 110 00:06:43,660 --> 00:06:44,110 All right. 111 00:06:44,140 --> 00:06:49,430 Now, that's pretty much it as far as our login. 112 00:06:49,450 --> 00:06:54,070 Now what I want to do is make it so that we can register because we don't even have a register page 113 00:06:54,070 --> 00:06:54,580 yet. 114 00:06:54,580 --> 00:06:56,830 So let's do that in the next video.