1 00:00:00,050 --> 00:00:05,630 And before we set up the logout functionality in the dashboard layout page, let's also quickly recall 2 00:00:05,630 --> 00:00:08,240 the request we're going to be working with. 3 00:00:08,270 --> 00:00:13,190 So the URL is going to be forward slash auth, forward slash logout. 4 00:00:13,310 --> 00:00:17,360 It's going to be a get request, so we're not going to send anything to the server. 5 00:00:17,390 --> 00:00:22,940 And if we're successful, not only we're going to get the success message, but also there's going to 6 00:00:22,940 --> 00:00:27,930 be no more cookie in the browser since server is going to clear it. 7 00:00:27,950 --> 00:00:33,860 And while we're still working in the dashboard layout page, we might as well also set up the logout 8 00:00:33,860 --> 00:00:40,620 user because we already have the endpoint in place and pretty much this is the most important thing. 9 00:00:40,640 --> 00:00:42,950 So let's navigate to a logout user. 10 00:00:42,950 --> 00:00:44,600 It's going to be async. 11 00:00:44,810 --> 00:00:53,090 And for starters, let's see how we can navigate programmatically to a different page using use, navigate, 12 00:00:53,120 --> 00:00:53,570 hook. 13 00:00:53,600 --> 00:00:55,740 So for starters, let's go up. 14 00:00:55,760 --> 00:01:00,810 We want to import, use, navigate so this is not used navigation. 15 00:01:00,810 --> 00:01:02,190 Please don't mix the two. 16 00:01:02,220 --> 00:01:08,520 So this is use navigate and this is going to be alternative to redirect over here. 17 00:01:08,520 --> 00:01:11,220 And also we want to grab the toast. 18 00:01:11,370 --> 00:01:11,970 And you know what? 19 00:01:11,970 --> 00:01:13,990 I think I'll rely on auto import. 20 00:01:14,010 --> 00:01:18,180 So what do I want to do when we click on logout button? 21 00:01:18,180 --> 00:01:23,070 Well, for starters, we want to navigate to a different page back to a landing page. 22 00:01:23,070 --> 00:01:23,630 Correct. 23 00:01:23,640 --> 00:01:30,530 So in here I want to invoke my use, navigate hook, and I want to set it equal to some kind of variable. 24 00:01:30,540 --> 00:01:36,390 So I'm going to go here with use, navigate, and just like with redirect, basically we just want to 25 00:01:36,390 --> 00:01:40,620 run it and pass it where we want to navigate. 26 00:01:40,620 --> 00:01:46,110 So when we click on Logout User, I want to navigate back to the home page, back to the landing page. 27 00:01:46,110 --> 00:01:49,170 That's why I'm going to go here with Navigate and then forward Slash. 28 00:01:49,170 --> 00:01:53,550 Also, we want to go with Await and make a request. 29 00:01:54,020 --> 00:01:55,970 To a logout route. 30 00:01:55,970 --> 00:01:58,430 Remember, that clears out the cookies. 31 00:01:58,430 --> 00:02:01,040 So you will just go here with custom fetch. 32 00:02:01,310 --> 00:02:02,870 It's a get request. 33 00:02:02,900 --> 00:02:03,940 What is the URL? 34 00:02:03,950 --> 00:02:06,320 It's auth and then logout. 35 00:02:06,320 --> 00:02:10,130 And lastly, let's just display a toast. 36 00:02:10,370 --> 00:02:17,090 So I'm just going to go here with toast, then success and we'll just say logging out, let's save it. 37 00:02:17,090 --> 00:02:20,870 Let's navigate here and notice now I'm logged in as Peter. 38 00:02:20,900 --> 00:02:23,900 Let me click on Logout right away. 39 00:02:23,930 --> 00:02:28,520 Notice in the application how we don't have any cookies. 40 00:02:28,550 --> 00:02:33,140 We don't have the JWT with the info about our user. 41 00:02:33,930 --> 00:02:39,360 And of course, if I want to log in as John, I'm just going to go back over here, log in, and everything 42 00:02:39,360 --> 00:02:39,930 is correct. 43 00:02:39,930 --> 00:02:45,150 So now again, I have my token, I have the JWT and I'm actually logged in as John. 44 00:02:45,270 --> 00:02:47,130 Let me try it one more time with Anna. 45 00:02:47,130 --> 00:02:49,170 Just so you don't think I'm messing with you. 46 00:02:50,410 --> 00:02:51,340 Let's go over here. 47 00:02:51,370 --> 00:02:52,090 Let's submit. 48 00:02:52,090 --> 00:02:55,720 And now notice, of course, now I have a different user. 49 00:02:55,720 --> 00:03:00,340 And with this in place, we can start working on add job functionality.