1 00:00:00,170 --> 00:00:00,680 Okay. 2 00:00:00,890 --> 00:00:07,760 Before we set up loader in the dashboard layout page, let's quickly recall the request we're going 3 00:00:07,760 --> 00:00:08,840 to be working with. 4 00:00:08,870 --> 00:00:14,810 So the URL is going to be forward slash users, forward slash current user. 5 00:00:14,960 --> 00:00:16,940 It's going to be a get request. 6 00:00:16,940 --> 00:00:18,620 So the method is going to be get. 7 00:00:18,650 --> 00:00:20,720 We're now going to send any data. 8 00:00:20,810 --> 00:00:28,430 And as far as the response, if everything is correct, if the cookie is valid, if the JWT is valid, 9 00:00:28,430 --> 00:00:32,000 we're going to get info about the current user. 10 00:00:32,420 --> 00:00:36,470 Everything starting with ID all the way up to the role. 11 00:00:36,620 --> 00:00:37,040 All right. 12 00:00:37,040 --> 00:00:43,760 And once we're familiar with the basic loader setup, now let's set up a proper request to get the current 13 00:00:43,760 --> 00:00:44,450 user. 14 00:00:45,110 --> 00:00:47,390 And it's going to accomplish two things. 15 00:00:47,480 --> 00:00:53,840 First of all, we'll get the user info because again, please keep in mind we're not storing this data 16 00:00:53,840 --> 00:00:56,240 anywhere on the front end. 17 00:00:56,510 --> 00:01:00,060 Remember, everything is located actually in that token. 18 00:01:00,060 --> 00:01:05,580 So in order to understand what is the current user, yes, we want to make that request back to the 19 00:01:05,580 --> 00:01:06,300 server. 20 00:01:06,330 --> 00:01:07,290 That's number one. 21 00:01:07,290 --> 00:01:15,900 Number two, if there's some kind of error, let's say the token is invalid or a cookie is invalid, 22 00:01:15,930 --> 00:01:16,770 what happens? 23 00:01:16,770 --> 00:01:19,190 Well, we have that auth middleware, correct. 24 00:01:19,200 --> 00:01:27,870 So if we're not able to get the current user, we'll actually log out the user from our application, 25 00:01:27,870 --> 00:01:30,220 essentially from our dashboard. 26 00:01:30,240 --> 00:01:34,920 So at the end of the day, it's going to provide two functionalities the info about the current user 27 00:01:34,920 --> 00:01:42,600 as well as the authentication for our dashboard one, because like I keep saying in the dashboard we 28 00:01:42,600 --> 00:01:44,890 have all of the functionality. 29 00:01:44,910 --> 00:01:46,980 So let's start working on it. 30 00:01:47,130 --> 00:01:53,100 First of all, I'm going to make this async since we're going to make the request. 31 00:01:53,290 --> 00:01:55,770 Then we want to set up, try and catch. 32 00:01:56,460 --> 00:01:59,580 And for starters we want to go with const. 33 00:02:00,510 --> 00:02:05,880 And I'll right away the structure, the data, because this is going to be the case where we will pass 34 00:02:05,880 --> 00:02:10,020 the user info down to a dashboard layout. 35 00:02:10,020 --> 00:02:14,510 And remember, we're getting back giant object and there we're looking for the data. 36 00:02:14,520 --> 00:02:16,740 Now which request do we want to make? 37 00:02:16,740 --> 00:02:18,690 Well, we're going to go with Await. 38 00:02:19,340 --> 00:02:21,350 Then custom fetch. 39 00:02:21,350 --> 00:02:29,240 So we import that and then we're looking for get request and we'll go with forward slash users. 40 00:02:29,240 --> 00:02:32,420 And then we want to go with that current user. 41 00:02:32,810 --> 00:02:40,340 And again, please keep in mind whenever we log in, remember we get the cookie and then in that cookie 42 00:02:40,340 --> 00:02:41,690 we'd have JWT. 43 00:02:41,960 --> 00:02:49,040 So pretty much when we make the request, that cookie with the JWT are going to go back to the server 44 00:02:49,040 --> 00:02:53,870 and if everything is correct, we'll complete the current user request. 45 00:02:54,050 --> 00:02:57,470 And if we're successful, we want to return the data. 46 00:02:57,470 --> 00:03:00,260 Now if there is an error, like I said. 47 00:03:00,950 --> 00:03:08,000 This is going to work as the authentication, I'm going to redirect the user back to the home page, 48 00:03:08,000 --> 00:03:10,210 basically back to our landing one. 49 00:03:10,220 --> 00:03:16,250 So if there is any issue with JWT, the user will have to repeat the login step. 50 00:03:16,520 --> 00:03:23,960 And keep in mind we're logging this data in here because we have access to it in use loader data. 51 00:03:23,960 --> 00:03:28,490 And if I navigate to the browser, I can nicely see that the current user is John. 52 00:03:28,490 --> 00:03:35,600 Now of course, if I'll log in as Peter, you can probably already guess that we'll get back info on 53 00:03:35,600 --> 00:03:36,290 Peter. 54 00:03:36,290 --> 00:03:43,730 Now since all of the info is stored in a cookie, even when I refresh, since this is still valid, 55 00:03:43,760 --> 00:03:53,330 the cookie and JWT, of course I get back the user, but please keep in mind that if for example the 56 00:03:53,330 --> 00:04:00,270 token or the JWT expires, then of course we'll get back 401. 57 00:04:00,390 --> 00:04:06,830 And in order to demonstrate that, I'll simply wipe this one clean and refresh and check it out. 58 00:04:06,840 --> 00:04:10,590 Now we redirect the user back to the landing page. 59 00:04:10,590 --> 00:04:11,100 Why? 60 00:04:11,100 --> 00:04:15,180 Well, because now the server responds with 401. 61 00:04:15,180 --> 00:04:22,680 So again, let me go back to a login one successfully log in and now I get the info on John. 62 00:04:22,860 --> 00:04:26,670 And before we continue, I want to do two things. 63 00:04:26,670 --> 00:04:31,470 First of all, we'll change from temp user to the actual user. 64 00:04:31,470 --> 00:04:33,840 We're getting back from the database. 65 00:04:34,050 --> 00:04:42,090 And since I kept the same structure, essentially I just want to destructure user out of that data and 66 00:04:42,090 --> 00:04:49,500 then I'll remove the hardcoded value and what's super, super cool since I kept the same structure everywhere 67 00:04:49,500 --> 00:04:51,840 where pretty much we're using that name. 68 00:04:52,200 --> 00:04:56,010 More specifically in this button, we'll have the correct name. 69 00:04:56,010 --> 00:05:00,510 And just to showcase that, let me navigate to login one. 70 00:05:00,780 --> 00:05:02,580 And since I created the. 71 00:05:03,230 --> 00:05:05,710 User with the email of Peter. 72 00:05:05,720 --> 00:05:07,310 I can log in and notice. 73 00:05:07,310 --> 00:05:10,220 Now, of course, the name over here is going to be Peter. 74 00:05:10,220 --> 00:05:12,050 So again, same deal. 75 00:05:12,820 --> 00:05:15,110 So this is going to be our current user. 76 00:05:15,110 --> 00:05:19,280 And of course, instead of hard coding, we're getting it from our loader. 77 00:05:19,280 --> 00:05:27,110 And the very last thing that I want to do in this video is to showcase how in React router Dom outlet 78 00:05:27,110 --> 00:05:30,500 actually has the context prop. 79 00:05:30,530 --> 00:05:36,110 So we can go over here context and since I want to provide the object, I'm going to go with double 80 00:05:36,110 --> 00:05:36,530 curlies. 81 00:05:36,530 --> 00:05:39,350 Please keep in mind it's not a special syntax. 82 00:05:39,380 --> 00:05:44,150 Essentially I'm just passing here the object and in here I want to provide the user. 83 00:05:44,150 --> 00:05:51,110 So like I said, when we created this dashboard context provider, technically if you just want to pass 84 00:05:51,110 --> 00:05:57,680 some value down to the pages and not only to the pages, but also components that are in the pages, 85 00:05:57,680 --> 00:06:03,210 you can simply use the outlet and pass in the value into the context. 86 00:06:03,210 --> 00:06:08,760 So this works right out of the box, just like the provider over here. 87 00:06:08,880 --> 00:06:11,540 The difference, of course, is that we don't need to do anything. 88 00:06:11,550 --> 00:06:13,140 We simply go with this context. 89 00:06:13,140 --> 00:06:18,090 And then in the upcoming videos, I'll show you how we can access this user. 90 00:06:18,420 --> 00:06:25,710 So again, instead of setting it up manually over here, our context, which we used for small sidebar, 91 00:06:25,710 --> 00:06:27,450 big sidebar and nav bar. 92 00:06:27,450 --> 00:06:34,770 This one is for all of the pages and components that are inside of those pages, and we're just providing 93 00:06:34,770 --> 00:06:42,210 this user value because in some of the pages we'll actually use some of those values from the user object.