1 00:00:08,000 --> 00:00:09,180 Welcome back. 2 00:00:09,200 --> 00:00:13,520 Let's finish up the slogan media world. 3 00:00:13,550 --> 00:00:18,200 So let's start from scratch by opening the files. 4 00:00:18,350 --> 00:00:26,810 So what we want to do is that for this route or any route that we want to protect, we are going to 5 00:00:26,810 --> 00:00:30,050 create a murderer called a log in. 6 00:00:30,110 --> 00:00:38,760 So the responsibility for this function is always to hit the server to check if a user is logged in. 7 00:00:38,780 --> 00:00:40,370 So these are the steps. 8 00:00:40,430 --> 00:00:47,270 So this function is going to ward, get the token from the header and then verify it. 9 00:00:47,300 --> 00:00:52,100 And lucky for us, we have all this function being ready for us to use. 10 00:00:52,310 --> 00:00:59,450 So if you want, we can copy this code here and then inside for the login. 11 00:00:59,450 --> 00:01:01,040 That's the first step here. 12 00:01:01,070 --> 00:01:06,170 We put it here and then the next step is the verification to you. 13 00:01:06,200 --> 00:01:07,460 Copy this one. 14 00:01:07,460 --> 00:01:09,620 And then we also put it here. 15 00:01:09,670 --> 00:01:14,480 As you can see that we have both lines of code here, which is not ideal. 16 00:01:14,510 --> 00:01:19,930 That is why I have separation of consent by putting them on separate file. 17 00:01:19,940 --> 00:01:26,900 So what I need first is to get the token from header and I have this function that is it. 18 00:01:26,930 --> 00:01:33,710 So here, let's go ahead and then required get token from header. 19 00:01:33,980 --> 00:01:40,800 And step number two is to get the verification token function, which is this one also. 20 00:01:40,820 --> 00:01:42,620 So let's go ahead and do that. 21 00:01:42,770 --> 00:01:47,150 So verify token, I also have the auto import. 22 00:01:47,180 --> 00:01:50,090 That is crazy, guys. 23 00:01:50,360 --> 00:01:55,220 So now that we have it, the next step is let's use those functions. 24 00:01:55,220 --> 00:01:57,260 So here we go. 25 00:01:57,800 --> 00:01:59,030 So here we go. 26 00:01:59,060 --> 00:02:03,590 A token from get token from header start. 27 00:02:03,830 --> 00:02:09,680 And next point, let me assign to a variable called token equal to that. 28 00:02:09,740 --> 00:02:13,630 And when I get a token, I want to verify it. 29 00:02:13,640 --> 00:02:19,580 So here are going to be the verify token and I'll pass in the token as that. 30 00:02:19,850 --> 00:02:27,020 If you have taken some of my master courses or projects, you see that I write everything inside one 31 00:02:27,020 --> 00:02:33,380 file, but this time around I have mixed some separation of can send. 32 00:02:33,770 --> 00:02:40,010 So here we get back the decoded user equal to that. 33 00:02:40,370 --> 00:02:44,440 And next is let's save the user before saving the user. 34 00:02:44,450 --> 00:02:46,670 We need to call next. 35 00:02:46,670 --> 00:02:48,680 But before that, let's check. 36 00:02:48,830 --> 00:02:53,720 So if before we save the user here, let's check if there is user in that. 37 00:02:53,720 --> 00:03:03,080 So if there is no decoded meaning that if there is no user, then we are going to return from this module 38 00:03:03,140 --> 00:03:07,130 and send some message that. 39 00:03:10,000 --> 00:03:12,870 Invalid token place locked in. 40 00:03:12,880 --> 00:03:16,900 So here, let's provide a property called message. 41 00:03:16,900 --> 00:03:25,480 Can I be as invalid Tolkien or invalid or expired Tolkien? 42 00:03:25,960 --> 00:03:28,240 Something like this one. 43 00:03:28,420 --> 00:03:33,700 And then let's say please log in again. 44 00:03:34,330 --> 00:03:35,830 All right. 45 00:03:35,830 --> 00:03:41,530 And if there is user, then you go ahead and call next. 46 00:03:41,530 --> 00:03:44,740 So down here, we are going to call next. 47 00:03:44,740 --> 00:03:47,770 Before we call next, we need to save the user. 48 00:03:47,770 --> 00:03:54,370 But for the meantime, let me show you what I mean first, and then we'll go ahead and save the user 49 00:03:54,370 --> 00:03:56,650 into the request object. 50 00:03:56,650 --> 00:04:03,100 So module dot x export and is equal to is logged in. 51 00:04:03,100 --> 00:04:10,540 So in any route that I want to protect, I'm going to use this record is logged in. 52 00:04:10,540 --> 00:04:17,560 So back to my server file where we have all the logic less required. 53 00:04:17,560 --> 00:04:21,279 A log in middleware which is down here. 54 00:04:21,550 --> 00:04:29,080 Next is in any route that I want to have access to the user, then I will pass it as a second argument 55 00:04:29,080 --> 00:04:30,190 to the function. 56 00:04:30,340 --> 00:04:36,040 Or if I want to protect any route, I'm going to use app dot use. 57 00:04:36,160 --> 00:04:38,050 But this is not the idea. 58 00:04:38,060 --> 00:04:39,460 But let me show you what I mean here. 59 00:04:39,760 --> 00:04:42,850 Let's try out and see if everything is working. 60 00:04:42,910 --> 00:04:54,850 So let's go ahead and then try the profile route and see where we got some cannot read property of undefined. 61 00:04:55,000 --> 00:04:58,000 So what is the problem? 62 00:04:58,000 --> 00:05:04,090 Let's check the terminal here and let's look at the error message. 63 00:05:04,090 --> 00:05:10,810 The same thing cannot read properties of undefined core headers. 64 00:05:10,990 --> 00:05:13,540 So what is this problem? 65 00:05:13,750 --> 00:05:20,260 Well, the problem can be that we are not passing in the request object. 66 00:05:20,260 --> 00:05:27,520 That is why it says that it cannot read the headers on the request object. 67 00:05:27,640 --> 00:05:31,690 So let's get back to the east log n o better mine side. 68 00:05:31,690 --> 00:05:33,370 Remember this function. 69 00:05:33,370 --> 00:05:40,480 Accept the entire request object so I'll pass in here as request object. 70 00:05:40,600 --> 00:05:49,540 So now let's try again and let's send a I got status 200 meaning everything is okay and the time it 71 00:05:49,540 --> 00:05:51,670 took to finish the request. 72 00:05:51,670 --> 00:05:55,060 And if I check there is passed. 73 00:05:55,090 --> 00:05:56,980 Here we go. 74 00:05:56,980 --> 00:05:59,830 I get back the file. 75 00:06:00,100 --> 00:06:09,100 So if I try to tamper with this code and let's see if we see that word come to your profile, then I 76 00:06:09,100 --> 00:06:12,640 got no meaning undefined. 77 00:06:12,850 --> 00:06:21,010 So we need to check it well inside here because this function is not being called. 78 00:06:21,010 --> 00:06:29,410 So let's try to console that log the decoded user when the token is not valid. 79 00:06:29,410 --> 00:06:39,550 So let's try again and let's check the terminal and see if I'm going to get you see that we got the 80 00:06:39,970 --> 00:06:41,920 response, which is this. 81 00:06:41,920 --> 00:06:43,390 So why is that? 82 00:06:43,390 --> 00:06:46,060 We are not getting this invalid token. 83 00:06:46,450 --> 00:06:55,060 So the problem is that we are returning an object and since there is value on the object, it is always 84 00:06:55,060 --> 00:06:55,810 true. 85 00:06:55,810 --> 00:07:00,910 That is why this one is not able to run. 86 00:07:00,940 --> 00:07:05,620 So what we need to configure is the verify token. 87 00:07:05,620 --> 00:07:14,110 Instead of just returning the message down here, we are going to return false or in the status we can 88 00:07:14,110 --> 00:07:16,180 say failed or false. 89 00:07:16,180 --> 00:07:20,920 But to make it more simple here, let's go to the verification token. 90 00:07:20,920 --> 00:07:29,350 And if everything is not correct, then we are not going to return object like this, but instead forks 91 00:07:29,350 --> 00:07:30,970 with this one. 92 00:07:31,120 --> 00:07:35,890 This line of code is going to run because this one is false. 93 00:07:35,890 --> 00:07:38,890 So now let's see, let's send again. 94 00:07:38,890 --> 00:07:41,230 And here we go. 95 00:07:41,260 --> 00:07:44,740 Message invalid x pi token. 96 00:07:44,740 --> 00:07:46,570 Please log in again. 97 00:07:46,720 --> 00:07:47,920 Don't worry about it. 98 00:07:47,920 --> 00:07:54,670 That is cool because we are not handling the errors gracefully, but the logic is that our middleware 99 00:07:54,670 --> 00:07:57,460 function is working nice. 100 00:07:57,550 --> 00:08:03,850 But if I bring back the token well and we see that I get my token. 101 00:08:03,850 --> 00:08:08,770 So this how we implement what is called JSON web to. 102 00:08:09,460 --> 00:08:15,280 Well, if you're thinking, how can we work on the browser or the client side? 103 00:08:15,310 --> 00:08:22,720 So like I said, for this kind of authentication, if you want to incorporate into such application, 104 00:08:22,720 --> 00:08:25,440 unless you write a little code. 105 00:08:25,450 --> 00:08:32,830 So if you want to give yourself a challenge, let me show you how you're going to do so inside the login 106 00:08:32,830 --> 00:08:33,559 route. 107 00:08:33,580 --> 00:08:42,220 When we register, we want to take the token and save into local storage, and then upon every request 108 00:08:42,220 --> 00:08:46,700 we are going to check if is a header on the request. 109 00:08:46,720 --> 00:08:52,240 So if we get to react, we can see how easy this one is going to be. 110 00:08:52,240 --> 00:08:59,920 So in the next video, I will show you a simple code how we are going to take the token and save it 111 00:08:59,920 --> 00:09:06,790 into local storage, meaning that we are going to write some few lines of client side JavaScript to 112 00:09:06,790 --> 00:09:07,540 get it done.