1 00:00:00,410 --> 00:00:03,560 Okay, so now we're going to start to implement Json web tokens. 2 00:00:03,560 --> 00:00:05,990 I just have my user controller open. 3 00:00:05,990 --> 00:00:11,720 I did stop the server because I'm going to go ahead and install Json web token and we will make sure 4 00:00:11,720 --> 00:00:16,880 you install this on the back end, which means in your root, don't go into the front end folder. 5 00:00:16,880 --> 00:00:23,090 So let's say NPM install and it's going to be Json web token with no dashes. 6 00:00:24,370 --> 00:00:25,990 Okay, so we have that installed. 7 00:00:25,990 --> 00:00:31,510 Now I'm going to run NPM run dev again, which runs both my back end and front end. 8 00:00:32,259 --> 00:00:36,790 And we're going to generate the token, first of all, just right in the controller. 9 00:00:36,790 --> 00:00:42,880 But later on, we're actually going to put it into a utility file and then just bring it in. 10 00:00:42,880 --> 00:00:44,530 But for now, we'll do it from here. 11 00:00:44,530 --> 00:00:49,150 So let's import and we're going to say JWT from. 12 00:00:49,910 --> 00:00:51,200 Jason, Web token. 13 00:00:51,200 --> 00:00:52,950 This shouldn't be like this. 14 00:00:52,950 --> 00:00:56,300 It should just be all lowercase and it's a default export. 15 00:00:57,130 --> 00:01:01,240 All right, now let's go down into our auth user. 16 00:01:01,540 --> 00:01:05,230 So we're checking to see if the password matches and all that. 17 00:01:05,230 --> 00:01:10,870 And right before the Jason, where we send the Jason, we're going to create the token. 18 00:01:10,870 --> 00:01:15,790 So let's say const and token and we're going to set that. 19 00:01:16,640 --> 00:01:22,610 Equal to JWT, which has a method called sign, which will basically create the token. 20 00:01:22,610 --> 00:01:24,320 Now this takes in a few things. 21 00:01:24,320 --> 00:01:27,440 So first is going to be an object with the payload. 22 00:01:27,440 --> 00:01:29,000 And remember what I want to send in. 23 00:01:29,000 --> 00:01:37,280 The payload is the user ID, So we're going to set that to user, which we're getting right here, Right. 24 00:01:37,280 --> 00:01:45,320 And then the ID, so dot underscore ID, and then the next thing we want to pass in is the secret. 25 00:01:45,350 --> 00:01:51,050 Now, you don't want the secret to be just put in this file, you want to put it in your environment 26 00:01:51,050 --> 00:01:51,950 variables. 27 00:01:51,950 --> 00:02:00,740 So what we'll do is we'll say process dot env dot and then let's do JWT underscore secret. 28 00:02:00,800 --> 00:02:01,070 Okay. 29 00:02:01,070 --> 00:02:04,310 We haven't created that yet, but we'll do that in a second. 30 00:02:04,910 --> 00:02:07,970 And then the last thing we're going to do is put this in. 31 00:02:08,870 --> 00:02:09,380 Is put. 32 00:02:09,650 --> 00:02:12,530 When do we want this token to expire? 33 00:02:12,530 --> 00:02:15,530 So we'll say expires in now. 34 00:02:15,530 --> 00:02:17,120 I mean, this is really up to you. 35 00:02:17,150 --> 00:02:24,800 You can put one day if you want like one D but since this is a course and I'm going to be coming back, 36 00:02:24,830 --> 00:02:29,780 you know, coming to the code, leaving, coming back and so on, I don't want it to expire quickly. 37 00:02:29,780 --> 00:02:31,850 So I'm actually going to do 30 days. 38 00:02:31,850 --> 00:02:35,480 So 30 D should allow us to to do that. 39 00:02:36,140 --> 00:02:36,590 All right. 40 00:02:36,620 --> 00:02:39,380 Now, this will create the token. 41 00:02:39,380 --> 00:02:41,870 However, that's all it's going to do. 42 00:02:41,900 --> 00:02:43,550 It's just going to put it in token. 43 00:02:43,550 --> 00:02:45,800 Now we need to decide what we want to do with it. 44 00:02:45,800 --> 00:02:52,010 Now, in some cases, such as with the first version of this course, I would send it back in the Json 45 00:02:52,010 --> 00:02:55,250 and then we'd store it in the front end in local storage. 46 00:02:55,250 --> 00:02:57,620 But again, I don't want to do it like that. 47 00:02:57,650 --> 00:03:01,310 What I'm going to do is set it into a cookie on the server. 48 00:03:01,310 --> 00:03:10,040 So let's say set JWT as an Http only cookie. 49 00:03:10,770 --> 00:03:15,990 And the way we do that is we can say rez dot cookie. 50 00:03:17,030 --> 00:03:19,100 And then we're going to give it a name. 51 00:03:19,100 --> 00:03:23,810 I'm going to call it JWT, and we want to pass in the token. 52 00:03:23,810 --> 00:03:25,220 That's the value. 53 00:03:25,430 --> 00:03:25,670 Okay? 54 00:03:25,670 --> 00:03:35,390 The token we just created and then we can have some options and we're going to set Http only to true, 55 00:03:35,720 --> 00:03:37,760 we're going to say secure. 56 00:03:37,790 --> 00:03:46,700 Now, this I only want to be true if we're in production because you do have to have Https with this. 57 00:03:46,730 --> 00:03:50,630 If you set this to true and obviously in development, we don't have Https. 58 00:03:50,630 --> 00:04:01,550 So what we can do is say process dot env and then dot node underscore env and if that's not in. 59 00:04:02,760 --> 00:04:04,080 Development. 60 00:04:04,280 --> 00:04:09,720 Okay, So if it's not in development, meaning it's in production, then this will be true. 61 00:04:10,650 --> 00:04:11,040 Okay. 62 00:04:11,040 --> 00:04:13,770 Then we also want to set same site. 63 00:04:15,170 --> 00:04:16,730 I think its capital S, Yeah. 64 00:04:16,760 --> 00:04:17,690 Same site. 65 00:04:17,720 --> 00:04:19,670 We want to set that to strict. 66 00:04:19,700 --> 00:04:23,000 This will prevent attacks and then. 67 00:04:25,250 --> 00:04:27,730 Let's set the max age. 68 00:04:27,740 --> 00:04:30,110 So when do we want this to expire? 69 00:04:30,110 --> 00:04:31,880 And I want that to be. 70 00:04:32,730 --> 00:04:34,680 Since we set this to 30 days. 71 00:04:34,680 --> 00:04:36,780 Let's set this to 30 days as well. 72 00:04:36,810 --> 00:04:40,170 Now, this is in milliseconds, so I'm going to do 30 times. 73 00:04:40,170 --> 00:04:43,980 24 times 60. 74 00:04:44,720 --> 00:04:48,950 Times, 60 times 1000. 75 00:04:48,950 --> 00:04:50,540 And that should be. 76 00:04:51,230 --> 00:04:52,550 30 days. 77 00:04:54,780 --> 00:04:55,140 All right. 78 00:04:55,140 --> 00:04:55,700 And that's it. 79 00:04:55,710 --> 00:04:58,080 We're not going to send any any token back. 80 00:04:58,080 --> 00:05:03,420 We will send this data in case we need it, but we don't need to send the token. 81 00:05:03,420 --> 00:05:08,550 It's going to get stored here and then it will get sent with every subsequent request. 82 00:05:08,580 --> 00:05:10,830 You know, after we we log in. 83 00:05:11,980 --> 00:05:14,240 So now let's save that. 84 00:05:14,260 --> 00:05:18,430 And we do need to add this secret right here process. 85 00:05:18,460 --> 00:05:20,320 Env jwt secret. 86 00:05:20,320 --> 00:05:26,530 So since we're using the dot env package, we can go to our dot env file and we're going to add that. 87 00:05:26,530 --> 00:05:28,900 So jwt underscore. 88 00:05:29,750 --> 00:05:30,740 Secrets. 89 00:05:30,740 --> 00:05:33,290 And you can set this to absolutely anything. 90 00:05:33,290 --> 00:05:36,800 I'm just going to do A, B, C, one, two, three. 91 00:05:37,940 --> 00:05:39,560 And I'll save that. 92 00:05:40,070 --> 00:05:44,210 And then if you do have an example env, you should also add that here. 93 00:05:44,210 --> 00:05:47,390 So JWT underscore secrets. 94 00:05:49,140 --> 00:05:51,270 And you can say add. 95 00:05:52,440 --> 00:05:53,010 I don't know. 96 00:05:53,010 --> 00:05:55,290 Add your secret. 97 00:05:58,350 --> 00:05:58,820 Okay. 98 00:05:58,830 --> 00:06:02,880 Now when you do add something to envy, you want to restart the server. 99 00:06:02,880 --> 00:06:05,340 So let's do that just so it can read it. 100 00:06:07,610 --> 00:06:08,990 Okay now. 101 00:06:09,690 --> 00:06:16,650 What should happen now if we try to hit this route and we know we have the right email and password 102 00:06:16,650 --> 00:06:21,660 is it should create the token and it should save it in in a cookie. 103 00:06:21,660 --> 00:06:24,780 And it should be we should be able to send it with every other request. 104 00:06:24,780 --> 00:06:27,570 So let's go ahead and try this out. 105 00:06:27,570 --> 00:06:30,450 So I have my my postman open. 106 00:06:30,450 --> 00:06:34,290 I'm hitting user slash login with a post request. 107 00:06:34,290 --> 00:06:38,340 I'm setting the correct email and correct password. 108 00:06:38,340 --> 00:06:40,020 So let's click send. 109 00:06:40,780 --> 00:06:43,060 Okay, now it worked, right? 110 00:06:43,060 --> 00:06:47,440 We got our data back and now if you look right here, you'll see cookies one. 111 00:06:47,440 --> 00:06:51,100 And if you check it out, we have a cookie called JWT. 112 00:06:52,770 --> 00:06:53,330 All right. 113 00:06:53,340 --> 00:06:57,420 Now, if we look in the headers here. 114 00:06:58,670 --> 00:07:00,290 And we scroll up a little bit. 115 00:07:00,290 --> 00:07:07,820 You can see this set cookie and you can see JWT equals and then it has our Json web token. 116 00:07:09,090 --> 00:07:09,420 Okay. 117 00:07:09,420 --> 00:07:12,420 In fact, I can grab this. 118 00:07:13,590 --> 00:07:15,240 So it ends. 119 00:07:16,410 --> 00:07:17,220 Right here. 120 00:07:17,220 --> 00:07:18,060 That's the token. 121 00:07:18,060 --> 00:07:20,970 The rest is just some information about the cookie itself. 122 00:07:20,970 --> 00:07:23,010 But let's go ahead and copy that. 123 00:07:23,010 --> 00:07:30,900 And then I'm going to go back to the browser and go to JWT IO and paste that in and you'll notice that. 124 00:07:31,460 --> 00:07:33,200 In the payload. 125 00:07:33,200 --> 00:07:38,210 We have a user ID of this six, four, three, whatever. 126 00:07:38,210 --> 00:07:45,110 And if we look in our database and we look at the user that I used, John Doe, the ID is six, four, 127 00:07:45,110 --> 00:07:46,370 three, whatever. 128 00:07:47,120 --> 00:07:52,250 So we now have that cookie set with that user ID. 129 00:07:53,620 --> 00:07:59,920 So now if we want to make a request to a protected route, which we don't have any yet, we haven't 130 00:07:59,920 --> 00:08:06,190 even written the middleware to create protected routes, but we'll be able to ultimately take that cookie 131 00:08:06,190 --> 00:08:08,500 and send that along with it. 132 00:08:09,860 --> 00:08:10,310 All right. 133 00:08:10,310 --> 00:08:17,810 So up to this point, we can at least create the Json web token, put it into an Http only cookie. 134 00:08:17,840 --> 00:08:24,380 Now, in the next video, I want to create the auth middleware that will actually process that token 135 00:08:24,710 --> 00:08:27,260 so we can actually have protected routes.