1 00:00:00,690 --> 00:00:06,540 And once we're done or factoring our code, let's take a look at an alternative method of how we can 2 00:00:06,540 --> 00:00:10,270 send our JWT is now in few videos. 3 00:00:10,650 --> 00:00:17,310 I'll dedicate an entire video on the gotchas, as well as pros and cons to both approaches. 4 00:00:17,700 --> 00:00:23,670 For now, let's just get the ball rolling and attach Cookie to our response. 5 00:00:23,970 --> 00:00:30,870 I will place the JWT in a cookie just to showcase how's that going to look like in real life? 6 00:00:31,290 --> 00:00:40,050 Again, let me repeat in the previous project the jobs API, we sent our token via response and not 7 00:00:40,110 --> 00:00:40,880 in the front end. 8 00:00:40,890 --> 00:00:43,140 It was stored in the local storage. 9 00:00:43,290 --> 00:00:49,890 As you can clearly see, if I navigate your application and if I take a look at the local storage, 10 00:00:50,190 --> 00:00:59,550 where my token and where the next request, we were attaching JWT to our requests. 11 00:00:59,940 --> 00:01:00,330 Correct. 12 00:01:00,840 --> 00:01:03,480 Now with cookies works a little bit differently. 13 00:01:04,170 --> 00:01:07,470 So if I take a look at the next app we'll be working on. 14 00:01:07,650 --> 00:01:15,240 So at the end of this project, we'll take a look at the proper auth workflow, meaning the email verification, 15 00:01:15,240 --> 00:01:17,340 reset password and all that cool stuff. 16 00:01:17,790 --> 00:01:23,100 If I take a look at the DevTools more specifically, I'm looking for the application. 17 00:01:23,850 --> 00:01:29,760 Once I log in, you'll notice that we're not going to be storing a JWT or here. 18 00:01:30,090 --> 00:01:35,920 So let me go here with my favorite John gmail.com with a famous password. 19 00:01:36,690 --> 00:01:40,260 And then once I log in notice, everything works. 20 00:01:40,860 --> 00:01:42,210 I successfully logged in. 21 00:01:42,390 --> 00:01:43,980 But here's the big gotcha. 22 00:01:44,370 --> 00:01:46,050 I see nothing in the application. 23 00:01:46,300 --> 00:01:47,910 Actually, nothing in the local storage. 24 00:01:48,240 --> 00:01:51,000 So I can refresh all day long, but I won't see anything. 25 00:01:51,330 --> 00:01:58,200 Now, if I navigate to the cookies and more specifically, I take a look at the domain. 26 00:01:58,650 --> 00:01:59,700 Check it out. 27 00:01:59,970 --> 00:02:05,760 Now in here, I have a refreshed token and access token because again, in the following project, this 28 00:02:05,760 --> 00:02:09,000 is also something we'll cover how we can set up refresh token. 29 00:02:09,360 --> 00:02:16,950 But the idea is exactly the same where now my token is actually stored in the cookie. 30 00:02:17,310 --> 00:02:18,990 And what's really, really nifty? 31 00:02:19,290 --> 00:02:25,950 If you take a look at this one, HTP only means that it can be only accessed by the browser. 32 00:02:26,580 --> 00:02:32,640 And on the next request, browser will send that cookie for us again. 33 00:02:33,120 --> 00:02:37,980 There's a few gotchas there, and there's pros and cons to both of the setups. 34 00:02:38,700 --> 00:02:40,710 So therefore, I'll spend the entire video on it. 35 00:02:41,070 --> 00:02:47,370 For now, I just want you to understand the big picture where instead of sending back the token with 36 00:02:47,370 --> 00:02:52,890 our response and then and storing this in local storage. 37 00:02:53,370 --> 00:03:00,900 Now attach a cookie to our response and we'll store the JWT right in there. 38 00:03:01,200 --> 00:03:03,480 And what's really, really, really nifty? 39 00:03:04,560 --> 00:03:12,420 Is the fact that it's going to be to be only so only the browser can access that token, and with the 40 00:03:12,420 --> 00:03:16,470 next request, browser will automatically send it as well. 41 00:03:16,680 --> 00:03:22,530 And what that means is that we don't need to do any extra acrobatics on a front and like I showed you 42 00:03:22,530 --> 00:03:23,460 in the previous project. 43 00:03:23,490 --> 00:03:24,720 We just sent it with a cookie. 44 00:03:24,960 --> 00:03:26,820 And then we expect that token back. 45 00:03:27,390 --> 00:03:31,560 Now let's go back to our code and we'll still create a token. 46 00:03:32,100 --> 00:03:33,930 But a few videos were factor it. 47 00:03:34,200 --> 00:03:40,810 Basically, we'll set up a function that attaches that cookie and we'll right away grabbed a JWT. 48 00:03:41,130 --> 00:03:47,430 And since the function is going to be in the same file, well, we won't have to import recreate JWT 49 00:03:47,430 --> 00:03:47,850 as well. 50 00:03:48,030 --> 00:03:51,330 For now, the only thing I want to do is remove this token. 51 00:03:51,690 --> 00:03:56,040 So I want to start from scratch here and then let's attach a cookie. 52 00:03:56,610 --> 00:04:02,100 And the way we can attach the cookie to our response, if we take a look at the express documentation 53 00:04:02,550 --> 00:04:05,370 notice, the only thing we need to do is go with arrays. 54 00:04:05,580 --> 00:04:06,840 So that's going to be our response. 55 00:04:06,900 --> 00:04:11,160 Remember, we have access to it in our controller and we go with cookie. 56 00:04:11,850 --> 00:04:14,760 And then we pass in these three things name. 57 00:04:15,090 --> 00:04:16,290 So what's the name of the cookie? 58 00:04:16,829 --> 00:04:19,260 As you can see in here, I named it refresh token. 59 00:04:19,980 --> 00:04:20,820 What is the value? 60 00:04:21,720 --> 00:04:24,930 So in this case will pass in our JWT. 61 00:04:25,290 --> 00:04:29,250 And third one is the options now in there. 62 00:04:29,580 --> 00:04:31,260 We care about expires. 63 00:04:31,650 --> 00:04:39,210 So in how long the cookie is going to expire, we want to set it up equal to HTP only flags the cookie 64 00:04:39,330 --> 00:04:41,700 to be accessible only by the web browser. 65 00:04:42,510 --> 00:04:45,790 And then we'll also set up secure and sign. 66 00:04:45,890 --> 00:04:51,120 Now these ones will set up a little bit later, since I want to focus on the basics first. 67 00:04:51,600 --> 00:04:58,250 So expires in how long it's going to expire, and it should be only now as far as expires. 68 00:04:58,260 --> 00:05:03,520 It is an interesting one where essentially will go with expires run. 69 00:05:03,540 --> 00:05:10,920 A new date will get the timestamps and then we'll add, you know, how long it's going to expire. 70 00:05:11,550 --> 00:05:17,460 So essentially, this is going to give us the timestamps, the current timestamps and then plus whatever 71 00:05:17,460 --> 00:05:18,980 milliseconds we want. 72 00:05:18,990 --> 00:05:25,020 So in this case, now this cookie will expire in eight hours and you'll see in a second how we set that 73 00:05:25,020 --> 00:05:25,170 up. 74 00:05:25,530 --> 00:05:26,430 So let's go back. 75 00:05:27,120 --> 00:05:32,940 I'm looking for my auth controller and the code is going to be following where I don't have a token 76 00:05:32,940 --> 00:05:37,440 anymore here in my response, and I'm just going to go with Arraez Cookie. 77 00:05:37,980 --> 00:05:40,140 So that's automatically available to us. 78 00:05:40,530 --> 00:05:45,690 As far as expression, when we add a token, then we'll add the value for the token. 79 00:05:45,870 --> 00:05:47,610 So that's going to be my JWT. 80 00:05:47,910 --> 00:05:49,710 And lastly, we want to set up those options. 81 00:05:49,740 --> 00:05:55,860 We definitely definitely want to go with a CTP only, and we'll set it equal to true. 82 00:05:56,370 --> 00:05:58,410 And now it's set up that expires. 83 00:05:59,040 --> 00:06:00,090 You're familiar with JavaScript. 84 00:06:00,090 --> 00:06:03,510 You know that one millisecond is going to be 1000 seconds. 85 00:06:03,990 --> 00:06:07,590 So let's say I want to set up one day in milliseconds. 86 00:06:07,590 --> 00:06:08,440 How would I do that? 87 00:06:08,460 --> 00:06:10,050 Well, I could go to cost. 88 00:06:10,350 --> 00:06:16,350 One day is equal to two thousand and three seconds times 60. 89 00:06:16,560 --> 00:06:17,340 What is that going to be? 90 00:06:17,340 --> 00:06:20,070 That's going to be one minute run time 60. 91 00:06:20,370 --> 00:06:21,360 That's going to be one hour. 92 00:06:21,390 --> 00:06:22,470 How many hours a day? 93 00:06:22,920 --> 00:06:27,460 Well, I don't know where you live, but where I do, it's 24 hours. 94 00:06:27,510 --> 00:06:28,830 So this gives us one day. 95 00:06:29,340 --> 00:06:31,380 So now let's go with expires. 96 00:06:32,870 --> 00:06:35,570 Animals are equal to two new date. 97 00:06:35,780 --> 00:06:42,170 So that's the current time I'll get the current milliseconds, so the time stamp or get baked and we 98 00:06:42,170 --> 00:06:43,490 can access it in multiple ways. 99 00:06:43,490 --> 00:06:45,860 But that now is pretty common. 100 00:06:45,860 --> 00:06:52,520 And when we want to add that one day, of course, the reason why I'm setting this up is one day, because 101 00:06:52,520 --> 00:06:55,190 that's what I used when I created JWT. 102 00:06:55,640 --> 00:06:57,470 So it makes sense that they match correct. 103 00:06:57,860 --> 00:07:01,010 Let's save and let's test it out. 104 00:07:01,640 --> 00:07:06,060 I'm going to go back to my postman and Ernie have the beaver. 105 00:07:06,080 --> 00:07:07,280 I already have the Susan. 106 00:07:07,610 --> 00:07:10,250 Probably in between the videos, I'll clean out the database. 107 00:07:10,820 --> 00:07:12,920 But just so you don't have to watch me do it. 108 00:07:13,260 --> 00:07:16,490 Going to go with John basically said, I'm bored you to death. 109 00:07:17,130 --> 00:07:21,160 And here, John John Secret and now check it out. 110 00:07:21,230 --> 00:07:24,230 Take a look at the cookies, because that's the important part. 111 00:07:25,170 --> 00:07:31,110 Once I send notice, something interesting, so I'm only getting the user with the general and all that. 112 00:07:31,590 --> 00:07:33,490 But notice this guy cookies. 113 00:07:33,830 --> 00:07:35,340 So in here, I have the token. 114 00:07:36,000 --> 00:07:40,470 And it's HTP only and the value that's my JWT. 115 00:07:40,910 --> 00:07:48,030 And if you can see the same thing as well, we have successfully sent our JWT with a cookie instead 116 00:07:48,030 --> 00:07:50,220 of directly sticking it in response.