1
00:00:01,160 --> 00:00:04,610
‫Now it's finally time to use the login API

2
00:00:04,610 --> 00:00:06,830
‫that we built in previous sections

3
00:00:06,830 --> 00:00:09,100
‫and there is a ton of stuff to do here

4
00:00:09,100 --> 00:00:12,880
‫in order to make the front-end interact with the back-end.

5
00:00:12,880 --> 00:00:15,680
‫And so we're doing this in separate lectures.

6
00:00:15,680 --> 00:00:17,833
‫Anyway, let's now get started.

7
00:00:19,740 --> 00:00:21,570
‫And this is how it's gonna work.

8
00:00:21,570 --> 00:00:25,180
‫So, we're gonna allow users to log into our website

9
00:00:25,180 --> 00:00:28,990
‫by doing an HTTP request, or an ATEX call

10
00:00:28,990 --> 00:00:31,580
‫as many people like to call it also.

11
00:00:31,580 --> 00:00:35,890
‫And we're doing that HTTP request to the login API end point

12
00:00:35,890 --> 00:00:38,340
‫that we implemented before using the data

13
00:00:38,340 --> 00:00:41,820
‫that the user provides in this form that we have here.

14
00:00:41,820 --> 00:00:45,614
‫So, remember that our API will then send back a cookie

15
00:00:45,614 --> 00:00:49,010
‫which automatically gets stored in the browser.

16
00:00:49,010 --> 00:00:51,650
‫And also automatically gets send back

17
00:00:51,650 --> 00:00:53,990
‫with each subsequent request.

18
00:00:53,990 --> 00:00:56,950
‫And as you will see, this is a fundamental key

19
00:00:56,950 --> 00:01:00,040
‫in order to make our authentication system work.

20
00:01:00,040 --> 00:01:01,940
‫But anyway, since we're doing

21
00:01:01,940 --> 00:01:04,518
‫this HTTP request in the browser,

22
00:01:04,518 --> 00:01:09,220
‫we will, of course, again, be working on the client side.

23
00:01:09,220 --> 00:01:10,900
‫But anyway, since we're doing

24
00:01:10,900 --> 00:01:13,570
‫an HTTP request in the browser,

25
00:01:13,570 --> 00:01:17,010
‫we'll still be working on client side jobs script code.

26
00:01:17,010 --> 00:01:20,410
‫So just like we did with the Mapbox implementation.

27
00:01:20,410 --> 00:01:21,570
‫Alright?

28
00:01:21,570 --> 00:01:24,430
‫So let's now go ahead and create a new file here.

29
00:01:24,430 --> 00:01:29,063
‫And so that's in public, js, and new file,

30
00:01:30,190 --> 00:01:33,030
‫which I'm gonna call login.js

31
00:01:33,960 --> 00:01:36,380
‫and in the next video, we're actually going to bundle

32
00:01:36,380 --> 00:01:38,260
‫all these separate JavaScript files

33
00:01:38,260 --> 00:01:40,630
‫that we're creating here for the front-end

34
00:01:40,630 --> 00:01:42,970
‫together into one big bundle.

35
00:01:42,970 --> 00:01:43,820
‫Alright?

36
00:01:43,820 --> 00:01:47,240
‫But for now, let's actually just focus on making

37
00:01:47,240 --> 00:01:49,510
‫this login functionality work.

38
00:01:49,510 --> 00:01:52,820
‫But anyway, let's now start by adding an event listener,

39
00:01:52,820 --> 00:01:57,139
‫listening for the submit event on our login form, okay?

40
00:01:57,139 --> 00:02:01,260
‫So, our login form has this form class here.

41
00:02:01,260 --> 00:02:04,307
‫Okay, so let's now select this for element

42
00:02:04,307 --> 00:02:07,820
‫and then on there, listen for the submit event.

43
00:02:07,820 --> 00:02:10,430
‫I hope that you're familiar with this kind of logic

44
00:02:10,430 --> 00:02:12,510
‫in the client-side JavaScript.

45
00:02:12,510 --> 00:02:14,810
‫And so hopefully, this is nothing new for you.

46
00:02:15,810 --> 00:02:19,193
‫So, document.querySelector,

47
00:02:20,260 --> 00:02:23,063
‫which we use in order to select based on the class.

48
00:02:24,940 --> 00:02:27,040
‫Add then that Selector name,

49
00:02:27,040 --> 00:02:32,040
‫and now add EventListener, listening for the submit event.

50
00:02:32,940 --> 00:02:35,740
‫So basically, an event that the browser will fire off

51
00:02:35,740 --> 00:02:39,363
‫whenever a user clicks on the submit button on the form.

52
00:02:40,220 --> 00:02:41,810
‫Add then in the collect function,

53
00:02:41,810 --> 00:02:46,123
‫we're gonna have access to that event itself, okay?

54
00:02:47,680 --> 00:02:49,500
‫And so the third thing that we actually do

55
00:02:49,500 --> 00:02:52,843
‫is to say event.preventDefault.

56
00:02:56,770 --> 00:02:57,750
‫Okay?

57
00:02:57,750 --> 00:03:01,580
‫So this prevents the form from la-loading any other page.

58
00:03:01,580 --> 00:03:03,925
‫Next up, let's actually get the email

59
00:03:03,925 --> 00:03:06,740
‫and the password value that the user puts in.

60
00:03:06,740 --> 00:03:10,485
‫And so these are, in this element, with the ID email,

61
00:03:10,485 --> 00:03:13,310
‫and the ID password, okay?

62
00:03:13,310 --> 00:03:15,020
‫So these two input fields

63
00:03:15,020 --> 00:03:18,114
‫and let's get this data as well.

64
00:03:18,114 --> 00:03:21,364
‫(typing on a keyboard)

65
00:03:24,933 --> 00:03:26,440
‫So document,

66
00:03:26,440 --> 00:03:27,933
‫get element by ID.

67
00:03:29,310 --> 00:03:32,230
‫Email, and then we use the value property

68
00:03:32,230 --> 00:03:34,670
‫in order to reach that value out there.

69
00:03:34,670 --> 00:03:37,893
‫Not nodeValue, just value.

70
00:03:39,520 --> 00:03:42,930
‫Let's duplicate this line, okay?

71
00:03:42,930 --> 00:03:45,330
‫And so now let's do the actual logging in

72
00:03:45,330 --> 00:03:47,940
‫in a separate function, okay?

73
00:03:47,940 --> 00:03:49,880
‫Now we get here, this eslint error

74
00:03:49,880 --> 00:03:53,040
‫and that's again because we have eslint

75
00:03:53,040 --> 00:03:56,450
‫only configurated for not JS code.

76
00:03:56,450 --> 00:03:59,963
‫And so let's actually disable that just like we did here.

77
00:04:01,340 --> 00:04:03,233
‫So just grab this piece of code.

78
00:04:07,790 --> 00:04:08,630
‫Alright?

79
00:04:08,630 --> 00:04:09,910
‫And now as I was saying,

80
00:04:09,910 --> 00:04:12,123
‫let's now create that login function.

81
00:04:15,270 --> 00:04:16,370
‫So and just like this,

82
00:04:17,380 --> 00:04:19,120
‫and this function is going to accept

83
00:04:19,120 --> 00:04:20,520
‫an email and and a password.

84
00:04:24,840 --> 00:04:25,770
‫And first of all,

85
00:04:25,770 --> 00:04:29,080
‫let's just see if this code is actually working.

86
00:04:29,080 --> 00:04:30,533
‫So we're going to alert,

87
00:04:31,560 --> 00:04:33,740
‫so basically create an alert window.

88
00:04:33,740 --> 00:04:36,563
‫And with this email and password.

89
00:04:38,910 --> 00:04:39,743
‫Alright?

90
00:04:42,920 --> 00:04:45,710
‫Now of course we also need to call this function

91
00:04:45,710 --> 00:04:49,300
‫again with email and password.

92
00:04:49,300 --> 00:04:54,300
‫And then finally, we also need to include this login file

93
00:04:54,600 --> 00:04:58,370
‫into our base template, alright?

94
00:04:58,370 --> 00:05:00,600
‫And again, as I was saying in the beginning,

95
00:05:00,600 --> 00:05:02,340
‫in the next video, we're going to bundle

96
00:05:02,340 --> 00:05:04,640
‫all of this front-end code here together

97
00:05:04,640 --> 00:05:06,423
‫into one big JavaScript file.

98
00:05:07,820 --> 00:05:08,653
‫Alright?

99
00:05:08,653 --> 00:05:10,810
‫So that's a lot better for performance

100
00:05:10,810 --> 00:05:14,143
‫and it's also a better developer experience for ourselves.

101
00:05:15,250 --> 00:05:18,330
‫Anyway, this should now be working.

102
00:05:18,330 --> 00:05:20,093
‫Let's just reload this page here.

103
00:05:25,783 --> 00:05:27,620
‫So I have to fill in, validate here,

104
00:05:27,620 --> 00:05:30,563
‫anyway, Chrome will not even allow me to submit the form.

105
00:05:32,920 --> 00:05:35,100
‫Alright, so here we get our alert

106
00:05:35,100 --> 00:05:37,020
‫with the email we just put in

107
00:05:37,020 --> 00:05:38,860
‫and then the password, I guess,

108
00:05:38,860 --> 00:05:40,080
‫doesn't show up because

109
00:05:40,080 --> 00:05:42,983
‫we kind of specified two values there.

110
00:05:46,140 --> 00:05:50,470
‫So instead, let's specify an object here

111
00:05:50,470 --> 00:05:52,020
‫and see if it works then again.

112
00:05:54,072 --> 00:05:57,322
‫(typing on a keyboard)

113
00:06:03,770 --> 00:06:05,410
‫Well, I guess it tries to convert

114
00:06:05,410 --> 00:06:07,473
‫that object to a string here.

115
00:06:08,400 --> 00:06:11,530
‫Okay, but, it doesn't really matter here.

116
00:06:11,530 --> 00:06:15,573
‫I'm usually more used to using Console.log instead of alert.

117
00:06:16,530 --> 00:06:17,900
‫Alright?

118
00:06:17,900 --> 00:06:20,960
‫But anyway, I'm sure it's working now here.

119
00:06:20,960 --> 00:06:23,783
‫And so let's now go ahead and create this function.

120
00:06:24,640 --> 00:06:28,910
‫So, in order to do these HTTP requests for the login,

121
00:06:28,910 --> 00:06:29,890
‫we are going to use

122
00:06:29,890 --> 00:06:34,130
‫a very popular library called Axios, okay?

123
00:06:34,130 --> 00:06:36,430
‫And in the next video we're actually going to download

124
00:06:36,430 --> 00:06:39,460
‫this library from NPM and bundle it together

125
00:06:39,460 --> 00:06:41,000
‫with all our other scripts,

126
00:06:41,000 --> 00:06:43,713
‫but for now, let's use it from a CDN.

127
00:06:45,240 --> 00:06:48,860
‫So, let's just Google

128
00:06:48,860 --> 00:06:52,260
‫Axios CDN, alright?

129
00:06:52,260 --> 00:06:55,513
‫Then, go ahead and copy this one here,

130
00:06:57,650 --> 00:06:59,403
‫and then, in our base script,

131
00:07:00,610 --> 00:07:04,583
‫let's put it right here at the first one, alright?

132
00:07:06,230 --> 00:07:07,300
‫So this will then expose

133
00:07:07,300 --> 00:07:10,080
‫an Axios object to the global scope,

134
00:07:10,080 --> 00:07:14,500
‫which we can then use in our login function, okay?

135
00:07:14,500 --> 00:07:17,123
‫And so we can then now say Axios,

136
00:07:18,000 --> 00:07:21,003
‫and then pass in the options for our request.

137
00:07:22,320 --> 00:07:26,380
‫So first off, let's say that we're doing a post-request.

138
00:07:26,380 --> 00:07:28,593
‫Then, we need a URL.

139
00:07:29,770 --> 00:07:31,140
‫Alright?

140
00:07:31,140 --> 00:07:33,313
‫So let's actually get that from Postman.

141
00:07:39,530 --> 00:07:41,543
‫So, this is our URL here.

142
00:07:43,250 --> 00:07:45,040
‫And we're also going to, of course,

143
00:07:45,040 --> 00:07:47,853
‫append the host then on there.

144
00:07:49,400 --> 00:07:52,910
‫So then here of course, it is http

145
00:07:55,440 --> 00:07:57,093
‫and then local host basically.

146
00:08:01,250 --> 00:08:02,530
‫And,

147
00:08:02,530 --> 00:08:05,260
‫so this is our login input,

148
00:08:05,260 --> 00:08:07,490
‫and now we need to specify the data

149
00:08:07,490 --> 00:08:10,473
‫that we're sending along with the request in the body.

150
00:08:13,040 --> 00:08:13,873
‫Alright?

151
00:08:13,873 --> 00:08:17,870
‫And so that is email: email.

152
00:08:17,870 --> 00:08:21,600
‫And so, as you already know, we can remove this email.

153
00:08:21,600 --> 00:08:22,433
‫Okay?

154
00:08:22,433 --> 00:08:24,810
‫So it's called email here, because our end point

155
00:08:24,810 --> 00:08:29,210
‫expects the data to be called email, right?

156
00:08:29,210 --> 00:08:31,250
‫So that's what we have here in the body.

157
00:08:31,250 --> 00:08:33,997
‫We need to specify a property called email,

158
00:08:33,997 --> 00:08:35,790
‫and one called password.

159
00:08:35,790 --> 00:08:37,830
‫And so that's exactly what we're doing here

160
00:08:37,830 --> 00:08:41,630
‫but it then has the same name as this parameter here.

161
00:08:41,630 --> 00:08:44,030
‫And so it's enough to just say email

162
00:08:45,000 --> 00:08:48,123
‫and the same applies for the password.

163
00:08:49,720 --> 00:08:50,760
‫Okay?

164
00:08:50,760 --> 00:08:53,350
‫Now, Axios here then returns a promise

165
00:08:53,350 --> 00:08:55,890
‫and so let's actually use a single await

166
00:08:55,890 --> 00:08:59,210
‫in order to wait for that value to come back.

167
00:08:59,210 --> 00:09:04,210
‫So await here, and then async right here.

168
00:09:05,110 --> 00:09:07,950
‫Now, keep in mind that this is client-facing code

169
00:09:07,950 --> 00:09:09,750
‫and only the more modern browsers

170
00:09:09,750 --> 00:09:12,290
‫can actually run a single await functions

171
00:09:12,290 --> 00:09:15,573
‫but in this course, I'm not really going to go into that.

172
00:09:17,130 --> 00:09:18,310
‫Okay?

173
00:09:18,310 --> 00:09:22,510
‫Anyways, let's save the result of this awaiting the promise

174
00:09:22,510 --> 00:09:25,640
‫into the result variable.

175
00:09:25,640 --> 00:09:28,623
‫And then just, to take a look at the result,

176
00:09:30,000 --> 00:09:33,453
‫let's say console.log result.

177
00:09:34,500 --> 00:09:35,333
‫Okay?

178
00:09:35,333 --> 00:09:37,870
‫Now one thing that I really like about Axios

179
00:09:37,870 --> 00:09:40,240
‫is the fact that it's going to throw an error

180
00:09:40,240 --> 00:09:43,780
‫whenever we get an error back from our API input.

181
00:09:43,780 --> 00:09:46,480
‫So let's say that there is a wrong password

182
00:09:46,480 --> 00:09:48,980
‫and so the server will send back a 403

183
00:09:48,980 --> 00:09:50,610
‫and so basically, an error.

184
00:09:50,610 --> 00:09:52,768
‫And so whenever there is an error,

185
00:09:52,768 --> 00:09:55,290
‫Axios will trigger an error as well.

186
00:09:55,290 --> 00:09:58,680
‫And so, that's very handy because, with that,

187
00:09:58,680 --> 00:10:00,763
‫we can now use a try catch block.

188
00:10:02,660 --> 00:10:03,493
‫Okay?

189
00:10:03,493 --> 00:10:05,840
‫So basically in order to do some error handling

190
00:10:05,840 --> 00:10:07,173
‫here on the client side.

191
00:10:08,750 --> 00:10:09,770
‫So, for example,

192
00:10:09,770 --> 00:10:12,090
‫when the user is correctly logged in,

193
00:10:12,090 --> 00:10:14,375
‫then you want to display some message saying that,

194
00:10:14,375 --> 00:10:16,470
‫and maybe some other logic,

195
00:10:16,470 --> 00:10:19,540
‫but if not, well, then we're going to be entering

196
00:10:19,540 --> 00:10:20,543
‫the catch block,

197
00:10:21,770 --> 00:10:26,093
‫and can then, take some other action based on the error.

198
00:10:27,022 --> 00:10:30,272
‫(typing on a keyboard)

199
00:10:31,670 --> 00:10:34,023
‫So, let's take a look at the error as well.

200
00:10:37,480 --> 00:10:42,120
‫And just to make sure, I also want to log the email

201
00:10:43,200 --> 00:10:45,253
‫and password to the console.

202
00:10:49,130 --> 00:10:51,583
‫So, let's try that here.

203
00:10:52,430 --> 00:10:53,663
‫Reload our page,

204
00:10:55,249 --> 00:10:58,499
‫(typing on a keyboard)

205
00:11:02,240 --> 00:11:05,160
‫And I'm putting a wrong password in now, okay?

206
00:11:05,160 --> 00:11:06,993
‫Test one, two, three, four, five.

207
00:11:09,100 --> 00:11:12,070
‫Let's take a look at our console here as well.

208
00:11:12,070 --> 00:11:15,740
‫And we get this error here from mapbox, js,

209
00:11:15,740 --> 00:11:17,330
‫but don't worry about that.

210
00:11:17,330 --> 00:11:19,430
‫We're going to fix that a bit later again.

211
00:11:21,848 --> 00:11:24,890
‫Bur for now, let's take a look at what happens here.

212
00:11:24,890 --> 00:11:28,900
‫And here we get some nice error, alright?

213
00:11:28,900 --> 00:11:32,670
‫And so, actually when we need to take a look at here

214
00:11:32,670 --> 00:11:34,253
‫is error.response.

215
00:11:36,630 --> 00:11:38,910
‫And then point data.

216
00:11:38,910 --> 00:11:42,550
‫Okay, and you will find this here in the Axios documentation

217
00:11:42,550 --> 00:11:45,113
‫in case you're wondering where that is coming from.

218
00:11:46,660 --> 00:11:47,493
‫Alright?

219
00:11:49,290 --> 00:11:52,140
‫Let me actually just go ahead and copy this email because

220
00:11:53,450 --> 00:11:56,713
‫it's not so good to always write it out manually.

221
00:12:00,200 --> 00:12:04,263
‫And now we actually get some nicely formatted error here.

222
00:12:05,440 --> 00:12:06,273
‫Okay?

223
00:12:06,273 --> 00:12:08,810
‫And so this is basically exactly the jsencode

224
00:12:08,810 --> 00:12:11,310
‫that we sent back from our server.

225
00:12:11,310 --> 00:12:12,143
‫Right?

226
00:12:12,143 --> 00:12:13,320
‫So, this is exactly the same

227
00:12:13,320 --> 00:12:15,220
‫as we've been seeing in Postman.

228
00:12:15,220 --> 00:12:20,220
‫So we get our entire error, the message, and also the stack.

229
00:12:20,270 --> 00:12:23,420
‫And so we see that we probably didn't provide

230
00:12:23,420 --> 00:12:26,523
‫the email and password correctly for some reason.

231
00:12:27,550 --> 00:12:30,330
‫So let's go back, take a look.

232
00:12:30,330 --> 00:12:34,230
‫Oh, so I did something weird here

233
00:12:34,230 --> 00:12:36,230
‫where I passed an object with

234
00:12:36,230 --> 00:12:38,003
‫both the email and the password.

235
00:12:38,980 --> 00:12:41,060
‫And so I think that that's from before

236
00:12:41,060 --> 00:12:42,900
‫when it tried to do that alert

237
00:12:42,900 --> 00:12:45,670
‫and I guess I did this in the wrong place.

238
00:12:45,670 --> 00:12:49,570
‫And so, that's why we actually saw undefined here.

239
00:12:49,570 --> 00:12:51,260
‫And here we got this object.

240
00:12:51,260 --> 00:12:53,820
‫So basically, email was this entire object,

241
00:12:53,820 --> 00:12:56,023
‫and password was then this undefined.

242
00:12:58,290 --> 00:12:59,123
‫Okay?

243
00:12:59,123 --> 00:13:01,400
‫So now, this should fix it,

244
00:13:01,400 --> 00:13:02,613
‫give it a reload.

245
00:13:07,930 --> 00:13:10,760
‫Ah, now we get this correct error

246
00:13:10,760 --> 00:13:12,500
‫that we were actually expecting.

247
00:13:12,500 --> 00:13:15,580
‫So now it's an incorrect email or password

248
00:13:15,580 --> 00:13:18,880
‫because I specified a wrong password, alright?

249
00:13:18,880 --> 00:13:21,441
‫But now, let's actually remove the five

250
00:13:21,441 --> 00:13:24,973
‫and so then test one, two, three, four, should be correct.

251
00:13:25,860 --> 00:13:28,010
‫So, let's log in,

252
00:13:28,010 --> 00:13:31,810
‫and now we get a 200 response.

253
00:13:31,810 --> 00:13:33,253
‫So, a successful one.

254
00:13:34,290 --> 00:13:35,890
‫So let's open this

255
00:13:35,890 --> 00:13:39,410
‫and what we are actually interested in is the data.

256
00:13:39,410 --> 00:13:42,030
‫So basically response.data

257
00:13:42,030 --> 00:13:43,260
‫because this is then actually

258
00:13:43,260 --> 00:13:46,960
‫where our jsen response is located.

259
00:13:46,960 --> 00:13:48,653
‫So here, we get,

260
00:13:50,210 --> 00:13:55,210
‫this data here, and we also get the status and the token.

261
00:13:55,410 --> 00:13:59,030
‫And so, this is here our correct jsen web token

262
00:13:59,030 --> 00:14:01,550
‫corresponding to this logged in user.

263
00:14:01,550 --> 00:14:03,170
‫Now, what's really interesting

264
00:14:03,170 --> 00:14:05,400
‫is to take a look at our cookies.

265
00:14:05,400 --> 00:14:07,540
‫And we do that in Google Chrome at least

266
00:14:07,540 --> 00:14:09,560
‫by clicking on this icon here

267
00:14:09,560 --> 00:14:12,180
‫and then down here, you have the cookies.

268
00:14:12,180 --> 00:14:14,900
‫And it also says that our connection is not secure

269
00:14:14,900 --> 00:14:15,940
‫and that's simply because

270
00:14:15,940 --> 00:14:19,330
‫we're not using HTTPS at this point,

271
00:14:19,330 --> 00:14:20,920
‫but nevermind about that.

272
00:14:20,920 --> 00:14:23,530
‫What matters here is that we now have this cookie

273
00:14:24,630 --> 00:14:27,620
‫and indeed, it is called, jsen web token,

274
00:14:27,620 --> 00:14:31,060
‫and it has exactly the jsen web token

275
00:14:31,060 --> 00:14:32,203
‫that we see down here.

276
00:14:33,360 --> 00:14:36,620
‫So, this is only the end, basically, of the string,

277
00:14:36,620 --> 00:14:40,710
‫so you see that this is equal to what we have down here.

278
00:14:40,710 --> 00:14:43,560
‫And it's this cookie here, will actually enable us

279
00:14:43,560 --> 00:14:46,030
‫to build this entire authentication.

280
00:14:46,030 --> 00:14:49,000
‫Again, because the browser will not send this cookie

281
00:14:49,000 --> 00:14:51,470
‫along with every new request.

282
00:14:51,470 --> 00:14:55,070
‫And let me actually show you in our back-end.

283
00:14:55,070 --> 00:14:59,930
‫So let's go back there, and let's go to app.js.

284
00:14:59,930 --> 00:15:02,320
‫And so now we're back in our note,

285
00:15:02,320 --> 00:15:03,943
‫or actually in our Express code.

286
00:15:05,320 --> 00:15:07,360
‫Now, in order to actually get access

287
00:15:07,360 --> 00:15:09,690
‫to the cookies that are in our request.

288
00:15:09,690 --> 00:15:13,050
‫In Express, we need to install a certain middleware.

289
00:15:13,050 --> 00:15:16,630
‫And so we need to install that from an NPM package.

290
00:15:16,630 --> 00:15:19,960
‫And so that's again, come to our other terminal

291
00:15:19,960 --> 00:15:21,550
‫and then NPM install

292
00:15:22,660 --> 00:15:25,313
‫the cookie parser.

293
00:15:26,210 --> 00:15:27,043
‫Okay?

294
00:15:27,043 --> 00:15:29,380
‫So basically, this package will then parse

295
00:15:29,380 --> 00:15:31,653
‫all the cookies from the incoming request.

296
00:15:37,360 --> 00:15:38,193
‫cookieParser.

297
00:15:44,600 --> 00:15:45,680
‫Alright?

298
00:15:45,680 --> 00:15:50,377
‫And now let's actually use it close to this body parser.

299
00:15:54,770 --> 00:15:56,003
‫Okay?

300
00:15:56,003 --> 00:15:57,050
‫So these two are very similar.

301
00:15:57,050 --> 00:15:59,750
‫This first one parses the data from the body

302
00:15:59,750 --> 00:16:03,070
‫and the second one parses the data from cookies.

303
00:16:03,070 --> 00:16:06,600
‫And so now, if in this middleware here,

304
00:16:06,600 --> 00:16:09,803
‫we can use request.cookies.

305
00:16:11,470 --> 00:16:13,080
‫And so now for each request,

306
00:16:13,080 --> 00:16:16,593
‫we will always display all the cookies in the console.

307
00:16:19,360 --> 00:16:22,440
‫So, if we now re-load this page,

308
00:16:22,440 --> 00:16:24,490
‫or really any other page,

309
00:16:24,490 --> 00:16:27,283
‫and so let me just open this one here in a new tab.

310
00:16:29,780 --> 00:16:33,420
‫So, if we now go back, we should see that cookie here.

311
00:16:33,420 --> 00:16:35,820
‫And, indeed, here it is.

312
00:16:35,820 --> 00:16:38,810
‫So this is the cookie that was just sent

313
00:16:38,810 --> 00:16:42,960
‫into our application by loading that page in the browser.

314
00:16:42,960 --> 00:16:44,223
‫And if I do that again,

315
00:16:45,710 --> 00:16:49,710
‫then, you will see another one, right?

316
00:16:49,710 --> 00:16:51,120
‫So here it is.

317
00:16:51,120 --> 00:16:54,790
‫And so now we can use this in order to protect our route.

318
00:16:54,790 --> 00:16:56,863
‫Alright, so let's try that out.

319
00:16:58,860 --> 00:16:59,693
‫Okay?

320
00:16:59,693 --> 00:17:01,070
‫But before we can do that,

321
00:17:01,070 --> 00:17:03,080
‫we need in our off controller

322
00:17:03,080 --> 00:17:05,770
‫to actually add that in here as well.

323
00:17:05,770 --> 00:17:08,840
‫So right now, we're only reading the jsen web token

324
00:17:08,840 --> 00:17:10,503
‫from the authorization header.

325
00:17:11,390 --> 00:17:12,223
‫Right?

326
00:17:12,223 --> 00:17:15,230
‫And only if they start with this bearer, kay?

327
00:17:15,230 --> 00:17:17,170
‫So for the bearer token.

328
00:17:17,170 --> 00:17:19,640
‫But now, we basically also want to read

329
00:17:19,640 --> 00:17:21,970
‫the jsen web token from a cookie.

330
00:17:21,970 --> 00:17:25,633
‫And so what we can do here is basically an else if,

331
00:17:27,870 --> 00:17:30,860
‫so if there was no token in the authorization header,

332
00:17:30,860 --> 00:17:33,333
‫well, then let's take a look at the cookies.

333
00:17:34,170 --> 00:17:36,807
‫So request.cookies

334
00:17:36,807 --> 00:17:39,520
‫.jsen web token.

335
00:17:39,520 --> 00:17:42,550
‫So JWT, which is the name of the cookie,

336
00:17:42,550 --> 00:17:45,110
‫and so therefore, in the cookies object,

337
00:17:45,110 --> 00:17:47,137
‫there will be a property called JWT.

338
00:17:49,120 --> 00:17:51,280
‫So this here, right?

339
00:17:51,280 --> 00:17:55,080
‫And so if this exists, well,

340
00:17:55,080 --> 00:17:58,040
‫then the token should be exactly that.

341
00:17:58,040 --> 00:17:58,873
‫So request

342
00:18:00,117 --> 00:18:00,950
‫.cookies

343
00:18:02,085 --> 00:18:03,593
‫.jwt.

344
00:18:05,590 --> 00:18:06,840
‫Okay.

345
00:18:06,840 --> 00:18:10,400
‫And so now with this, we're also able to authenticate users

346
00:18:10,400 --> 00:18:13,210
‫based on tokens sent via cookies

347
00:18:13,210 --> 00:18:15,780
‫and not only the authorization header.

348
00:18:15,780 --> 00:18:16,613
‫Great.

349
00:18:16,613 --> 00:18:18,580
‫And just to test this out,

350
00:18:18,580 --> 00:18:22,610
‫let's actually protect one of our routes here in the view.

351
00:18:22,610 --> 00:18:27,170
‫And I will do that with this tour detail page, okay?

352
00:18:27,170 --> 00:18:29,460
‫So that's just for testing

353
00:18:29,460 --> 00:18:31,920
‫'cause of course it doesn't make much sense,

354
00:18:31,920 --> 00:18:33,800
‫but I just wanted to show you that

355
00:18:33,800 --> 00:18:36,723
‫as it is right now, our login is already working.

356
00:18:37,860 --> 00:18:39,993
‫So let's import the authController here.

357
00:18:41,708 --> 00:18:44,958
‫(typing on a keyboard)

358
00:18:49,884 --> 00:18:54,860
‫And then, just like before, edit here into this route.

359
00:18:54,860 --> 00:18:58,770
‫So authController.protect.

360
00:18:58,770 --> 00:19:00,930
‫And so this is nothing new at this point.

361
00:19:00,930 --> 00:19:03,200
‫And then only if the user is logged in,

362
00:19:03,200 --> 00:19:04,993
‫we can go to the getTour.

363
00:19:06,400 --> 00:19:07,233
‫Great.

364
00:19:08,460 --> 00:19:09,710
‫So what I'm going to do now

365
00:19:09,710 --> 00:19:12,450
‫is to basically delete this cookie first

366
00:19:12,450 --> 00:19:13,850
‫just to show you what happens

367
00:19:13,850 --> 00:19:17,293
‫when a non-logged in user tries to access that route now.

368
00:19:18,180 --> 00:19:20,950
‫And so basically, if we remove this cookie,

369
00:19:20,950 --> 00:19:24,563
‫it is like logging out the user, right?

370
00:19:25,730 --> 00:19:28,970
‫So, if you now take a look our tours,

371
00:19:28,970 --> 00:19:30,653
‫then that should look just fine.

372
00:19:31,700 --> 00:19:34,090
‫But, if we now try to access this page,

373
00:19:34,090 --> 00:19:35,580
‫we should get an error.

374
00:19:35,580 --> 00:19:39,443
‫And indeed, there it is, saying that you are not logged in.

375
00:19:40,640 --> 00:19:41,550
‫Fair enough.

376
00:19:41,550 --> 00:19:44,903
‫So let's go back and let's actually log in.

377
00:19:50,833 --> 00:19:51,666
‫Okay?

378
00:19:51,666 --> 00:19:52,610
‫So here we go.

379
00:19:52,610 --> 00:19:53,550
‫And then in the future,

380
00:19:53,550 --> 00:19:55,570
‫we will of course also implement

381
00:19:55,570 --> 00:19:58,800
‫like some alert windows here and all that good stuff.

382
00:19:58,800 --> 00:20:02,380
‫But for now, again, let's just make it work.

383
00:20:02,380 --> 00:20:04,240
‫And so you see that we're back

384
00:20:04,240 --> 00:20:08,550
‫to having our nice cookie here, okay?

385
00:20:08,550 --> 00:20:12,163
‫And so, let's now try to access this protected route.

386
00:20:13,370 --> 00:20:16,050
‫And indeed, now it works.

387
00:20:16,050 --> 00:20:20,250
‫Fantastic, that's really great already, right?

388
00:20:20,250 --> 00:20:22,800
‫Now ideally, when a user is logged in,

389
00:20:22,800 --> 00:20:26,770
‫we then want not to display these buttons here,

390
00:20:26,770 --> 00:20:31,240
‫but instead, like some user menu or a picture of the user.

391
00:20:31,240 --> 00:20:32,650
‫So basically showing,

392
00:20:32,650 --> 00:20:35,545
‫that user is actually logged in, right?

393
00:20:35,545 --> 00:20:38,090
‫So let's do that in the next video,

394
00:20:38,090 --> 00:20:41,220
‫along with bundling all our JavaScript files together

395
00:20:41,220 --> 00:20:44,090
‫in the front-end as I was explaining earlier.

396
00:20:44,090 --> 00:20:47,650
‫So don't wait, let's move straight to the next one.

397
00:20:47,650 --> 00:20:48,483
‫See you there.