1 00:00:00,420 --> 00:00:00,800 Great. 2 00:00:00,960 --> 00:00:06,180 And let's start by setting up the cookie in the login response. 3 00:00:06,750 --> 00:00:14,070 If we take a look at the express documentation, you'll notice that in order to set up the cookie, 4 00:00:14,100 --> 00:00:16,370 we simply need to go with Perez. 5 00:00:16,440 --> 00:00:17,970 Basically, that's our response. 6 00:00:18,180 --> 00:00:19,230 And then Cookie. 7 00:00:19,560 --> 00:00:25,950 And then we need to provide the name of the cookie, the value and also the options. 8 00:00:26,890 --> 00:00:30,150 And of course, these are all the options that we can use. 9 00:00:30,270 --> 00:00:34,980 And if you're looking, for example, basically we can go with the rest of that cookie name is going 10 00:00:34,980 --> 00:00:35,790 to be name. 11 00:00:35,790 --> 00:00:39,000 The value is going to be Toby, and then rest of the stuff. 12 00:00:39,360 --> 00:00:42,790 Now I'll show you the options we are going to use. 13 00:00:42,800 --> 00:00:48,120 So of course, yes, you can reference the docs, but in our case we use the expires. 14 00:00:48,120 --> 00:00:53,710 The DPI only as well as the secure one as far as the setup. 15 00:00:53,730 --> 00:00:59,280 You can add to any of the routes, but I think the logging one is going to be the easiest one. 16 00:01:00,180 --> 00:01:03,960 So first, let's navigate to the fourth controller. 17 00:01:04,290 --> 00:01:06,450 We're looking for the login route. 18 00:01:06,870 --> 00:01:14,580 And essentially, right after we set up the token, right after we set up the JWT and all that, we 19 00:01:14,580 --> 00:01:17,850 want to go with ROIs and Cookie. 20 00:01:18,210 --> 00:01:22,440 Again, this is happening by default and all that, and now we want to provide those values. 21 00:01:22,560 --> 00:01:29,100 Now, for time being, we'll still send back to Token with our JSON response, but that is not going 22 00:01:29,100 --> 00:01:32,160 to be the case once we're done with the setup. 23 00:01:32,610 --> 00:01:34,930 So let's start here with a name. 24 00:01:34,950 --> 00:01:37,950 In my case, I'm going to go with Token. 25 00:01:37,960 --> 00:01:45,720 As far as the value, this is where we want to pass in the token that we get back from user create JWT. 26 00:01:45,840 --> 00:01:49,470 And then one more is the options object. 27 00:01:49,890 --> 00:01:57,240 And in the options object, we want to go with HTTP only, which ensures that only the browser can access 28 00:01:57,240 --> 00:01:57,740 that cookie. 29 00:01:57,750 --> 00:01:59,130 Very, very important. 30 00:01:59,340 --> 00:02:01,530 And then we need to go with expires. 31 00:02:02,280 --> 00:02:09,210 Now, remember, the JWT has what it has, I believe, expiration for one day. 32 00:02:09,360 --> 00:02:14,220 So it kind of makes sense that we do the same thing with the cookie. 33 00:02:14,760 --> 00:02:18,350 Now, can you set up different expression? 34 00:02:18,360 --> 00:02:19,290 Yes, of course. 35 00:02:19,320 --> 00:02:26,430 But again, let me repeat, it kind of makes sense that they both expire at the same time and it works 36 00:02:26,430 --> 00:02:27,590 exactly the same way. 37 00:02:27,600 --> 00:02:32,190 Once the cookie expires, the cookie is not going to be present. 38 00:02:32,280 --> 00:02:36,970 If the cookie is not present, then, of course, the JWT is also not located over there. 39 00:02:36,990 --> 00:02:42,210 Again, if this sounds somewhat iffy, trust me, once we will start testing, you'll see what I mean. 40 00:02:42,480 --> 00:02:48,660 So in order to set up the expires, we just need to go with expires properly and we need to set it equal 41 00:02:48,660 --> 00:02:51,870 to and now this needs to be in the milliseconds. 42 00:02:52,260 --> 00:02:53,850 Now, how can we get milliseconds? 43 00:02:53,850 --> 00:02:55,650 Well, we can go with date dot now. 44 00:02:55,680 --> 00:02:56,340 Correct. 45 00:02:56,340 --> 00:03:03,810 And the way we can set up the expiration, we can create a new date, then get the date that now and 46 00:03:03,810 --> 00:03:06,930 add one day since again, that's our expiration. 47 00:03:06,930 --> 00:03:09,480 Now you can also add like 5 seconds or whatever. 48 00:03:10,020 --> 00:03:16,170 And in order to get those milliseconds, basically that one day we need to do a little bit of math over 49 00:03:16,170 --> 00:03:16,650 here. 50 00:03:16,800 --> 00:03:22,230 So I'm going to go with const one day and now let's construct this one day in milliseconds. 51 00:03:22,530 --> 00:03:26,610 So we know that one second is 1000 milliseconds, correct. 52 00:03:26,790 --> 00:03:29,490 So if I want to get one minute, what do I need to do? 53 00:03:29,640 --> 00:03:31,590 I need to go to 65,000. 54 00:03:31,590 --> 00:03:33,030 Correct, then. 55 00:03:33,770 --> 00:03:36,970 In order to get one hour, I go with 60 again. 56 00:03:36,980 --> 00:03:38,470 So this is going to be one hour. 57 00:03:38,480 --> 00:03:41,400 And then how many hours we have in a day. 58 00:03:41,420 --> 00:03:46,790 Well, I don't know about you, but where I live, it is 24 hours in a day. 59 00:03:47,150 --> 00:03:48,740 So now we have this one day. 60 00:03:48,920 --> 00:03:51,920 And now let's set up that expiration. 61 00:03:51,920 --> 00:03:53,900 We're going to go with a new date. 62 00:03:53,900 --> 00:03:55,520 So we're constructing it. 63 00:03:55,730 --> 00:03:58,490 Then in it will pass date that. 64 00:03:58,490 --> 00:04:00,050 Now let's invoke it. 65 00:04:00,140 --> 00:04:07,820 So we get basically the current milliseconds for this date, and then we'll add that one day again, 66 00:04:08,120 --> 00:04:09,590 you can add 1000. 67 00:04:09,590 --> 00:04:12,320 Basically, this cookie will expire in one second. 68 00:04:12,320 --> 00:04:14,570 And once we'll start this thing, this is what we'll do. 69 00:04:14,570 --> 00:04:21,120 But in general, go with one day and then we have that secure one, which means that we'll only send 70 00:04:21,120 --> 00:04:22,010 the cookie. 71 00:04:22,700 --> 00:04:26,120 If the protocol is HTTPS. 72 00:04:26,840 --> 00:04:30,650 The thing is, though, we want to test it when we're developing. 73 00:04:30,680 --> 00:04:31,310 Correct. 74 00:04:31,400 --> 00:04:32,810 So here's what we can do. 75 00:04:33,510 --> 00:04:36,960 We can say secure, but we're not going hard code this. 76 00:04:37,320 --> 00:04:45,540 Well, essentially say that we want to check the node, underscore EMV value, and if it's production, 77 00:04:46,230 --> 00:04:48,090 then we want to set it to secure. 78 00:04:48,090 --> 00:04:50,520 If not, then we won't set it to secure. 79 00:04:50,520 --> 00:04:54,090 Otherwise we won't be able to test out our application. 80 00:04:54,240 --> 00:05:00,150 So this is located in a process dot EMV and then a node and underscore entry. 81 00:05:00,150 --> 00:05:07,650 And yes, once we push this up to production, this value will be true and also secure will be true, 82 00:05:07,830 --> 00:05:12,540 as I just showed you in the production application in the previous video. 83 00:05:12,570 --> 00:05:17,340 So in here, we'll say if it's equal to production, then it's going to be true. 84 00:05:17,340 --> 00:05:20,550 And then, of course, as a result, the secure will be true. 85 00:05:20,580 --> 00:05:26,140 If not, it's going to be false and then we're still able to test it in the local environment. 86 00:05:26,160 --> 00:05:26,670 That's it. 87 00:05:26,670 --> 00:05:27,660 That's all we have to do. 88 00:05:27,660 --> 00:05:28,230 For now. 89 00:05:28,920 --> 00:05:30,330 We just go with the rest dot cookie. 90 00:05:30,540 --> 00:05:33,870 And now let's navigate to the browser. 91 00:05:33,870 --> 00:05:39,270 Unless the STROUT, of course, you can send a request in the postman, which is something that I'll 92 00:05:39,270 --> 00:05:40,560 do at the very end of this video. 93 00:05:40,560 --> 00:05:44,160 But for now, let's just test it on the front and then I'll open up. 94 00:05:44,960 --> 00:05:46,040 We have tools. 95 00:05:46,310 --> 00:05:50,450 I want to see the application since that's where the cookies are located. 96 00:05:50,660 --> 00:05:52,310 So now let's log in. 97 00:05:52,580 --> 00:05:54,570 And it looks like I have a tiny bug. 98 00:05:54,590 --> 00:05:56,030 It's not the cookies. 99 00:05:56,060 --> 00:05:57,590 It's a cookie. 100 00:05:57,770 --> 00:05:58,760 My apologies. 101 00:05:59,120 --> 00:06:00,980 Let me try one more time. 102 00:06:01,220 --> 00:06:01,730 Yep. 103 00:06:01,760 --> 00:06:06,590 Logging is successful, and of course, we'll still have everything in the local storage. 104 00:06:06,620 --> 00:06:08,540 We haven't removed that logic. 105 00:06:08,630 --> 00:06:12,560 But if we take a look at the cookies, check it out. 106 00:06:12,590 --> 00:06:13,880 Now we have the token. 107 00:06:13,880 --> 00:06:18,000 We have the JWT value domain path and all that. 108 00:06:18,020 --> 00:06:19,610 Then we have expiration. 109 00:06:19,820 --> 00:06:24,350 It is HTTP only, so only the browser can read it. 110 00:06:24,620 --> 00:06:26,490 And we also have the size. 111 00:06:26,510 --> 00:06:28,850 Now notice secure is not true. 112 00:06:28,940 --> 00:06:29,370 Why? 113 00:06:29,390 --> 00:06:32,360 Well, because we are in the development. 114 00:06:32,600 --> 00:06:38,330 And what's really, really, really, really, really cool is the fact that automatically. 115 00:06:38,950 --> 00:06:40,000 Browser. 116 00:06:40,030 --> 00:06:46,180 Sends the cookie back with the future request. 117 00:06:46,720 --> 00:06:47,620 Don't believe me. 118 00:06:47,830 --> 00:06:54,070 Now let's refresh over here and let's say we're going to go to network. 119 00:06:54,340 --> 00:06:56,260 Do you want to see the stats? 120 00:06:56,570 --> 00:06:59,530 And now notice the cookies tab. 121 00:06:59,830 --> 00:07:01,930 So this is the request that we're making. 122 00:07:02,440 --> 00:07:05,440 And check it out so we automatically send this back. 123 00:07:06,070 --> 00:07:08,690 Again why it's so important. 124 00:07:08,710 --> 00:07:11,320 Well, because we don't have to store it anymore. 125 00:07:11,860 --> 00:07:19,240 The token in the state or in the local storage, it's simply going to be added to all the requests and 126 00:07:19,240 --> 00:07:22,940 then we can just check it on the server and be like, okay, is it valid? 127 00:07:22,960 --> 00:07:23,440 Yes. 128 00:07:23,470 --> 00:07:24,030 Good. 129 00:07:24,040 --> 00:07:24,880 Here's your data. 130 00:07:24,910 --> 00:07:27,460 If not, we lock the user out. 131 00:07:27,490 --> 00:07:30,340 Or send some other error response. 132 00:07:30,520 --> 00:07:35,740 And since we're using Express, it's really easy to use the cookie. 133 00:07:35,890 --> 00:07:40,540 Simply go with that cookie and then store whatever info we want over here. 134 00:07:40,570 --> 00:07:44,620 Of course, in our case, that's the JWT token. 135 00:07:44,830 --> 00:07:48,340 And like I promised, I also want to show you the postman response. 136 00:07:49,300 --> 00:07:53,890 So if I navigate over here, I notice I have the auth logging and all that. 137 00:07:54,010 --> 00:07:58,300 I'm going to go with my email and password and once we send. 138 00:07:58,510 --> 00:07:58,900 Yep. 139 00:07:58,900 --> 00:08:00,520 So we get all this data. 140 00:08:00,550 --> 00:08:10,090 But what I'm really looking for is the cookie is the token cookie where again I have all the necessary 141 00:08:10,090 --> 00:08:14,460 info to set up auth for my application.