1 00:00:02,120 --> 00:00:04,160 Now, in this course section, 2 00:00:04,160 --> 00:00:07,640 we re factored our code a lot. 3 00:00:07,640 --> 00:00:12,640 Now I got a little bonus task or a little bonus extra work, 4 00:00:13,210 --> 00:00:15,990 which we can do, and which we should actually do 5 00:00:15,990 --> 00:00:18,190 if this would be a realistic site 6 00:00:18,190 --> 00:00:19,900 and which we therefore will do 7 00:00:19,900 --> 00:00:23,480 when we built this online shop in the next section. 8 00:00:23,480 --> 00:00:27,250 And that would be proper route protection. 9 00:00:27,250 --> 00:00:28,550 Now, what do I mean by that? 10 00:00:28,550 --> 00:00:30,223 What is route protection? 11 00:00:31,290 --> 00:00:33,680 In the auth course section 12 00:00:33,680 --> 00:00:36,320 and in discourse section as well, 13 00:00:36,320 --> 00:00:41,320 we saw that some routes to be precise, to getAdmin route, 14 00:00:41,320 --> 00:00:44,400 first checks the authentication status, 15 00:00:44,400 --> 00:00:47,740 and actually returns the 401 page, 16 00:00:47,740 --> 00:00:51,363 if an unauthenticated user tries to access this page. 17 00:00:52,270 --> 00:00:54,790 Therefore if I log out 18 00:00:54,790 --> 00:00:57,860 and I try to manually enter /admin, 19 00:00:57,860 --> 00:01:02,120 I get this not authenticated error as expected. 20 00:01:02,120 --> 00:01:04,080 Now this works as expected, 21 00:01:04,080 --> 00:01:07,927 but we're only using this on the getAdmin route here 22 00:01:07,927 --> 00:01:10,653 and to get admin controller action. 23 00:01:11,700 --> 00:01:14,770 But if we take a closer look, 24 00:01:14,770 --> 00:01:18,950 we actually should use it in our routes as well. 25 00:01:18,950 --> 00:01:21,930 And for example, here, when we create a post, 26 00:01:21,930 --> 00:01:24,230 sure, this action is triggered 27 00:01:24,230 --> 00:01:26,620 upon an incoming post request, 28 00:01:26,620 --> 00:01:29,690 but such post requests could also be sent 29 00:01:29,690 --> 00:01:32,270 from unauthenticated users. 30 00:01:32,270 --> 00:01:35,300 Of course, not just like this on this page, 31 00:01:35,300 --> 00:01:38,350 we have no forum that would send this request 32 00:01:38,350 --> 00:01:41,120 that would be reachable for an unauthenticated user, 33 00:01:41,120 --> 00:01:42,530 just like this. 34 00:01:42,530 --> 00:01:46,380 But there also are tools outside of a browser 35 00:01:46,380 --> 00:01:49,850 that could be used for sending such requests. 36 00:01:49,850 --> 00:01:54,060 We could also write some basic Ajax JavaScript code 37 00:01:54,060 --> 00:01:56,600 that sends such a request. 38 00:01:56,600 --> 00:01:59,530 So sending post requests to this route 39 00:01:59,530 --> 00:02:02,750 that triggers this action, would also be possible. 40 00:02:02,750 --> 00:02:06,870 So we should all check the authentication status here. 41 00:02:06,870 --> 00:02:08,580 And actually, we should check it 42 00:02:08,580 --> 00:02:12,120 in all those posts related routes. 43 00:02:12,120 --> 00:02:16,460 For example, getSinglePost is triggered with a get request 44 00:02:16,460 --> 00:02:18,690 and is not protected at all. 45 00:02:18,690 --> 00:02:20,830 So if we know the idea of a post, 46 00:02:20,830 --> 00:02:24,480 we can manually enter the correct URL in the browser, 47 00:02:24,480 --> 00:02:26,930 and we would be able to load this page 48 00:02:26,930 --> 00:02:28,793 and therefore trigger this action. 49 00:02:29,860 --> 00:02:32,730 So long story short, this logic, 50 00:02:32,730 --> 00:02:36,450 which I have here for locking down access 51 00:02:36,450 --> 00:02:39,940 should be used in all the routes in this file, 52 00:02:39,940 --> 00:02:42,100 except for the get home route, 53 00:02:42,100 --> 00:02:44,640 because that starting page should be available 54 00:02:44,640 --> 00:02:46,613 without logging in as well. 55 00:02:47,810 --> 00:02:50,460 Now, of course, we could just copy and paste that code 56 00:02:50,460 --> 00:02:53,930 into all the actions and that would do the trick, 57 00:02:53,930 --> 00:02:57,880 but copy and pasting is rarely the best idea. 58 00:02:57,880 --> 00:03:00,080 Instead, what we could also do 59 00:03:00,080 --> 00:03:03,590 is we could add another custom middleware, 60 00:03:03,590 --> 00:03:06,160 which we execute for all these routes 61 00:03:06,160 --> 00:03:07,960 that should be protected, 62 00:03:07,960 --> 00:03:09,550 and which then automatically 63 00:03:09,550 --> 00:03:11,840 should check the authentication status 64 00:03:11,840 --> 00:03:15,490 and redirect if a user is not authenticated. 65 00:03:15,490 --> 00:03:16,963 And that is what I'll do. 66 00:03:18,320 --> 00:03:22,160 For this in the middlewares folder, I'll add a new file 67 00:03:22,160 --> 00:03:26,123 and I'll name it auth-protection-middleware, 68 00:03:26,980 --> 00:03:29,140 file name as always is up to you. 69 00:03:29,140 --> 00:03:33,120 And in there, I'll add a classic middleware function. 70 00:03:33,120 --> 00:03:37,640 I'll name it, protectRoute or guardRoute, 71 00:03:37,640 --> 00:03:39,640 whatever you wanna call it. 72 00:03:39,640 --> 00:03:42,110 And we get the request in the response objects 73 00:03:42,110 --> 00:03:43,913 and this next function. 74 00:03:45,590 --> 00:03:47,000 Now in this middleware, 75 00:03:47,000 --> 00:03:52,000 I wanna check a res.locals.isAuth is truthy. 76 00:03:52,970 --> 00:03:56,220 So in the same check, I have in a post controller here 77 00:03:56,220 --> 00:03:57,663 in my getAdmin route. 78 00:03:59,410 --> 00:04:00,440 To be precise here, 79 00:04:00,440 --> 00:04:03,090 I'm checking if the user is not authenticated 80 00:04:03,090 --> 00:04:07,070 and we can do the same thing here and check if not isAuth. 81 00:04:07,070 --> 00:04:10,570 So if this request is coming from a user 82 00:04:10,570 --> 00:04:14,333 for whom we set res.locals.isAuth to false. 83 00:04:15,220 --> 00:04:18,790 And keep in mind that this is set in this auth middleware. 84 00:04:18,790 --> 00:04:21,716 Here we are setting res.locals.isAuth. 85 00:04:25,140 --> 00:04:27,970 Now, if the user is not authenticated, 86 00:04:27,970 --> 00:04:32,120 then I wanna return and render a response, 87 00:04:32,120 --> 00:04:35,883 to be precise, render the 401 template here. 88 00:04:37,310 --> 00:04:40,100 Or we actually do that differently 89 00:04:40,100 --> 00:04:44,210 so that we can also apply this for postRoutes, 90 00:04:44,210 --> 00:04:46,040 and instead of rendering a template, 91 00:04:46,040 --> 00:04:51,040 I simply redirect and redirect to /401, for example, 92 00:04:52,240 --> 00:04:54,593 which is a new route we should add now. 93 00:04:55,500 --> 00:04:58,640 And I will add it in my auth routes file 94 00:04:58,640 --> 00:05:00,400 because a route that 95 00:05:00,400 --> 00:05:03,370 basically just renders the 401 template, 96 00:05:03,370 --> 00:05:05,760 which tells us that we're not authenticated 97 00:05:05,760 --> 00:05:09,423 fits perfectly into the author route setup in my opinion. 98 00:05:10,440 --> 00:05:14,920 So in here, I'll now add a get.route/401 99 00:05:14,920 --> 00:05:19,210 where I wanna trigger a new action in the auth controller, 100 00:05:19,210 --> 00:05:20,683 which we have to add now. 101 00:05:21,530 --> 00:05:23,140 And there you can add it anywhere, 102 00:05:23,140 --> 00:05:28,140 for example, at the very top, the get401 function here, 103 00:05:28,440 --> 00:05:30,900 which gets a request and a response. 104 00:05:30,900 --> 00:05:33,150 And here I then wanna call res.render 105 00:05:33,150 --> 00:05:35,380 and render the 401 page 106 00:05:35,380 --> 00:05:40,090 and also set the status code to 401 like this. 107 00:05:40,090 --> 00:05:42,640 The setting the status code is of course optional, 108 00:05:42,640 --> 00:05:44,283 but not a bad idea. 109 00:05:46,160 --> 00:05:48,228 Now to make this newly added 110 00:05:48,228 --> 00:05:51,920 get401 function usable outset of this file, 111 00:05:51,920 --> 00:05:54,210 we have to go down and export it 112 00:05:54,210 --> 00:05:59,210 by adding it to this exports object, like this. 113 00:06:01,440 --> 00:06:04,730 And then back in the authRoutes file, 114 00:06:04,730 --> 00:06:08,400 here, I'll connect this 401 route I just added 115 00:06:08,400 --> 00:06:10,783 with authController.get401. 116 00:06:13,240 --> 00:06:16,450 Now we added this route, so now we can redirect to it. 117 00:06:16,450 --> 00:06:18,950 And therefore back in off protection middleware, 118 00:06:18,950 --> 00:06:20,420 this res.redirect should work 119 00:06:20,420 --> 00:06:23,433 if we got a request from a unauthenticated user. 120 00:06:24,690 --> 00:06:26,990 Else, if we make a post there's a check, 121 00:06:26,990 --> 00:06:29,280 we know that the user is authenticated 122 00:06:29,280 --> 00:06:30,900 and then I'll call next, 123 00:06:30,900 --> 00:06:34,390 so that the request which was handled by this middleware 124 00:06:34,390 --> 00:06:38,283 is able to move on to the next middleware in line. 125 00:06:40,120 --> 00:06:45,120 And then we can export this guardRoute function like this, 126 00:06:46,450 --> 00:06:48,330 and then use it in the place 127 00:06:48,330 --> 00:06:50,333 where we want to protect content. 128 00:06:51,330 --> 00:06:53,213 Now, where would that be though? 129 00:06:54,150 --> 00:06:56,210 Well, since this is a middleware, 130 00:06:56,210 --> 00:06:58,590 we wanna register it as such. 131 00:06:58,590 --> 00:07:01,890 And up to this point, we always did this, an app.js. 132 00:07:01,890 --> 00:07:05,170 And here, indeed, we could consider registering it here, 133 00:07:05,170 --> 00:07:07,423 maybe after the auth middleware, 134 00:07:08,330 --> 00:07:11,000 but keep in mind the middleware we just wrote, 135 00:07:11,000 --> 00:07:13,590 we'll check all incoming requests 136 00:07:13,590 --> 00:07:16,060 and look in this res.locals field 137 00:07:16,060 --> 00:07:18,830 to see if the user is authenticated 138 00:07:18,830 --> 00:07:22,980 and redirect to the 401 page, if that's not the case. 139 00:07:22,980 --> 00:07:26,490 So if we activate and use that middleware 140 00:07:26,490 --> 00:07:29,660 before we reach the blog and authRoutes, 141 00:07:29,660 --> 00:07:32,370 logging in or signing up will be impossible 142 00:07:32,370 --> 00:07:35,940 because all those routes will never be reached 143 00:07:35,940 --> 00:07:40,000 by unauthenticated users because our middleware redirects 144 00:07:40,000 --> 00:07:43,760 before these routes got a chance of taking over. 145 00:07:43,760 --> 00:07:47,313 So activating our guard middleware here is wrong. 146 00:07:48,460 --> 00:07:51,540 Activating it after these routes is all the wrong 147 00:07:51,540 --> 00:07:54,720 because then our route controller actions 148 00:07:54,720 --> 00:07:56,770 already handled the request. 149 00:07:56,770 --> 00:07:59,430 So then it's too late to look into the request 150 00:07:59,430 --> 00:08:01,143 and see if we wanna block it. 151 00:08:03,180 --> 00:08:05,410 So therefore the right place to do this 152 00:08:05,410 --> 00:08:09,430 is in the place where we define our routes. 153 00:08:09,430 --> 00:08:12,020 And then we can add the middleware to all the routes 154 00:08:12,020 --> 00:08:13,770 that should be protected. 155 00:08:13,770 --> 00:08:16,380 And there are two ways of doing that. 156 00:08:16,380 --> 00:08:19,000 I showed you a little bit early already, 157 00:08:19,000 --> 00:08:22,330 that dos get and post functions, 158 00:08:22,330 --> 00:08:24,950 which you use for registering routes. 159 00:08:24,950 --> 00:08:27,360 And actually all the functions express 160 00:08:27,360 --> 00:08:30,110 gives you for registering middlewares 161 00:08:30,110 --> 00:08:33,480 take multiple parameter values. 162 00:08:33,480 --> 00:08:38,480 The first parameter value is such a filtering path here, 163 00:08:39,179 --> 00:08:42,510 but then the second value is a middleware function 164 00:08:42,510 --> 00:08:46,480 that should become active if a request reaches this route 165 00:08:46,480 --> 00:08:48,900 and then all other arguments 166 00:08:48,900 --> 00:08:51,960 that you can pass to these get and post functions 167 00:08:51,960 --> 00:08:54,240 should be more middleware functions 168 00:08:54,240 --> 00:08:58,023 that will be activated step-by-step from left to right. 169 00:08:59,050 --> 00:09:01,330 So if I wanna protect the admin page 170 00:09:01,330 --> 00:09:03,570 with my newly added middleware, 171 00:09:03,570 --> 00:09:07,180 I can import my guardRoute middleware 172 00:09:08,150 --> 00:09:13,150 by requiring it from middlewares auth-protection-middleware. 173 00:09:16,610 --> 00:09:21,483 And then we could simply add it here, guardRoute like this. 174 00:09:22,520 --> 00:09:24,070 I'm not executing it, 175 00:09:24,070 --> 00:09:25,830 instead, I'm just pointing at it 176 00:09:25,830 --> 00:09:28,780 because this guardRoute function which I'm importing 177 00:09:28,780 --> 00:09:31,600 already is such a middleware function 178 00:09:31,600 --> 00:09:33,180 and therefore as mentioned before, 179 00:09:33,180 --> 00:09:35,513 it should be executed by express. 180 00:09:37,140 --> 00:09:38,610 Now with this approach, 181 00:09:38,610 --> 00:09:43,430 this admin page would be guarded by that middleware 182 00:09:43,430 --> 00:09:46,800 because all of these middlewares here execute left to right 183 00:09:46,800 --> 00:09:50,830 for any requests that match this route definition. 184 00:09:50,830 --> 00:09:53,520 And therefore we would first make it into guardRoute, 185 00:09:53,520 --> 00:09:56,550 and only if that grants access to getAdmin, 186 00:09:56,550 --> 00:09:58,170 we do get in there. 187 00:09:58,170 --> 00:10:00,650 So only if that calls next, 188 00:10:00,650 --> 00:10:03,583 we will move on to the next middleware in line. 189 00:10:04,820 --> 00:10:07,760 So that works and we could therefore add guardRoute 190 00:10:07,760 --> 00:10:10,003 to all the routes that should be protected. 191 00:10:11,160 --> 00:10:13,910 This would be fine, but if you have a lot of routes 192 00:10:13,910 --> 00:10:16,910 that should be a fact that by the same middleware, 193 00:10:16,910 --> 00:10:20,263 copy and pasting the middleware can become annoying as well. 194 00:10:21,190 --> 00:10:24,540 Therefore, as an alternative, what you can also do, 195 00:10:24,540 --> 00:10:29,000 is you can use a router use here to define a middleware 196 00:10:29,000 --> 00:10:31,640 that should run for all incoming requests. 197 00:10:31,640 --> 00:10:34,030 No matter if it's a get or post request 198 00:10:34,030 --> 00:10:36,363 and no matter which path we have there. 199 00:10:37,530 --> 00:10:39,810 Though you could always add a path filter 200 00:10:39,810 --> 00:10:43,970 if you want it to narrow it down somewhere. 201 00:10:43,970 --> 00:10:47,200 But here, I'll just use the guardRoute like this. 202 00:10:47,200 --> 00:10:49,340 And the effect of that will be 203 00:10:49,340 --> 00:10:53,300 that all the routes after this line 10 here 204 00:10:53,300 --> 00:10:56,360 will be protected by this middleware. 205 00:10:56,360 --> 00:11:00,520 The route in front of it get home will not be protected 206 00:11:00,520 --> 00:11:01,910 and indeed it shouldn't be 207 00:11:01,910 --> 00:11:05,910 because dad should be accessible by authenticated users 208 00:11:05,910 --> 00:11:08,410 because the incoming request 209 00:11:08,410 --> 00:11:11,890 basically travels through all these routes and middlewares 210 00:11:11,890 --> 00:11:14,040 from top to bottom. 211 00:11:14,040 --> 00:11:16,050 So first this route is checked 212 00:11:16,050 --> 00:11:18,210 and if that's the right route it's executed 213 00:11:18,210 --> 00:11:20,310 and the coat thereafter won't execute 214 00:11:20,310 --> 00:11:23,593 for the specific request that's currently being handled. 215 00:11:24,690 --> 00:11:28,280 If that was not the right route for the incoming request, 216 00:11:28,280 --> 00:11:30,310 it will next go into this middleware, 217 00:11:30,310 --> 00:11:34,160 and the that middleware might then redirect to the 401 page 218 00:11:34,160 --> 00:11:35,930 or grant access, 219 00:11:35,930 --> 00:11:39,630 and the request moves onto the next route in place. 220 00:11:39,630 --> 00:11:40,610 And with that, 221 00:11:40,610 --> 00:11:44,590 we subsequently move through all these routes there 222 00:11:44,590 --> 00:11:45,423 and in the end, 223 00:11:45,423 --> 00:11:47,853 one of these routes will hopefully become active. 224 00:11:48,920 --> 00:11:51,420 And that's how we can protect multiple routes 225 00:11:51,420 --> 00:11:52,920 with that middleware. 226 00:11:52,920 --> 00:11:54,890 The order is super important 227 00:11:54,890 --> 00:11:56,640 if you're doing it like this still. 228 00:11:57,970 --> 00:12:00,100 And with that long story short, 229 00:12:00,100 --> 00:12:02,610 if we go back to the post controller, 230 00:12:02,610 --> 00:12:05,250 we can remove this check from getAdmin, 231 00:12:05,250 --> 00:12:08,390 because it's now protected by our middleware. 232 00:12:08,390 --> 00:12:12,850 And as a result, if I save that, and I'm not logged in, 233 00:12:12,850 --> 00:12:16,960 accessing /admin should still fail. 234 00:12:16,960 --> 00:12:19,800 I'm redirected to 401. 235 00:12:19,800 --> 00:12:21,940 However it crashes here. 236 00:12:21,940 --> 00:12:24,270 And the reason for that is that an app.js, 237 00:12:24,270 --> 00:12:28,980 we now must move the authRoutes in front of the blogRoutes 238 00:12:28,980 --> 00:12:33,290 because you have to keep in mind that his 401 route 239 00:12:33,290 --> 00:12:35,180 is to find in my authRoutes 240 00:12:35,180 --> 00:12:38,540 and all these routes should not be protected. 241 00:12:38,540 --> 00:12:42,220 Now, since I added my guard route middleware 242 00:12:42,220 --> 00:12:44,960 in the blogRoutes and requests travel 243 00:12:44,960 --> 00:12:48,360 through all the middleware functions from top to bottom, 244 00:12:48,360 --> 00:12:50,560 if we had the order from before 245 00:12:50,560 --> 00:12:53,970 that the blogRoutes are evaluated first, 246 00:12:53,970 --> 00:12:55,800 then every incoming request, 247 00:12:55,800 --> 00:12:58,110 no matter which URL it's targeting, 248 00:12:58,110 --> 00:13:03,110 will first move into blogRoutes and then into authRoutes. 249 00:13:03,220 --> 00:13:04,430 However, inside of the blogRoutes, 250 00:13:04,430 --> 00:13:07,930 it then also goes through all these middleware functions 251 00:13:07,930 --> 00:13:09,290 from top to bottom, 252 00:13:09,290 --> 00:13:11,720 and therefore it will also reach to guardRoute 253 00:13:11,720 --> 00:13:14,600 and that will block the unauthenticated request 254 00:13:14,600 --> 00:13:16,743 and redirect to the 401 route. 255 00:13:17,650 --> 00:13:21,550 That's good, but the 401 route can never be reached 256 00:13:21,550 --> 00:13:22,810 because to reach it, 257 00:13:22,810 --> 00:13:25,160 we would have to make it past these blogRoutes. 258 00:13:26,420 --> 00:13:28,210 So therefore the order matters here 259 00:13:28,210 --> 00:13:31,160 and we have to move our unauthenticated routes. 260 00:13:31,160 --> 00:13:33,020 So to routes that should be accessible 261 00:13:33,020 --> 00:13:36,730 by authenticated users in front of the other routes. 262 00:13:36,730 --> 00:13:39,283 So all three routes should come first. 263 00:13:40,570 --> 00:13:44,060 With that, we now have a chance of reaching the 401 page 264 00:13:44,060 --> 00:13:45,100 and therefore we can reach 265 00:13:45,100 --> 00:13:47,360 all the pages we should be able to reach, 266 00:13:47,360 --> 00:13:51,417 but if we try to reach admin, we see 'Not authenticated.' 267 00:13:52,360 --> 00:13:53,680 Of course, on the other hand, 268 00:13:53,680 --> 00:13:56,820 if we do now log in with a valid user, 269 00:13:56,820 --> 00:14:00,150 we can still visit the admin page and so on. 270 00:14:00,150 --> 00:14:02,070 So that then still all works 271 00:14:02,070 --> 00:14:04,783 because now our middleware lets us through. 272 00:14:06,730 --> 00:14:08,720 And that was another building block 273 00:14:08,720 --> 00:14:11,360 that you should know in general 274 00:14:11,360 --> 00:14:13,410 when working with authentication 275 00:14:13,410 --> 00:14:17,570 that you authenticate and protect the right routes, 276 00:14:17,570 --> 00:14:19,970 but also specific to this section 277 00:14:19,970 --> 00:14:23,390 that you know how you can easily reuse this logic 278 00:14:23,390 --> 00:14:25,160 with your own middleware, 279 00:14:25,160 --> 00:14:27,470 but that then you have to make sure 280 00:14:27,470 --> 00:14:30,580 that you order your routes correctly. 281 00:14:30,580 --> 00:14:32,410 Again, this is all that concept, 282 00:14:32,410 --> 00:14:34,730 we'll see again, in the next core section, 283 00:14:34,730 --> 00:14:37,083 when we built this complete online shop.