1
00:00:01,000 --> 00:00:03,340
‫So we learned in the last lecture

2
00:00:03,340 --> 00:00:06,030
‫that the JSON web token should be stored

3
00:00:06,030 --> 00:00:08,930
‫in a secure HTTP-only cookie.

4
00:00:08,930 --> 00:00:11,470
‫But right now, we're only sending the token

5
00:00:11,470 --> 00:00:14,790
‫as a simple string in our JSON response.

6
00:00:14,790 --> 00:00:18,690
‫So in this video, let's also send the token as a cookie,

7
00:00:18,690 --> 00:00:20,960
‫so that the browser can then save it

8
00:00:20,960 --> 00:00:22,473
‫in this more secure way.

9
00:00:23,920 --> 00:00:25,550
‫So we're in our code.

10
00:00:25,550 --> 00:00:28,193
‫Do we actually send the token to the client?

11
00:00:29,170 --> 00:00:32,610
‫Well, remember, that's in the authController

12
00:00:32,610 --> 00:00:35,920
‫and right here in the createSendToken function.

13
00:00:35,920 --> 00:00:39,040
‫So before, we had basically all this code

14
00:00:39,040 --> 00:00:43,180
‫in many different places, but then we refactored all of that

15
00:00:43,180 --> 00:00:46,400
‫just into this createSendToken function.

16
00:00:46,400 --> 00:00:49,090
‫All right, and so this is where we're gonna work now.

17
00:00:49,090 --> 00:00:50,980
‫Now, I'm sure you are familiar

18
00:00:50,980 --> 00:00:53,320
‫with the way cookies work in general,

19
00:00:53,320 --> 00:00:56,680
‫but just to make sure we're all on the same page here,

20
00:00:56,680 --> 00:00:58,960
‫let's talk a little bit about cookies.

21
00:00:58,960 --> 00:01:02,330
‫So first of all, a cookie is basically just

22
00:01:02,330 --> 00:01:06,240
‫a small piece of text that a server can send to clients.

23
00:01:06,240 --> 00:01:08,960
‫Then when the client receives a cookie,

24
00:01:08,960 --> 00:01:10,650
‫it will automatically store it

25
00:01:10,650 --> 00:01:12,860
‫and then automatically send it back

26
00:01:12,860 --> 00:01:16,360
‫along with all future requests to the same server.

27
00:01:16,360 --> 00:01:20,130
‫All right, so again, a browser automatically stores

28
00:01:20,130 --> 00:01:23,010
‫a cookie that it receives and sends it back

29
00:01:23,010 --> 00:01:27,320
‫in all future requests to that server where it came from.

30
00:01:27,320 --> 00:01:29,500
‫Okay, now, for now, this is not gonna be

31
00:01:29,500 --> 00:01:31,090
‫really important for us

32
00:01:31,090 --> 00:01:34,020
‫as we're only testing the API using Postman.

33
00:01:34,020 --> 00:01:37,110
‫But a bit later, when we're gonna render dynamic webpages

34
00:01:37,110 --> 00:01:39,510
‫and really interact with the browser,

35
00:01:39,510 --> 00:01:41,450
‫then it will become really important

36
00:01:41,450 --> 00:01:44,220
‫that the browser sends back the token basically

37
00:01:44,220 --> 00:01:46,410
‫automatically in each request.

38
00:01:46,410 --> 00:01:49,640
‫Okay, and by then, of course, we will talk more about that.

39
00:01:49,640 --> 00:01:52,220
‫But anyway, let's now learn how to actually create

40
00:01:52,220 --> 00:01:53,950
‫and send a cookie.

41
00:01:53,950 --> 00:01:57,720
‫So in order to send a cookie, it's actually very easy.

42
00:01:57,720 --> 00:02:00,380
‫All we have to do is to basically attach it

43
00:02:00,380 --> 00:02:02,023
‫to the response object.

44
00:02:03,010 --> 00:02:06,910
‫So we say res.cookie and then all we have to do

45
00:02:06,910 --> 00:02:09,550
‫is to specify the name of the cookie,

46
00:02:09,550 --> 00:02:11,630
‫and I'm calling it JSON web token,

47
00:02:11,630 --> 00:02:14,860
‫then the data that we actually want to send in the cookie,

48
00:02:14,860 --> 00:02:17,830
‫and so that's of course gonna be the token variable

49
00:02:17,830 --> 00:02:22,020
‫and then after that, a couple of options for the cookie.

50
00:02:22,020 --> 00:02:24,119
‫And the first option that we're gonna specify

51
00:02:24,119 --> 00:02:26,810
‫is the expires property.

52
00:02:26,810 --> 00:02:29,620
‫Okay, so basically, this expires property

53
00:02:29,620 --> 00:02:33,200
‫will make it so that the browser or the client in general

54
00:02:33,200 --> 00:02:36,360
‫will delete the cookie after it has expired.

55
00:02:36,360 --> 00:02:38,780
‫Okay, and so we set the expiration date

56
00:02:38,780 --> 00:02:43,360
‫similar to the one that we set in the JSON web token, okay.

57
00:02:43,360 --> 00:02:45,810
‫So let's actually create a new variable for that,

58
00:02:46,760 --> 00:02:49,390
‫okay, because the JSON web token package

59
00:02:49,390 --> 00:02:51,870
‫can then work with this format.

60
00:02:51,870 --> 00:02:55,450
‫Okay, but in JavaScript, this is kind of meaningless

61
00:02:55,450 --> 00:02:58,923
‫and so instead, let's create a variable with a real number.

62
00:02:59,850 --> 00:03:02,053
‫So let's call it still JWT,

63
00:03:03,090 --> 00:03:03,963
‫then cookie,

64
00:03:06,210 --> 00:03:10,740
‫expires in, and we still set it to 90, so 90 days,

65
00:03:10,740 --> 00:03:12,810
‫but again, without the D.

66
00:03:12,810 --> 00:03:16,210
‫Okay, so that now we can make actually operations with it

67
00:03:16,210 --> 00:03:21,080
‫because we will need to convert it to milliseconds, okay.

68
00:03:21,080 --> 00:03:23,540
‫So when should this cookie expire?

69
00:03:23,540 --> 00:03:26,610
‫It should expire at a new date.

70
00:03:26,610 --> 00:03:28,890
‫So in JavaScript, when specifying dates,

71
00:03:28,890 --> 00:03:30,800
‫we always need to say new Date

72
00:03:30,800 --> 00:03:35,403
‫and then it should expire at right now, plus these 90 days.

73
00:03:36,820 --> 00:03:39,483
‫Okay, so now, like this of course.

74
00:03:41,470 --> 00:03:43,633
‫And then process.env,

75
00:03:44,894 --> 00:03:48,280
‫and now, let's use this one and then

76
00:03:49,840 --> 00:03:52,320
‫simply put the cookie in there, okay.

77
00:03:52,320 --> 00:03:55,560
‫But now, of course, we need to convert that to milliseconds.

78
00:03:55,560 --> 00:03:57,410
‫So we have 90 days right now.

79
00:03:57,410 --> 00:03:59,910
‫So two hours, it's times 24.

80
00:03:59,910 --> 00:04:01,770
‫Two minutes, it's times 60.

81
00:04:01,770 --> 00:04:04,810
‫Two seconds, it's times 60 again.

82
00:04:04,810 --> 00:04:08,610
‫And then to milliseconds, times a thousand, okay.

83
00:04:08,610 --> 00:04:10,600
‫And of course, I could do it all in one go,

84
00:04:10,600 --> 00:04:14,090
‫but this is just to specify what exactly we're doing.

85
00:04:14,090 --> 00:04:15,120
‫So to show that we're actually

86
00:04:15,120 --> 00:04:17,163
‫converting it to milliseconds.

87
00:04:18,040 --> 00:04:21,603
‫The next option is gonna be the secure option.

88
00:04:22,610 --> 00:04:24,560
‫And so we're gonna set this one to true

89
00:04:24,560 --> 00:04:27,530
‫and so like this, the cookie will only be sent

90
00:04:27,530 --> 00:04:29,140
‫on an encrypted connection.

91
00:04:29,140 --> 00:04:32,830
‫So basically, we're only using HTTPS, all right.

92
00:04:32,830 --> 00:04:37,030
‫And then finally, it's that httpOnly option

93
00:04:37,030 --> 00:04:38,593
‫that we've talked about before.

94
00:04:41,630 --> 00:04:43,740
‫Okay, so we set this one to true

95
00:04:43,740 --> 00:04:45,820
‫and so this will make it so that the cookie

96
00:04:45,820 --> 00:04:50,410
‫cannot be accessed or modified in any way by the browser.

97
00:04:50,410 --> 00:04:53,280
‫Okay, and so this is important in order to prevent

98
00:04:53,280 --> 00:04:55,900
‫those cross-site scripting attacks.

99
00:04:55,900 --> 00:04:58,110
‫All right, so all the browser is gonna do

100
00:04:58,110 --> 00:05:01,340
‫when we set httpOnly to true is to basically

101
00:05:01,340 --> 00:05:03,390
‫receive the cookie, store it,

102
00:05:03,390 --> 00:05:07,180
‫and then send it automatically along with every request.

103
00:05:07,180 --> 00:05:09,180
‫Okay, and that's actually it.

104
00:05:09,180 --> 00:05:12,770
‫So this is how we basically define the cookie,

105
00:05:12,770 --> 00:05:14,360
‫so let's say this part,

106
00:05:14,360 --> 00:05:17,510
‫and then we send it using res.cookie.

107
00:05:17,510 --> 00:05:20,850
‫Now, if we wanted to test this right now, it wouldn't work

108
00:05:20,850 --> 00:05:23,990
‫because right now, we're actually not using HTTPS.

109
00:05:23,990 --> 00:05:26,650
‫And so because of this secure: true,

110
00:05:26,650 --> 00:05:28,130
‫the cookie would not be created

111
00:05:28,130 --> 00:05:30,590
‫and not be sent to the client.

112
00:05:30,590 --> 00:05:31,920
‫All right, and so basically,

113
00:05:31,920 --> 00:05:36,180
‫we only want to activate this part here in production.

114
00:05:36,180 --> 00:05:38,820
‫So what I'm gonna do is to basically export

115
00:05:38,820 --> 00:05:42,510
‫this entire object here into a separate variable.

116
00:05:42,510 --> 00:05:44,160
‫Okay, so let me show that to you.

117
00:05:45,550 --> 00:05:46,383
‫So const

118
00:05:47,242 --> 00:05:49,710
‫cookieOptions

119
00:05:50,780 --> 00:05:54,003
‫should be equal to this and then here, we pass that in.

120
00:05:55,440 --> 00:05:56,273
‫All right.

121
00:05:57,480 --> 00:06:00,300
‫Now, of course, we then don't want this part here,

122
00:06:00,300 --> 00:06:03,100
‫but only when we are in production.

123
00:06:03,100 --> 00:06:04,050
‫So let's say

124
00:06:06,830 --> 00:06:11,670
‫if process.env.NODE_ENV,

125
00:06:11,670 --> 00:06:13,500
‫remember that's where it's stored

126
00:06:13,500 --> 00:06:15,023
‫if we're in production or not.

127
00:06:16,130 --> 00:06:17,780
‫So if that's equal to production,

128
00:06:20,210 --> 00:06:24,590
‫then set cookieOptions.secure

129
00:06:26,490 --> 00:06:27,363
‫equal to true.

130
00:06:28,970 --> 00:06:31,533
‫Okay, and now, we can remove it from here.

131
00:06:33,600 --> 00:06:36,430
‫Yeah, so now, only when we're in production,

132
00:06:36,430 --> 00:06:39,300
‫we will get the secure options set to true.

133
00:06:39,300 --> 00:06:42,150
‫And otherwise, it will only be sent like this,

134
00:06:42,150 --> 00:06:45,470
‫so just with the expiration date and httpOnly.

135
00:06:45,470 --> 00:06:48,263
‫Okay, and so let's now actually test this.

136
00:06:50,200 --> 00:06:53,153
‫And I'm gonna test it with creating a new user.

137
00:06:54,940 --> 00:06:56,970
‫So here in Sign Up actually

138
00:06:58,600 --> 00:06:59,750
‫and let's call this one

139
00:07:00,880 --> 00:07:03,180
‫user@jonas.io.

140
00:07:03,180 --> 00:07:04,733
‫Always with the same password.

141
00:07:07,390 --> 00:07:09,100
‫I'm gonna call him User as well

142
00:07:09,100 --> 00:07:13,273
‫and let's say that the role here is a guide,

143
00:07:14,520 --> 00:07:17,823
‫so just so that we have some different roles here as well.

144
00:07:19,040 --> 00:07:20,360
‫Give it some more space.

145
00:07:20,360 --> 00:07:22,670
‫And now, let's try it actually.

146
00:07:22,670 --> 00:07:25,500
‫And response is just as we expected

147
00:07:25,500 --> 00:07:26,810
‫with the difference that now,

148
00:07:26,810 --> 00:07:30,190
‫we get one cookie here in this Cookie tab.

149
00:07:30,190 --> 00:07:32,160
‫And so indeed, here, we get

150
00:07:32,160 --> 00:07:35,450
‫the name of the cookie, the value.

151
00:07:35,450 --> 00:07:37,220
‫We also have the expiration date,

152
00:07:37,220 --> 00:07:40,160
‫which is exactly 90 days from right now.

153
00:07:40,160 --> 00:07:44,913
‫We have httpOnly set to true and also, secure set to false.

154
00:07:45,970 --> 00:07:47,210
‫All right.

155
00:07:47,210 --> 00:07:49,970
‫Great, we can also see all the cookies that we have

156
00:07:49,970 --> 00:07:51,733
‫here in this Cookie tab.

157
00:07:52,690 --> 00:07:55,480
‫And so again, we see that one cookie that we received

158
00:07:55,480 --> 00:07:57,673
‫from this domain, all right.

159
00:07:58,630 --> 00:08:01,540
‫Now, just one last thing that I actually want to change

160
00:08:01,540 --> 00:08:04,130
‫in that function that we're just working on,

161
00:08:04,130 --> 00:08:05,313
‫so the createSendToken,

162
00:08:06,200 --> 00:08:10,660
‫is to basically get rid of this password here in the output.

163
00:08:10,660 --> 00:08:13,560
‫Okay, so in our schema, we actually have it set

164
00:08:13,560 --> 00:08:16,510
‫to select false, so that it doesn't show up

165
00:08:16,510 --> 00:08:18,380
‫when we query for all the users.

166
00:08:18,380 --> 00:08:21,290
‫But in this case, it comes from creating a new document

167
00:08:21,290 --> 00:08:24,410
‫and so that's different and so that's why we see it here.

168
00:08:24,410 --> 00:08:27,373
‫Okay, but we can actually very easily fix this.

169
00:08:28,650 --> 00:08:31,850
‫Okay, so all we need to do actually is to set

170
00:08:33,660 --> 00:08:35,010
‫user.password

171
00:08:36,370 --> 00:08:37,563
‫to undefined.

172
00:08:38,750 --> 00:08:40,590
‫All right, and so that should

173
00:08:42,630 --> 00:08:43,920
‫remove the passwords

174
00:08:46,340 --> 00:08:48,490
‫from the output.

175
00:08:48,490 --> 00:08:49,630
‫Okay.

176
00:08:49,630 --> 00:08:53,203
‫So let's just delete this user here that we just created.

177
00:08:57,890 --> 00:08:59,850
‫And try it again

178
00:08:59,850 --> 00:09:04,010
‫just to see if the password doesn't show up anymore.

179
00:09:04,010 --> 00:09:07,170
‫And yeah, indeed now, it is gone.

180
00:09:07,170 --> 00:09:09,820
‫And still, our cookie, of course, is here.

181
00:09:09,820 --> 00:09:12,450
‫And when we now come here to our Cookies tab,

182
00:09:12,450 --> 00:09:14,710
‫well, then you still have only one cookie

183
00:09:14,710 --> 00:09:17,430
‫because the old one was now basically overwritten

184
00:09:17,430 --> 00:09:18,600
‫by this new one

185
00:09:18,600 --> 00:09:20,380
‫and that's because they have the same name.

186
00:09:20,380 --> 00:09:23,940
‫So the name is like the unique identifier for a cookie.

187
00:09:23,940 --> 00:09:26,160
‫And so if we receive one with the a name

188
00:09:26,160 --> 00:09:27,570
‫that was already given,

189
00:09:27,570 --> 00:09:30,683
‫well, then the old one is simply replaced.

190
00:09:31,720 --> 00:09:33,800
‫Okay, and that's actually it.

191
00:09:33,800 --> 00:09:36,737
‫So this is how we send an HTTP-only cookie

192
00:09:36,737 --> 00:09:38,730
‫and again, we will talk more about this

193
00:09:38,730 --> 00:09:40,813
‫when we build our dynamic website.