1 00:00:07,270 --> 00:00:08,530 Welcome back. 2 00:00:08,560 --> 00:00:12,520 Let's get started with Jason Webb talking. 3 00:00:12,610 --> 00:00:21,370 So I have made a copy to the previous project and I have renamed this one to JWT. 4 00:00:21,550 --> 00:00:27,470 So let's do some housekeeping for this particular implementation. 5 00:00:27,490 --> 00:00:31,930 We don't need session or quickie parser or whatever. 6 00:00:31,960 --> 00:00:38,020 So let's go ahead and remove these two packages, session and Mongo store. 7 00:00:38,050 --> 00:00:39,730 So go away. 8 00:00:39,910 --> 00:00:46,270 And we need the connection string for logging in and we need the user model as that. 9 00:00:46,270 --> 00:00:55,510 And we don't need the session configuration because we are going to use JWT and these functions are 10 00:00:55,510 --> 00:00:56,770 for seven status file. 11 00:00:56,770 --> 00:01:06,640 So let's maintain them and let's reduce the gaps as that and let's go down this one to we need it to 12 00:01:06,640 --> 00:01:09,160 receive incoming data and cookies. 13 00:01:09,160 --> 00:01:13,600 Two, we don't need this ones this route, we don't need it. 14 00:01:13,630 --> 00:01:16,600 Remove that and we don't need the merged. 15 00:01:16,600 --> 00:01:24,940 Well, for now let's go to remove that and inside the home root, let's remove the session like that. 16 00:01:25,060 --> 00:01:34,120 And then for logging out to let's remove the logic inside that and log in, maintain it for just displaying 17 00:01:34,120 --> 00:01:35,080 the template. 18 00:01:35,110 --> 00:01:41,800 Let's remove this middleware because we have remove it and for log in everything is correct. 19 00:01:41,800 --> 00:01:47,110 So let's collapse it now for the log out too. 20 00:01:47,110 --> 00:01:53,170 Let's also remove this comment here because using this approach is really awesome. 21 00:01:53,170 --> 00:01:56,260 So we need to have more room to play around with it. 22 00:01:56,470 --> 00:02:03,130 And for the registration to after registration, we don't need to save the user into cookies like this 23 00:02:03,130 --> 00:02:03,730 one. 24 00:02:04,390 --> 00:02:06,550 So let's also remove that. 25 00:02:06,550 --> 00:02:10,630 And yeah, I think profile is okay. 26 00:02:10,630 --> 00:02:11,260 Yes. 27 00:02:11,260 --> 00:02:14,110 So now everything is okay. 28 00:02:14,110 --> 00:02:21,340 Now let's work with the logging in functionality and after logging in we won't generate the token. 29 00:02:21,460 --> 00:02:24,100 So let's see how it's going to work. 30 00:02:24,100 --> 00:02:31,300 So based on the diagram, when a user logs in, we are going to generate a token. 31 00:02:31,300 --> 00:02:32,860 So let's start from here. 32 00:02:32,860 --> 00:02:40,240 How we can generate a token and you are going to use a package called JWT. 33 00:02:40,600 --> 00:02:44,620 Let's look at the description about JSON Web token. 34 00:02:45,010 --> 00:02:57,610 It says that JSON Web tokens are open industry standard are FC 9519 method for representing claims securely 35 00:02:57,640 --> 00:02:59,800 between two parties. 36 00:02:59,800 --> 00:03:07,210 So it allows you to decode and then verify and generate JWT. 37 00:03:07,300 --> 00:03:11,680 So let me show you with code to better understand this description. 38 00:03:11,740 --> 00:03:19,150 So all what is doing here is that when we generate the token, we call it as encoded. 39 00:03:19,150 --> 00:03:26,380 And then if you want to get back the details about the token or the user that was used to generate this 40 00:03:26,380 --> 00:03:32,440 token, we are going to use what is called decoded and we come back here as you move on, if you click 41 00:03:32,440 --> 00:03:41,260 on libraries, you can see the languages that can be used with this package and we can use Node.js for 42 00:03:41,260 --> 00:03:41,590 it. 43 00:03:41,590 --> 00:03:43,750 So we are lucky to go. 44 00:03:43,750 --> 00:03:48,880 So let's go ahead and then install this particular package. 45 00:03:48,970 --> 00:03:55,870 So let's go to our terminal here and let's shut down the server. 46 00:03:56,500 --> 00:03:58,690 All right, so I think there's something wrong. 47 00:03:58,690 --> 00:03:59,920 Yeah, so don't worry. 48 00:03:59,920 --> 00:04:01,240 We'll fix it very soon. 49 00:04:01,240 --> 00:04:10,870 Let's clear the terminal here as that and let's install the package call JSON Web token. 50 00:04:10,870 --> 00:04:12,130 So here we go. 51 00:04:12,130 --> 00:04:28,900 And p m, I install JSON Web token and make sure that you install the exact version 8.5.1 hit enter 52 00:04:28,900 --> 00:04:37,150 and Jason web token is installing let's have some patience and some minute it will finish. 53 00:04:37,480 --> 00:04:39,460 So why it is installing. 54 00:04:39,460 --> 00:04:40,780 Let's go ahead. 55 00:04:40,780 --> 00:04:42,310 Oh, I think it has finished. 56 00:04:42,310 --> 00:04:49,180 So let's try and then restart our server and here we go. 57 00:04:49,630 --> 00:04:51,010 Oh, we got some error. 58 00:04:51,010 --> 00:04:53,680 Code protected is not defined. 59 00:04:53,710 --> 00:04:56,920 It means that we need to remove that. 60 00:04:56,920 --> 00:04:58,930 Where is it protected? 61 00:04:59,590 --> 00:05:03,520 I think we are using it in some places. 62 00:05:03,520 --> 00:05:06,670 So let's remove this comment here and protect. 63 00:05:07,220 --> 00:05:07,550 Yeah. 64 00:05:07,550 --> 00:05:08,210 This one. 65 00:05:08,250 --> 00:05:09,330 Okay, you got it. 66 00:05:09,410 --> 00:05:10,400 So remove that. 67 00:05:10,790 --> 00:05:13,940 Okay, so now these are all empty root. 68 00:05:13,970 --> 00:05:16,500 So let's go ahead and then configure it. 69 00:05:16,520 --> 00:05:21,230 So the first step is we need to require the package. 70 00:05:21,230 --> 00:05:34,400 Const JWT is equal to Jason Web token and this kind of authentication is mostly used in stock projects, 71 00:05:34,400 --> 00:05:36,710 so pay attention to it. 72 00:05:36,980 --> 00:05:43,030 So how are we going to generate let's move slowly and step by step. 73 00:05:43,040 --> 00:05:47,060 Let's start with the how we can generate the token. 74 00:05:47,180 --> 00:05:49,880 So let's go ahead and then create the function. 75 00:05:49,880 --> 00:05:52,850 So here we go before our roots. 76 00:05:52,850 --> 00:05:55,400 Here, let's work. 77 00:05:56,400 --> 00:06:03,000 Let's work with the JSON web token that is JWT for short. 78 00:06:03,420 --> 00:06:09,120 So the first method that we are going to create is called generate token. 79 00:06:10,870 --> 00:06:12,580 Generate Turkey. 80 00:06:13,490 --> 00:06:14,680 And here we go. 81 00:06:14,690 --> 00:06:15,800 Cost. 82 00:06:17,430 --> 00:06:18,450 Generate. 83 00:06:19,880 --> 00:06:20,690 Tolkien. 84 00:06:21,650 --> 00:06:23,660 Is equal to. 85 00:06:25,460 --> 00:06:30,560 I realize that this function is going to return the generated token. 86 00:06:30,560 --> 00:06:38,770 So let's assign a variable called token which is equal to the package which is JWT. 87 00:06:38,780 --> 00:06:40,640 So let's bring it here. 88 00:06:40,640 --> 00:06:41,990 JWT. 89 00:06:42,020 --> 00:06:43,400 Dot sign. 90 00:06:43,400 --> 00:06:50,210 Meaning we are going to sign a token and then assign to this variable called token. 91 00:06:50,300 --> 00:06:59,640 So here we need a payload or let's say a payload, the in user that we want to sign the token and give 92 00:06:59,640 --> 00:06:59,980 it to. 93 00:07:00,020 --> 00:07:02,330 So this is what we are referring to. 94 00:07:02,420 --> 00:07:02,870 Right. 95 00:07:02,870 --> 00:07:05,480 You want to take a data, a payload? 96 00:07:05,480 --> 00:07:08,240 It can be ID, it can be the user name. 97 00:07:08,240 --> 00:07:10,130 And that's what you call the payload. 98 00:07:10,130 --> 00:07:12,310 And that is what this function takes. 99 00:07:12,320 --> 00:07:20,810 So this function you pass in the user and here you pass it as an object, as user. 100 00:07:20,810 --> 00:07:22,280 The first argument. 101 00:07:22,640 --> 00:07:25,790 The second element is a secret key. 102 00:07:25,790 --> 00:07:30,470 So here we can save this one inside environment variable. 103 00:07:30,500 --> 00:07:34,220 But for the meantime, let's just type in in a key here. 104 00:07:34,940 --> 00:07:35,600 All right. 105 00:07:35,600 --> 00:07:42,800 And next is the next agreement going to be some configuration, the X files in meaning? 106 00:07:42,830 --> 00:07:47,590 At what time do we want to expire this particular token? 107 00:07:47,600 --> 00:07:51,500 So let's say that after one hour we need to log in back. 108 00:07:51,500 --> 00:07:54,080 So one hour as that. 109 00:07:54,080 --> 00:07:59,990 So the next step is let's go ahead and then return from this function. 110 00:07:59,990 --> 00:08:02,960 And that is the token as that. 111 00:08:02,960 --> 00:08:11,450 And I kind of shorten this one by immediately return it from here in the same as before. 112 00:08:11,540 --> 00:08:17,120 JWT So here, let's go ahead and call the. 113 00:08:18,500 --> 00:08:20,420 Function call took in. 114 00:08:22,220 --> 00:08:25,490 And is equal to generate talking. 115 00:08:25,490 --> 00:08:31,870 And remember, we are going to pass in the user that we want to assign this Tolkien to. 116 00:08:31,880 --> 00:08:37,760 So here we pass in an object with the user name say. 117 00:08:38,809 --> 00:08:39,669 Emmanuel. 118 00:08:40,250 --> 00:08:42,500 And then the email. 119 00:08:43,860 --> 00:08:49,080 It's going to be at any at gmail.com. 120 00:08:50,140 --> 00:08:54,970 All right, so here we go now, and let's save it now. 121 00:08:54,970 --> 00:08:59,620 As soon as we run the server, we are going to see generated token. 122 00:08:59,620 --> 00:09:05,650 So let's go ahead and then console.log the token and let's see. 123 00:09:05,650 --> 00:09:14,770 So let me open the terminal here and as soon as it's refreshed, see that we have the token being what 124 00:09:14,980 --> 00:09:17,890 generated for this particular user. 125 00:09:17,890 --> 00:09:24,070 So now we are done with the first step called generate token, which is this one. 126 00:09:24,190 --> 00:09:30,160 So now in the front end, we need to save this token at the front end. 127 00:09:30,160 --> 00:09:37,360 But for the meantime, let's work on the back end because it's really important skills to understand 128 00:09:37,360 --> 00:09:41,080 how we can make use of JSON web token. 129 00:09:41,080 --> 00:09:50,680 So now we say that as soon as the token is generated, then upon every request, the browser need to 130 00:09:50,680 --> 00:09:54,010 send the token as part of the request. 131 00:09:54,010 --> 00:09:59,290 And then this package is going to verify called decoding. 132 00:09:59,290 --> 00:10:07,570 And after decoding we are going to see the payload of this user, which was the username and then the 133 00:10:07,570 --> 00:10:08,140 email. 134 00:10:08,320 --> 00:10:14,680 So now with this one, let's try to decode it using the JWT see to. 135 00:10:14,680 --> 00:10:24,730 So now let's copy that and let's go to JWT website and let's go to the home page and let's have a look 136 00:10:24,730 --> 00:10:25,660 at this. 137 00:10:25,690 --> 00:10:29,110 We see that here is our encoded token. 138 00:10:29,200 --> 00:10:37,960 Now we are going to replace this one with our token that we have copied and down here is going to decode. 139 00:10:37,960 --> 00:10:45,730 After decoding, we are going to see the payload, meaning the user which was used to sign this token. 140 00:10:45,730 --> 00:10:55,180 So as soon as I paste this token and you will see that I have the user here, that is awesome, guys. 141 00:10:55,360 --> 00:11:02,020 So now we're able to decode this token and get back the user. 142 00:11:02,140 --> 00:11:10,330 So with this one being in mind, what you can do is that after a user is logged in, we are going to 143 00:11:10,330 --> 00:11:20,020 verify the token called decoded and save this user into the request object and that is it. 144 00:11:20,230 --> 00:11:28,210 If I tamper with the token, you see that there is no payload because the user which was used to send 145 00:11:28,210 --> 00:11:32,650 this token is not this token, meaning it has been tampered. 146 00:11:33,010 --> 00:11:33,850 Did you get it? 147 00:11:33,970 --> 00:11:34,630 Yes. 148 00:11:34,630 --> 00:11:43,310 So now with this one, what we can do is that we need to generate the token upon logging in. 149 00:11:43,330 --> 00:11:51,190 So now instead of just console log, something like this one, what we are going to do is that after 150 00:11:51,190 --> 00:11:55,840 logging in, let's locate the log in root, which is this. 151 00:11:56,080 --> 00:12:05,020 So after logging in here, we are not going to save the user into session, but instead we are going 152 00:12:05,020 --> 00:12:07,570 to add a took him to the user. 153 00:12:07,600 --> 00:12:11,080 For the meantime, let's work on the back end. 154 00:12:11,080 --> 00:12:13,630 So here we go. 155 00:12:13,780 --> 00:12:18,130 So let's remove this one from here and even less common this one. 156 00:12:18,130 --> 00:12:21,190 And now let's work on the back end, like I said. 157 00:12:21,370 --> 00:12:28,070 So here, let's return rest Jason and let's send the details. 158 00:12:28,090 --> 00:12:36,970 So we don't want to send the entire user, for example, the ID, or we can send some specific part 159 00:12:36,970 --> 00:12:37,720 of the user. 160 00:12:37,720 --> 00:12:48,070 So let's say that I want to send the username and it can be found and the user found dot the user name 161 00:12:48,070 --> 00:12:53,140 as that and then the foo name as that. 162 00:12:53,140 --> 00:13:02,140 We can also get it from the user found dot foo name and we want to add a property called Token. 163 00:13:02,500 --> 00:13:05,470 All right, so here, how can we get it? 164 00:13:05,470 --> 00:13:07,330 Well, this is a function. 165 00:13:07,330 --> 00:13:17,860 So here we can call this function down here and then we pass in the user details as that. 166 00:13:17,860 --> 00:13:23,560 So we are passing the entire user for the sign in the token. 167 00:13:23,620 --> 00:13:28,120 But ideally we often use the ID of the user. 168 00:13:28,120 --> 00:13:33,160 But for the meantime, let's just sign the entire user with the token. 169 00:13:33,160 --> 00:13:35,560 So now save it. 170 00:13:35,560 --> 00:13:37,780 Let's go to Postman or better. 171 00:13:38,080 --> 00:13:43,150 We can use this to call ten clients and let's create one collection. 172 00:13:43,150 --> 00:13:44,680 We have it already. 173 00:13:44,680 --> 00:13:46,990 And this is for logging in. 174 00:13:47,020 --> 00:13:48,130 Do you remember? 175 00:13:48,220 --> 00:13:49,030 Yes. 176 00:13:49,030 --> 00:13:49,450 Good. 177 00:13:49,690 --> 00:13:54,520 Now, as soon as I look in, remember, this user doesn't exist. 178 00:13:54,520 --> 00:13:55,560 But let's try. 179 00:13:55,600 --> 00:14:00,850 If I look in, let's see that I got invalid login credentials. 180 00:14:00,850 --> 00:14:06,610 So let's use because this user exists and the password remains the same. 181 00:14:06,610 --> 00:14:11,930 So let's send and we got something incredible. 182 00:14:12,100 --> 00:14:19,320 You see, we got the user name and then full name and additional property called Token. 183 00:14:19,330 --> 00:14:27,110 So on the front end we are going to save this token into local storage. 184 00:14:27,130 --> 00:14:35,740 Well, now that we have log in successfully with a token, what we are going to do is that upon every 185 00:14:35,740 --> 00:14:45,940 request we want the user to send this to a loan, meaning that we are going to put some root on less 186 00:14:45,940 --> 00:14:50,380 a user pass in the token as part of the header request. 187 00:14:50,380 --> 00:14:55,990 Then we are going to take this token and then verify it. 188 00:14:55,990 --> 00:15:00,250 So in the next video, let's see how we can verify this token.