1
00:00:00,910 --> 00:00:02,380
‫Welcome back.

2
00:00:02,380 --> 00:00:05,510
‫So in this video, you're gonna learn a super secure way

3
00:00:05,510 --> 00:00:06,983
‫of logging out users.

4
00:00:08,580 --> 00:00:12,110
‫So up until this point, when we wanted to delete a user,

5
00:00:12,110 --> 00:00:15,233
‫we would simply delete the cookie from our browser.

6
00:00:16,640 --> 00:00:17,570
‫Right?

7
00:00:17,570 --> 00:00:19,600
‫So something like this,

8
00:00:19,600 --> 00:00:21,190
‫and then remove it.

9
00:00:21,190 --> 00:00:24,020
‫However, the thing is that we created this cookie

10
00:00:24,020 --> 00:00:26,490
‫as an http only cookie.

11
00:00:26,490 --> 00:00:27,580
‫Remember that,

12
00:00:27,580 --> 00:00:30,420
‫and so that means that we cannot manipulate this cookie

13
00:00:30,420 --> 00:00:32,730
‫in any way in our browser.

14
00:00:32,730 --> 00:00:33,930
‫So we cannot change it,

15
00:00:33,930 --> 00:00:35,903
‫and we can also not delete it.

16
00:00:36,820 --> 00:00:40,580
‫So let's just quickly take a look at that place in the code

17
00:00:40,580 --> 00:00:41,643
‫where we did that.

18
00:00:42,730 --> 00:00:44,170
‫So in the auth controller

19
00:00:45,316 --> 00:00:48,830
‫up there where we actually create that cookie

20
00:00:49,930 --> 00:00:52,103
‫so that is right here.

21
00:00:53,810 --> 00:00:56,910
‫And so again, remember, that this means that we can not

22
00:00:56,910 --> 00:01:00,350
‫manipulate the cookie in the browser in any way.

23
00:01:00,350 --> 00:01:01,760
‫Not even destroy it.

24
00:01:01,760 --> 00:01:03,220
‫So delete it.

25
00:01:03,220 --> 00:01:07,510
‫So if we want to keep using this super secure way here

26
00:01:07,510 --> 00:01:09,290
‫of storing cookies,

27
00:01:09,290 --> 00:01:12,730
‫then how are we going to be able to actually log out users

28
00:01:12,730 --> 00:01:14,260
‫on our website?

29
00:01:14,260 --> 00:01:17,300
‫Because usually with JWT authentication

30
00:01:17,300 --> 00:01:18,820
‫we just delete the cookie

31
00:01:18,820 --> 00:01:21,000
‫or the token from local storage.

32
00:01:21,000 --> 00:01:25,400
‫But well, again, that's not possible when using it this way.

33
00:01:25,400 --> 00:01:28,240
‫And so what we're gonna do instead is to create a

34
00:01:28,240 --> 00:01:31,940
‫very simple log out route that will simply send back a new

35
00:01:31,940 --> 00:01:34,340
‫cookie with the exact same name

36
00:01:34,340 --> 00:01:36,170
‫but without the token.

37
00:01:36,170 --> 00:01:38,810
‫And so that will then override the current cookie that we

38
00:01:38,810 --> 00:01:41,970
‫have in the browser with one that has the same name

39
00:01:41,970 --> 00:01:43,740
‫but no token.

40
00:01:43,740 --> 00:01:46,440
‫And so when that cookie is then sent along with

41
00:01:46,440 --> 00:01:49,560
‫the next request, then we will not be able to identify

42
00:01:49,560 --> 00:01:51,960
‫the user as being logged in.

43
00:01:51,960 --> 00:01:55,430
‫And so this will effectively then log out the user.

44
00:01:55,430 --> 00:01:57,140
‫And also were gonna give this cookie

45
00:01:57,140 --> 00:01:59,580
‫a very short expiration time.

46
00:01:59,580 --> 00:02:02,300
‫And so this will effectively be a little bit like

47
00:02:02,300 --> 00:02:03,500
‫deleting the cookie

48
00:02:03,500 --> 00:02:07,920
‫but with a very clever workaround like this, okay?

49
00:02:07,920 --> 00:02:11,203
‫So let's do that here, right after log in.

50
00:02:16,740 --> 00:02:20,480
‫So again when we're doing token based authentication

51
00:02:20,480 --> 00:02:22,770
‫we usually never need an end point like this

52
00:02:25,050 --> 00:02:30,020
‫but when we want to send a super secure cookie like we do

53
00:02:30,020 --> 00:02:31,920
‫well, then we have to do it like this.

54
00:02:32,770 --> 00:02:36,900
‫So, again, on the response we set the cookie,

55
00:02:36,900 --> 00:02:40,220
‫and the secret is to give it the exact same name.

56
00:02:40,220 --> 00:02:41,930
‫So just as I mentioned before,

57
00:02:41,930 --> 00:02:44,450
‫and that is jwt.

58
00:02:44,450 --> 00:02:47,800
‫So just like here, okay?

59
00:02:47,800 --> 00:02:50,700
‫But here, we then send the token,

60
00:02:50,700 --> 00:02:54,460
‫but now we will send simply some dummy text.

61
00:02:54,460 --> 00:02:56,113
‫So let's say logged out,

62
00:02:58,130 --> 00:02:59,530
‫and then the cookie options.

63
00:03:02,320 --> 00:03:04,280
‫So an expire date,

64
00:03:04,280 --> 00:03:05,893
‫like in 10 seconds from now.

65
00:03:07,550 --> 00:03:09,970
‫So let's create a new date

66
00:03:09,970 --> 00:03:10,900
‫based on

67
00:03:11,940 --> 00:03:14,210
‫date.now

68
00:03:15,610 --> 00:03:17,290
‫plus 10 seconds.

69
00:03:17,290 --> 00:03:20,173
‫So that's 10 times 1000.

70
00:03:21,660 --> 00:03:26,060
‫And also I'm going to set it, again, to http only.

71
00:03:26,060 --> 00:03:27,600
‫Set to true,

72
00:03:27,600 --> 00:03:30,330
‫but we do not need to set it as secure,

73
00:03:30,330 --> 00:03:32,900
‫because in this case there is no sensitive data

74
00:03:32,900 --> 00:03:34,833
‫that anyone can get a hold of.

75
00:03:36,560 --> 00:03:38,083
‫Here we're missing the comma,

76
00:03:39,560 --> 00:03:42,803
‫and so now all we need to do is send this response back.

77
00:03:43,660 --> 00:03:46,100
‫So status 200

78
00:03:50,730 --> 00:03:53,143
‫and let's simply mark it as success here.

79
00:03:57,000 --> 00:04:00,930
‫Then in our route we need to add it, of course, as well

80
00:04:00,930 --> 00:04:02,740
‫so that's at the user route

81
00:04:04,470 --> 00:04:06,853
‫so let's do it right here after log in,

82
00:04:07,900 --> 00:04:11,220
‫but this one will actually be a get request

83
00:04:11,220 --> 00:04:13,130
‫because we're not going to send any data

84
00:04:13,130 --> 00:04:14,660
‫along with the request

85
00:04:14,660 --> 00:04:16,410
‫we're not changing anything,

86
00:04:16,410 --> 00:04:19,190
‫we actually simply get a cookie.

87
00:04:19,190 --> 00:04:21,730
‫And so that name actually makes sense.

88
00:04:21,730 --> 00:04:23,853
‫Or that verb actually makes sense.

89
00:04:24,860 --> 00:04:26,580
‫So log out,

90
00:04:26,580 --> 00:04:31,580
‫and so now we are good to actually hit that route

91
00:04:31,610 --> 00:04:34,463
‫just like we did here with our Axios library.

92
00:04:37,420 --> 00:04:39,110
‫So export,

93
00:04:39,110 --> 00:04:40,590
‫log out,

94
00:04:40,590 --> 00:04:41,950
‫or actually const first

95
00:04:47,320 --> 00:04:48,980
‫and so just like before

96
00:04:48,980 --> 00:04:50,790
‫we're using a try catch block

97
00:04:53,260 --> 00:04:56,140
‫which in this case is not really that important

98
00:04:56,140 --> 00:04:59,270
‫because there can not really be an error while logging out,

99
00:04:59,270 --> 00:05:00,270
‫right?

100
00:05:00,270 --> 00:05:02,420
‫But anyway, just in case, for example,

101
00:05:02,420 --> 00:05:04,140
‫we have no internet connection.

102
00:05:04,140 --> 00:05:07,800
‫So in that case, we then will get a nice error

103
00:05:07,800 --> 00:05:09,910
‫and let's actually do that first here.

104
00:05:09,910 --> 00:05:11,060
‫So show error

105
00:05:16,570 --> 00:05:17,570
‫logging out

106
00:05:20,010 --> 00:05:21,520
‫try again.

107
00:05:21,520 --> 00:05:23,730
‫Okay, but this here, as I said,

108
00:05:23,730 --> 00:05:25,393
‫should not happen that often.

109
00:05:26,330 --> 00:05:27,170
‫So instead

110
00:05:28,370 --> 00:05:29,203
‫let's

111
00:05:30,060 --> 00:05:31,973
‫do our request with Axios.

112
00:05:33,810 --> 00:05:34,643
‫All right.

113
00:05:37,760 --> 00:05:39,610
‫And so the method this time is get

114
00:05:41,980 --> 00:05:43,120
‫and the URL is

115
00:05:44,030 --> 00:05:45,523
‫similar to what we have here,

116
00:05:46,950 --> 00:05:48,030
‫But it is

117
00:05:49,480 --> 00:05:50,313
‫log out.

118
00:05:52,177 --> 00:05:56,140
‫And then as the next step, let's also reload the page.

119
00:05:56,140 --> 00:05:58,180
‫So that's what we always do manually

120
00:05:58,180 --> 00:06:00,400
‫when we delete a cookie, right?

121
00:06:00,400 --> 00:06:03,500
‫And so here of course we need to do it programatically.

122
00:06:03,500 --> 00:06:04,333
‫Right?

123
00:06:04,333 --> 00:06:05,550
‫And we need to do it here

124
00:06:05,550 --> 00:06:09,780
‫because since this is an Ajax request we can not do it

125
00:06:09,780 --> 00:06:10,990
‫on the back end side.

126
00:06:10,990 --> 00:06:13,100
‫So we can't do it with express.

127
00:06:13,100 --> 00:06:16,420
‫And so we need to, of course, do it manually here.

128
00:06:16,420 --> 00:06:17,350
‫Right?

129
00:06:17,350 --> 00:06:20,680
‫Otherwise we would technically be logged out

130
00:06:20,680 --> 00:06:23,320
‫but our user menu would still reflect

131
00:06:23,320 --> 00:06:25,950
‫so it would still show that we are logged in.

132
00:06:25,950 --> 00:06:29,120
‫And so of course, we simply need to reload the page

133
00:06:29,120 --> 00:06:31,950
‫which would then send the invalid cookie basically

134
00:06:31,950 --> 00:06:33,150
‫to the server,

135
00:06:33,150 --> 00:06:36,140
‫so that one that we just received without a token

136
00:06:36,140 --> 00:06:38,190
‫and then we are no longer logged in,

137
00:06:38,190 --> 00:06:42,303
‫and therefore then our user menu will disappear, okay?

138
00:06:43,210 --> 00:06:46,150
‫So let's do that if there was a success.

139
00:06:46,150 --> 00:06:51,150
‫So just like before, rest.data.status.

140
00:06:52,720 --> 00:06:56,540
‫And so in this end point, we also send back

141
00:06:57,430 --> 00:06:59,140
‫the status set to success,

142
00:06:59,140 --> 00:07:02,040
‫and so we can once more test for that here.

143
00:07:02,040 --> 00:07:03,800
‫And so if this is the case

144
00:07:03,800 --> 00:07:06,290
‫well we actually don't even need this

145
00:07:06,290 --> 00:07:11,180
‫so in this case widow location.reload.

146
00:07:11,180 --> 00:07:13,520
‫And then something really important is that we actually

147
00:07:13,520 --> 00:07:16,260
‫need to set it to true here,

148
00:07:16,260 --> 00:07:19,070
‫and that will then force a reload from the server

149
00:07:19,070 --> 00:07:22,280
‫and not from browser cache, all right?

150
00:07:22,280 --> 00:07:24,830
‫Now and of course we need to mark it here as async,

151
00:07:26,080 --> 00:07:27,710
‫and okay.

152
00:07:27,710 --> 00:07:30,350
‫So this part here is really important again

153
00:07:30,350 --> 00:07:32,930
‫because otherwise it might simply load the same page

154
00:07:32,930 --> 00:07:33,770
‫from the cache

155
00:07:33,770 --> 00:07:37,070
‫which would then still have our user menu up there.

156
00:07:37,070 --> 00:07:38,970
‫But of course that's not what we want,

157
00:07:38,970 --> 00:07:42,243
‫we really want a fresh page coming down from the server.

158
00:07:43,540 --> 00:07:44,720
‫All right?

159
00:07:44,720 --> 00:07:47,020
‫So we have our log out function

160
00:07:47,020 --> 00:07:51,560
‫and now in the index we basically need to now trigger it

161
00:07:51,560 --> 00:07:53,700
‫once we hit that button.

162
00:07:53,700 --> 00:07:56,463
‫So let's create an element here first.

163
00:07:59,470 --> 00:08:00,830
‫So the log out button

164
00:08:02,080 --> 00:08:04,830
‫document.querySelector

165
00:08:10,786 --> 00:08:14,203
‫and remember how we created this element.

166
00:08:15,660 --> 00:08:17,783
‫So that's here.

167
00:08:19,350 --> 00:08:20,976
‫So this one.

168
00:08:20,976 --> 00:08:23,110
‫So we're selecting now by this class.

169
00:08:23,110 --> 00:08:26,910
‫All right, and we could of course used an id as well here,

170
00:08:26,910 --> 00:08:30,240
‫but that's not really important, okay?

171
00:08:30,240 --> 00:08:33,760
‫What matters here is to now say

172
00:08:33,760 --> 00:08:35,713
‫if there is a log out button,

173
00:08:39,980 --> 00:08:44,980
‫then logOutButton.addEventListener.

174
00:08:45,720 --> 00:08:48,650
‫So we want it to listen to all events happening

175
00:08:48,650 --> 00:08:52,330
‫on that button whenever there is a click.

176
00:08:52,330 --> 00:08:54,370
‫So we're waiting for the click event

177
00:08:54,370 --> 00:08:57,460
‫and when that happens we then call the log out function

178
00:08:58,740 --> 00:09:00,800
‫which we didn't import yet,

179
00:09:00,800 --> 00:09:02,650
‫so let's add that here.

180
00:09:02,650 --> 00:09:06,023
‫So log in and log out.

181
00:09:07,680 --> 00:09:10,223
‫All right, and that should actually be it.

182
00:09:11,290 --> 00:09:14,570
‫So, let's test it now.

183
00:09:14,570 --> 00:09:17,240
‫Reload it again just to be sure,

184
00:09:17,240 --> 00:09:18,740
‫and now

185
00:09:18,740 --> 00:09:20,870
‫Oh, we get error logging out.

186
00:09:20,870 --> 00:09:22,253
‫Try again, why is that.

187
00:09:26,650 --> 00:09:30,710
‫Well, let's try to get a better look at the error.

188
00:09:30,710 --> 00:09:33,130
‫But what's important is that actually all of this

189
00:09:33,130 --> 00:09:34,283
‫is already working.

190
00:09:35,480 --> 00:09:36,970
‫So this event listener here

191
00:09:39,207 --> 00:09:42,407
‫and also this log out function is kind of doing its job.

192
00:09:44,360 --> 00:09:45,500
‫So let's just do

193
00:09:46,880 --> 00:09:51,383
‫console.log error.response.

194
00:09:55,370 --> 00:09:58,310
‫So let's reload this here.

195
00:09:58,310 --> 00:10:00,223
‫Should kind of happen automatically.

196
00:10:01,330 --> 00:10:02,343
‫All right.

197
00:10:03,350 --> 00:10:04,703
‫So try that again.

198
00:10:06,820 --> 00:10:08,480
‫So what is happening here

199
00:10:12,500 --> 00:10:16,493
‫so cast to object id failed for value log out.

200
00:10:17,880 --> 00:10:20,180
‫So that's very weird.

201
00:10:20,180 --> 00:10:21,523
‫Take a look at that route.

202
00:10:23,360 --> 00:10:24,523
‫Oh, of course,

203
00:10:25,910 --> 00:10:27,750
‫that's a serious mistake.

204
00:10:27,750 --> 00:10:29,223
‫Should be log in of course.

205
00:10:31,110 --> 00:10:34,933
‫Okay, but this kind of course, again, happen all the time.

206
00:10:36,490 --> 00:10:38,423
‫So let's reload this here.

207
00:10:42,240 --> 00:10:43,733
‫And try this again.

208
00:10:44,680 --> 00:10:46,700
‫And now we're getting something here.

209
00:10:46,700 --> 00:10:48,200
‫Now it's still and error,

210
00:10:48,200 --> 00:10:50,160
‫but that's no problem at all.

211
00:10:50,160 --> 00:10:52,750
‫So we have a JSON web token error

212
00:10:52,750 --> 00:10:55,810
‫because our JSON web token is malformed.

213
00:10:55,810 --> 00:10:57,890
‫And so it's coming, as you can see,

214
00:10:57,890 --> 00:11:00,610
‫from the is logged in middleware.

215
00:11:00,610 --> 00:11:04,323
‫And so we can kind of guess why that is, right?

216
00:11:05,530 --> 00:11:09,290
‫So let's go back add our auth controller.

217
00:11:09,290 --> 00:11:11,410
‫And so the JSON web token that we're basically

218
00:11:11,410 --> 00:11:14,430
‫sending now is this here, right?

219
00:11:14,430 --> 00:11:15,960
‫So this logged out.

220
00:11:15,960 --> 00:11:17,520
‫And so then here in

221
00:11:18,370 --> 00:11:23,040
‫the isLoggedIn that will then basically trigger an error.

222
00:11:23,040 --> 00:11:27,170
‫So here in JSON web token verify, right?

223
00:11:27,170 --> 00:11:29,420
‫And since this entire function here is wrapped

224
00:11:29,420 --> 00:11:33,070
‫in this catchASync it will send this error down to all

225
00:11:33,070 --> 00:11:35,100
‫global error handling middleware.

226
00:11:35,100 --> 00:11:38,290
‫And that will then create this error which in this case

227
00:11:38,290 --> 00:11:40,240
‫we do not want, remember?

228
00:11:40,240 --> 00:11:41,368
‫So in this isLoggedIn middleware we do not want

229
00:11:41,368 --> 00:11:45,220
‫to cause any errors.

230
00:11:45,220 --> 00:11:47,480
‫And so, let's actually fix that

231
00:11:47,480 --> 00:11:50,520
‫and so we're going to remove this catchASync from here

232
00:11:51,490 --> 00:11:55,090
‫because we do not want to catch any Async errors.

233
00:11:55,090 --> 00:11:57,640
‫Instead what we want to do is to basically

234
00:11:57,640 --> 00:11:59,200
‫catch them locally

235
00:11:59,200 --> 00:12:02,083
‫and then if there's an error simply say next.

236
00:12:03,300 --> 00:12:05,240
‫Like this, okay?

237
00:12:05,240 --> 00:12:06,363
‫So let's do that.

238
00:12:08,350 --> 00:12:10,813
‫So wrap all of this into a try.

239
00:12:14,170 --> 00:12:15,133
‫Close it here.

240
00:12:18,750 --> 00:12:19,890
‫Well, something else wrong.

241
00:12:19,890 --> 00:12:23,303
‫Ah! Probably we are just missing the catch block.

242
00:12:27,520 --> 00:12:32,010
‫And so in this case we want to go to the next middleware.

243
00:12:32,010 --> 00:12:35,463
‫So basically saying that there is no logged in user.

244
00:12:36,910 --> 00:12:37,743
‫Right?

245
00:12:38,970 --> 00:12:41,543
‫So, let's test it again.

246
00:12:42,510 --> 00:12:45,283
‫Go back, oh , and now we're no longer logged in.

247
00:12:47,900 --> 00:12:49,590
‫So log in.

248
00:12:49,590 --> 00:12:51,103
‫That was successful.

249
00:12:52,160 --> 00:12:54,093
‫And now straight away let's log out.

250
00:12:55,210 --> 00:12:59,110
‫Ah! Beautiful! Now it works correctly.

251
00:12:59,110 --> 00:13:02,160
‫And so this time what happened here is that of course

252
00:13:02,160 --> 00:13:04,160
‫this verification here failed

253
00:13:04,160 --> 00:13:07,730
‫because that JSON web token was not in a format that

254
00:13:07,730 --> 00:13:09,560
‫this algorithm expected.

255
00:13:09,560 --> 00:13:12,380
‫But what happened in this case is that the error was

256
00:13:12,380 --> 00:13:15,020
‫not catched using our catchASync function

257
00:13:15,020 --> 00:13:18,470
‫but instead it then went straight to catch err,

258
00:13:18,470 --> 00:13:21,480
‫which then went straight to the next middleware.

259
00:13:21,480 --> 00:13:23,790
‫All right, great!

260
00:13:23,790 --> 00:13:26,800
‫So if we now take a look at our cookies,

261
00:13:26,800 --> 00:13:30,743
‫well we have one in use that probably has already expired.

262
00:13:31,840 --> 00:13:35,810
‫So you see it only has this life of 10 seconds

263
00:13:35,810 --> 00:13:38,050
‫and so if I reload this page now actually

264
00:13:40,130 --> 00:13:41,680
‫then is should already be gone.

265
00:13:43,700 --> 00:13:46,350
‫So you see zero cookies in use.

266
00:13:46,350 --> 00:13:48,800
‫Okay, and that's actually all we have to do

267
00:13:48,800 --> 00:13:51,583
‫in order to log out the user from our website.