1 00:00:02,110 --> 00:00:03,620 Now as so often, 2 00:00:03,620 --> 00:00:06,660 I prepared a little starting project for you, 3 00:00:06,660 --> 00:00:09,570 but whilst you do find it attached, 4 00:00:09,570 --> 00:00:11,620 and whilst you can of course use it, 5 00:00:11,620 --> 00:00:13,560 and then use it as you always do, 6 00:00:13,560 --> 00:00:18,340 download, extract, npm install and then npm start 7 00:00:18,340 --> 00:00:21,270 whilst you can do all of that, of course. 8 00:00:21,270 --> 00:00:24,260 You might want to consider building that project 9 00:00:24,260 --> 00:00:26,100 on your own first. 10 00:00:26,100 --> 00:00:28,320 And I'll then walk through my solution 11 00:00:28,320 --> 00:00:30,220 with you in a couple of seconds, 12 00:00:30,220 --> 00:00:32,509 because that would be a great practice 13 00:00:32,509 --> 00:00:35,390 because that project, which I prepared here, 14 00:00:35,390 --> 00:00:39,530 does actually combine all the key concepts you learned about 15 00:00:39,530 --> 00:00:42,370 over the last course sections. 16 00:00:42,370 --> 00:00:44,460 So building this project on your own 17 00:00:44,460 --> 00:00:46,103 would be a great practice. 18 00:00:47,020 --> 00:00:49,340 This project will use MongoDB, 19 00:00:49,340 --> 00:00:51,820 so if you decide to follow along, 20 00:00:51,820 --> 00:00:56,730 you will have to start your MongoDB server on your system. 21 00:00:56,730 --> 00:00:59,450 As you'll learn it in the MongoDB sections. 22 00:00:59,450 --> 00:01:01,890 And then here is what we're going to build 23 00:01:01,890 --> 00:01:03,563 in this course section. 24 00:01:05,140 --> 00:01:07,830 Now this might look very familiar to you. 25 00:01:07,830 --> 00:01:11,750 It's basically that off demo app I showed you before, 26 00:01:11,750 --> 00:01:15,780 but there are some subtle differences, and extra features, 27 00:01:15,780 --> 00:01:19,380 which are included in this project here. 28 00:01:19,380 --> 00:01:21,400 By the way, if you don't want to write 29 00:01:21,400 --> 00:01:22,840 the styles on your own, 30 00:01:22,840 --> 00:01:25,690 though, that would, of course also be a great practice. 31 00:01:25,690 --> 00:01:28,780 You can, of course take just the style files 32 00:01:28,780 --> 00:01:31,800 in my attachment, which you find attached to this lecture. 33 00:01:31,800 --> 00:01:35,730 And then look into those files to use my styles 34 00:01:35,730 --> 00:01:37,883 or to find inspiration there. 35 00:01:39,010 --> 00:01:41,620 Now this project, which you can build as a practice 36 00:01:41,620 --> 00:01:44,950 or which you can use just like that by using my attachment, 37 00:01:44,950 --> 00:01:48,090 has the good old signup process. 38 00:01:48,090 --> 00:01:52,620 And since I connect it to a brand new MongoDB database here, 39 00:01:52,620 --> 00:01:55,060 I can create a new user. 40 00:01:55,060 --> 00:01:58,403 And once such a user is created, we can log in. 41 00:01:59,370 --> 00:02:02,520 And then here, we see some new features. 42 00:02:02,520 --> 00:02:05,740 Now, unlike in the authentication section, 43 00:02:05,740 --> 00:02:09,880 this project here doesn't have authorization anymore. 44 00:02:09,880 --> 00:02:14,030 This admin page can be visited by every logged-in user. 45 00:02:14,030 --> 00:02:16,730 So if you do want to build this on your own, 46 00:02:16,730 --> 00:02:20,290 you don't need to implement authorization. 47 00:02:20,290 --> 00:02:23,970 Instead, every logged-in user will see this admin page, 48 00:02:23,970 --> 00:02:26,440 and here we can create new blog posts 49 00:02:26,440 --> 00:02:29,510 and view all created blog posts. 50 00:02:29,510 --> 00:02:33,090 Of course, this is not entirely realistic here. 51 00:02:33,090 --> 00:02:37,850 Not-logged-in users should also be able to see a blog posts. 52 00:02:37,850 --> 00:02:41,420 And in this demo application, that's not the case. 53 00:02:41,420 --> 00:02:45,430 Only logged-in users can see blog posts down there, 54 00:02:45,430 --> 00:02:47,800 as soon as we created at least one. 55 00:02:47,800 --> 00:02:51,640 And then all logged-in users will be able to edit 56 00:02:51,640 --> 00:02:53,600 and delete those posts. 57 00:02:53,600 --> 00:02:55,910 Which of course is also not necessarily 58 00:02:55,910 --> 00:02:57,283 what you typically want. 59 00:02:58,390 --> 00:03:01,350 Now let me show what I mean, if I create a first post here. 60 00:03:01,350 --> 00:03:03,820 This is our first post. 61 00:03:03,820 --> 00:03:07,870 Then down there, we have this very basic representation 62 00:03:07,870 --> 00:03:09,010 of that first post. 63 00:03:09,010 --> 00:03:12,410 And we can click View & Edit to be taken to this page 64 00:03:12,410 --> 00:03:15,750 where we can view and edit it in one go. 65 00:03:15,750 --> 00:03:18,340 And of course, here we can edit it 66 00:03:18,340 --> 00:03:21,800 and add a couple of exclamation marks, save that. 67 00:03:21,800 --> 00:03:23,480 And you see it was saved. 68 00:03:23,480 --> 00:03:25,750 And we can also delete blog posts here. 69 00:03:25,750 --> 00:03:29,050 But again, this is only unlocked if you're logged in, 70 00:03:29,050 --> 00:03:34,050 and then all logged-in users can edit all the blog posts. 71 00:03:34,220 --> 00:03:36,730 I built this demo application like this, 72 00:03:36,730 --> 00:03:39,430 because it's still makes for a great practice. 73 00:03:39,430 --> 00:03:42,460 You can still practice all the concepts you learn about. 74 00:03:42,460 --> 00:03:44,740 And the focus of this course section 75 00:03:44,740 --> 00:03:47,290 will be on a different topic. 76 00:03:47,290 --> 00:03:50,460 We will dive into the code base in a couple of seconds, 77 00:03:50,460 --> 00:03:53,900 and analyze some issues that we might find there. 78 00:03:53,900 --> 00:03:56,410 And the code base of this demo project 79 00:03:56,410 --> 00:03:59,310 will already be complex enough. 80 00:03:59,310 --> 00:04:02,060 If it would be any more complex, 81 00:04:02,060 --> 00:04:03,810 if we would also care about 82 00:04:03,810 --> 00:04:06,850 not-logged-in versus logged-in users, 83 00:04:06,850 --> 00:04:10,360 diving into the main point of this course section 84 00:04:10,360 --> 00:04:13,420 might simply become a bit too overwhelming, 85 00:04:13,420 --> 00:04:15,310 and I don't want that. 86 00:04:15,310 --> 00:04:18,120 We'll see a way more realistic project 87 00:04:18,120 --> 00:04:19,899 in the next section already though, 88 00:04:19,899 --> 00:04:22,600 when we built this main course project, 89 00:04:22,600 --> 00:04:25,280 this online shop from the ground up. 90 00:04:25,280 --> 00:04:28,440 So we will also see all the concepts come together 91 00:04:28,440 --> 00:04:31,200 in a pretty realistic website there. 92 00:04:31,200 --> 00:04:33,350 That's by this demo project, 93 00:04:33,350 --> 00:04:37,970 this demo website here, is only partly realistic 94 00:04:37,970 --> 00:04:39,933 because we'll focus on something else. 95 00:04:40,900 --> 00:04:44,310 Nonetheless, you saw all the core features we have here. 96 00:04:44,310 --> 00:04:47,720 And we're only using concepts you already learned about. 97 00:04:47,720 --> 00:04:50,610 So again, definitely as a challenge, 98 00:04:50,610 --> 00:04:52,750 don't just take the attached code. 99 00:04:52,750 --> 00:04:55,050 Instead, try building this on your own. 100 00:04:55,050 --> 00:04:57,500 And in a couple of seconds, which I give you 101 00:04:57,500 --> 00:05:00,720 to pause the video and try building this on your own. 102 00:05:00,720 --> 00:05:04,090 I will walk through my solution code together with you, 103 00:05:04,090 --> 00:05:06,420 so that you can see how I built this 104 00:05:06,420 --> 00:05:09,270 before we then thereafter dive into the main topic 105 00:05:09,270 --> 00:05:11,160 of this course section, 106 00:05:11,160 --> 00:05:14,793 which will be all about improving our code. 107 00:05:17,300 --> 00:05:19,710 So did you succeed? 108 00:05:19,710 --> 00:05:23,440 Let's explore to code I prepared for you together. 109 00:05:23,440 --> 00:05:25,230 You can, of course now download it 110 00:05:25,230 --> 00:05:28,773 so that you can follow along with exactly the same code. 111 00:05:29,760 --> 00:05:33,510 Now, if we have a look at the example project I gave to you, 112 00:05:33,510 --> 00:05:35,420 you will see, I have this data folder 113 00:05:35,420 --> 00:05:38,200 with the database.js file as you know it. 114 00:05:38,200 --> 00:05:41,440 There, I'm connecting to the auth-blog database 115 00:05:41,440 --> 00:05:43,100 on my MongoDB server. 116 00:05:43,100 --> 00:05:46,003 But it's the basic file you already know. 117 00:05:46,920 --> 00:05:50,130 In public styles, I prepared a couple of style files 118 00:05:50,130 --> 00:05:52,470 and you can simply go through that CSS code 119 00:05:52,470 --> 00:05:56,220 to see what it does, but it's fairly simple CSS code, 120 00:05:56,220 --> 00:05:58,780 no fancy styles in there. 121 00:05:58,780 --> 00:06:02,130 Now then we got the views and the routes folders. 122 00:06:02,130 --> 00:06:04,270 Let's start with the views. 123 00:06:04,270 --> 00:06:06,060 There, I got a bunch of includes, 124 00:06:06,060 --> 00:06:09,880 for example, all the for the post-form and the post-item, 125 00:06:09,880 --> 00:06:12,760 because I'm repeating a bunch of post-items 126 00:06:12,760 --> 00:06:16,530 on my admin page after some posts were added. 127 00:06:16,530 --> 00:06:20,080 And I'm also using the same post-form twice 128 00:06:20,080 --> 00:06:23,170 on the admin page for creating a new post, 129 00:06:23,170 --> 00:06:28,050 and on the single post page when we view and edit that post. 130 00:06:28,050 --> 00:06:30,170 Now, then I got a couple of other pages, 131 00:06:30,170 --> 00:06:33,180 one for showing that you're not authenticated, 132 00:06:33,180 --> 00:06:35,980 one if some other error occurs. 133 00:06:35,980 --> 00:06:37,570 Then the admin page here, 134 00:06:37,570 --> 00:06:41,030 which does include that post-form 135 00:06:41,030 --> 00:06:43,340 with a bunch of data that's sent into it. 136 00:06:43,340 --> 00:06:46,120 I'll come back to that data in a second. 137 00:06:46,120 --> 00:06:48,940 And then here I'm rendering my list of posts, 138 00:06:48,940 --> 00:06:50,270 unless I don't have any, 139 00:06:50,270 --> 00:06:52,623 in which case I show a fallback message. 140 00:06:53,730 --> 00:06:57,810 Then the login.ejs file, which is the same login.ejs file 141 00:06:57,810 --> 00:07:00,180 I used in the authentication section, 142 00:07:00,180 --> 00:07:02,690 I'm just rendering my login form here 143 00:07:02,690 --> 00:07:05,223 with email and password inputs. 144 00:07:06,194 --> 00:07:08,440 And then I have to sign up a page 145 00:07:08,440 --> 00:07:10,450 with almost the same form, 146 00:07:10,450 --> 00:07:14,640 but there, we also have to confirm email field as well, 147 00:07:14,640 --> 00:07:18,610 which is why I'm not outsourcing this form into an include 148 00:07:18,610 --> 00:07:21,513 because the two forms aren't exactly the same. 149 00:07:22,660 --> 00:07:24,630 Then the single-post.ejs file, 150 00:07:24,630 --> 00:07:27,580 if we clicked on that View & Edit button, 151 00:07:27,580 --> 00:07:29,570 it basically just shows the form 152 00:07:29,570 --> 00:07:31,890 with the data for this post. 153 00:07:31,890 --> 00:07:33,680 And then the welcome.ejs file 154 00:07:33,680 --> 00:07:36,053 which just is a home site here. 155 00:07:36,930 --> 00:07:39,120 These are the EJS files I have, 156 00:07:39,120 --> 00:07:41,260 the templates I have here. 157 00:07:41,260 --> 00:07:43,580 So quite a few, as you can tell. 158 00:07:43,580 --> 00:07:46,330 And then we've got the routes file, 159 00:07:46,330 --> 00:07:48,450 the routes folder with this file here 160 00:07:48,450 --> 00:07:50,120 and before we have a look at that, 161 00:07:50,120 --> 00:07:52,410 of course also app.js, 162 00:07:52,410 --> 00:07:57,110 in which I'm importing a bunch of third party packages, 163 00:07:57,110 --> 00:07:59,900 where I then set up my session 164 00:07:59,900 --> 00:08:02,660 using the MongoDB storage again. 165 00:08:02,660 --> 00:08:07,450 Then I also do is set up CSRF protection, 166 00:08:07,450 --> 00:08:11,020 as you learn that in the last course section. 167 00:08:11,020 --> 00:08:13,730 And you will see in the routes, 168 00:08:13,730 --> 00:08:15,530 we'll have a look at them in a second, 169 00:08:15,530 --> 00:08:18,870 that I'm forwarding CSRF tokens everywhere. 170 00:08:18,870 --> 00:08:21,900 And if you take a look at all the forms I have, 171 00:08:21,900 --> 00:08:24,690 like here for managing posts, 172 00:08:24,690 --> 00:08:28,770 there always is this hidden CSRF field in there. 173 00:08:28,770 --> 00:08:31,200 And that includes the header with the form 174 00:08:31,200 --> 00:08:33,360 for the Logout button, by the way. 175 00:08:33,360 --> 00:08:36,559 This is also a form where a post request 176 00:08:36,559 --> 00:08:37,880 is sent to the server. 177 00:08:37,880 --> 00:08:42,480 And data for like all forms, it should come with that token. 178 00:08:42,480 --> 00:08:44,640 If we don't include the token here, 179 00:08:44,640 --> 00:08:49,180 logging out won't work and we'll get an error instead. 180 00:08:49,180 --> 00:08:53,060 So I'm using that CSRF protection as you learned it. 181 00:08:53,060 --> 00:08:55,260 And then here I have my own middleware 182 00:08:55,260 --> 00:08:58,710 for checking the user authentication status 183 00:08:58,710 --> 00:09:03,710 and for setting it on this locals key here on my response. 184 00:09:04,580 --> 00:09:08,290 Then I register all my routes that are defined 185 00:09:08,290 --> 00:09:11,670 in the blog.js file in the routes folder. 186 00:09:11,670 --> 00:09:15,340 I got the default error handler, which is very basic here. 187 00:09:15,340 --> 00:09:17,630 And then I started the server 188 00:09:17,630 --> 00:09:20,533 once I connected to the database. 189 00:09:21,440 --> 00:09:25,060 So fairly straight forward using the protection 190 00:09:25,060 --> 00:09:27,623 and authentication concepts you'll learn about. 191 00:09:29,110 --> 00:09:33,200 Now blog.js in the routes folder is a pretty big file 192 00:09:33,200 --> 00:09:34,330 in the end here. 193 00:09:34,330 --> 00:09:37,623 All zoom out a bit to bring more code onto the screen. 194 00:09:38,850 --> 00:09:40,950 I do import a bunch of packages, 195 00:09:40,950 --> 00:09:44,180 which are all part of package.json of course. 196 00:09:44,180 --> 00:09:48,710 And then I, in the end, create my router 197 00:09:48,710 --> 00:09:50,870 and I register a bunch of routes, 198 00:09:50,870 --> 00:09:52,920 like the home screen. 199 00:09:52,920 --> 00:09:55,710 Please note that I'm passing the CSRF token 200 00:09:55,710 --> 00:09:57,380 to that home screen here. 201 00:09:57,380 --> 00:10:00,440 So to this screen, even though I don't have a form 202 00:10:00,440 --> 00:10:03,060 in the main part of this screen, 203 00:10:03,060 --> 00:10:06,290 but of course I got my header on every screen 204 00:10:06,290 --> 00:10:08,140 and there I got the Logout button, 205 00:10:08,140 --> 00:10:10,450 which sits inside of a form as you learned, 206 00:10:10,450 --> 00:10:13,990 and therefore, every page that includes the header, 207 00:10:13,990 --> 00:10:16,750 which in turn includes that logout form, 208 00:10:16,750 --> 00:10:19,060 needs to get a CSRF token. 209 00:10:19,060 --> 00:10:23,938 So that, that CSRF token is available in that header, 210 00:10:23,938 --> 00:10:25,853 otherwise it will fail. 211 00:10:27,200 --> 00:10:29,460 That's why I'm doing it like this here, 212 00:10:29,460 --> 00:10:33,703 why I'm passing my CSRF token to the welcome template. 213 00:10:34,860 --> 00:10:37,760 And then I got my signup get route, 214 00:10:37,760 --> 00:10:40,993 which loads that Signup page here. 215 00:10:41,920 --> 00:10:46,910 And there, I then also got this session usage here 216 00:10:46,910 --> 00:10:50,630 for handling input errors. 217 00:10:50,630 --> 00:10:53,650 If the user did enter some invalid data, 218 00:10:53,650 --> 00:10:55,560 then I'm extracting it here, 219 00:10:55,560 --> 00:10:58,740 and I'm sending it back into the form, 220 00:10:58,740 --> 00:11:02,683 so that if we would try to create a user 221 00:11:02,683 --> 00:11:06,090 that already exists, for example, 222 00:11:06,090 --> 00:11:09,920 and in my case, I already did create a user with that email, 223 00:11:09,920 --> 00:11:11,650 I get this error. 224 00:11:11,650 --> 00:11:14,140 That's all to something you saw before already. 225 00:11:14,140 --> 00:11:17,600 And I'm using the exact same mechanism as shown there 226 00:11:17,600 --> 00:11:19,540 just when I show it again. 227 00:11:19,540 --> 00:11:23,590 And then I got the same logic in the login get route here, 228 00:11:23,590 --> 00:11:28,240 which is used for presenting that Login page. 229 00:11:28,240 --> 00:11:30,520 And there, I got the same kind of validation 230 00:11:30,520 --> 00:11:32,320 you already know. 231 00:11:32,320 --> 00:11:36,020 And then it got post routes for handling the post requests, 232 00:11:36,020 --> 00:11:38,400 which are sent by these forms. 233 00:11:38,400 --> 00:11:41,060 For example, here for signing up 234 00:11:41,060 --> 00:11:44,090 where I then validate the user input. 235 00:11:44,090 --> 00:11:47,540 Check whether the input is correct. 236 00:11:47,540 --> 00:11:51,480 And where I then might flash some data onto my session, 237 00:11:51,480 --> 00:11:55,280 so that it can be shown on that Signup page. 238 00:11:55,280 --> 00:11:59,330 And I redirect and return if we have invalid input. 239 00:11:59,330 --> 00:12:02,660 Then I check if we already have a user for that email, 240 00:12:02,660 --> 00:12:06,870 if we do, I also return and show some error data. 241 00:12:06,870 --> 00:12:09,270 And otherwise we hashed the password. 242 00:12:09,270 --> 00:12:12,090 Create a new user which uses the hashed password, 243 00:12:12,090 --> 00:12:14,350 and store that user in the database, 244 00:12:14,350 --> 00:12:15,963 in the user's collection. 245 00:12:17,520 --> 00:12:19,760 Then I redirected the login page. 246 00:12:19,760 --> 00:12:22,810 We saw that get route up there. 247 00:12:22,810 --> 00:12:25,720 And if that Login page form is submitted, 248 00:12:25,720 --> 00:12:28,320 we make it into this post login route. 249 00:12:28,320 --> 00:12:31,190 There I'm extracting the entered data. 250 00:12:31,190 --> 00:12:33,306 I'm also validating that data 251 00:12:33,306 --> 00:12:36,150 or I'm checking whether I found a user 252 00:12:36,150 --> 00:12:38,550 for that data to be precise. 253 00:12:38,550 --> 00:12:41,700 If not, I return and set some error data. 254 00:12:41,700 --> 00:12:44,610 I do the same if the passwords are not equal, 255 00:12:44,610 --> 00:12:47,110 which has checked with the bcrypt package, 256 00:12:47,110 --> 00:12:49,190 since that lost package that was used 257 00:12:49,190 --> 00:12:51,520 for creating the passwords. 258 00:12:51,520 --> 00:12:54,860 And then if everything is fine, if the user did log in, 259 00:12:54,860 --> 00:12:56,930 I stored that data into session, 260 00:12:56,930 --> 00:13:00,550 so that we, well, can check this in the future 261 00:13:00,550 --> 00:13:03,450 to find out whether a user with that session 262 00:13:03,450 --> 00:13:05,040 should be authenticated. 263 00:13:05,040 --> 00:13:07,980 That's what you learned in the authentication section. 264 00:13:07,980 --> 00:13:10,940 And then I saved a session and once it was saved, 265 00:13:10,940 --> 00:13:13,550 I redirect and I do it in this order. 266 00:13:13,550 --> 00:13:17,260 And I wait until the session was saved to the database 267 00:13:17,260 --> 00:13:21,790 to ensure that we only show the admin page 268 00:13:21,790 --> 00:13:25,870 once the user is officially authenticated. 269 00:13:25,870 --> 00:13:29,030 And once we stored that data in the session, 270 00:13:29,030 --> 00:13:31,022 if we redirect to early, 271 00:13:31,022 --> 00:13:35,870 the admin page, which checks the user auth status 272 00:13:35,870 --> 00:13:38,980 might determine that the user is not authenticated, 273 00:13:38,980 --> 00:13:40,820 even though he or she is, 274 00:13:40,820 --> 00:13:43,100 and that's why we're doing it like this. 275 00:13:43,100 --> 00:13:47,093 We talked about that in the authentication course section. 276 00:13:48,860 --> 00:13:52,750 Now in the admin route, after checking the auth status. 277 00:13:52,750 --> 00:13:56,390 And here I'm using res.locals, which is that field 278 00:13:56,390 --> 00:14:00,000 that is set in my custom middleware in app.js, 279 00:14:00,000 --> 00:14:02,563 once I know that the user is authenticated. 280 00:14:03,720 --> 00:14:07,120 Once we checked that here in the admin get route, 281 00:14:07,120 --> 00:14:09,080 I get all my posts. 282 00:14:09,080 --> 00:14:11,460 Again here, we're always fetching all the posts 283 00:14:11,460 --> 00:14:14,770 from everyone to simplify it as a bit. 284 00:14:14,770 --> 00:14:19,190 And then I also manage some session error data here, 285 00:14:19,190 --> 00:14:21,973 because if we do log in here, 286 00:14:24,880 --> 00:14:27,640 this form here for creating a new post, 287 00:14:27,640 --> 00:14:29,880 also of course could be tricked 288 00:14:29,880 --> 00:14:33,810 because whilst I do have the required attribute and so on, 289 00:14:33,810 --> 00:14:36,650 we could use the dev tools to remove that. 290 00:14:36,650 --> 00:14:40,560 And then I could submit the form without entering a title. 291 00:14:40,560 --> 00:14:43,150 I am tricking that front end validation. 292 00:14:43,150 --> 00:14:46,120 And that's why I'm also checking the input data again 293 00:14:46,120 --> 00:14:47,100 on the server, 294 00:14:47,100 --> 00:14:51,110 and which I added logic for also storing the user input, 295 00:14:51,110 --> 00:14:52,840 and showing this error message 296 00:14:52,840 --> 00:14:54,891 if I determine on the server that 297 00:14:54,891 --> 00:14:57,783 the data provided by the user is wrong. 298 00:14:58,870 --> 00:15:01,250 and that's, by the way, why you should always 299 00:15:01,250 --> 00:15:05,300 get into the habit of validating input on the server 300 00:15:05,300 --> 00:15:07,530 because you're front and code, 301 00:15:07,530 --> 00:15:10,590 the attributes you add on input fields and so on, 302 00:15:10,590 --> 00:15:12,810 that can always be tricked. 303 00:15:12,810 --> 00:15:16,240 You'd want to double check the input you're getting 304 00:15:16,240 --> 00:15:20,300 on the server to ensure you're not storing an empty value 305 00:15:20,300 --> 00:15:21,773 or anything like that. 306 00:15:22,930 --> 00:15:24,680 So that's what I'm doing here. 307 00:15:24,680 --> 00:15:26,310 Then I rendered the admin page, 308 00:15:26,310 --> 00:15:28,810 and I'm passing the input data to it. 309 00:15:28,810 --> 00:15:33,110 The input data is that error data, which I might have. 310 00:15:33,110 --> 00:15:36,620 And then I also of course create my CSRF token here 311 00:15:36,620 --> 00:15:39,220 because we need that on this page, 312 00:15:39,220 --> 00:15:41,313 on this admin page as well. 313 00:15:42,460 --> 00:15:45,430 Get the log out route here, nothing too fancy there. 314 00:15:45,430 --> 00:15:48,950 I'm just resetting my session data and then I'm redirecting. 315 00:15:48,950 --> 00:15:51,950 And by resetting the session data, we do log out 316 00:15:51,950 --> 00:15:55,973 because we can no longer verified the authentication status. 317 00:15:56,820 --> 00:16:00,340 And then I got a route for registering new posts. 318 00:16:00,340 --> 00:16:02,460 So that is a route that will be triggered 319 00:16:02,460 --> 00:16:06,430 if this new post form here is submitted. 320 00:16:06,430 --> 00:16:08,200 And in there I am performing 321 00:16:08,200 --> 00:16:12,040 that service side input validation I mentioned before. 322 00:16:12,040 --> 00:16:14,980 I do then set this error data 323 00:16:14,980 --> 00:16:19,310 if I find out that incorrect data was submitted, 324 00:16:19,310 --> 00:16:22,200 and then if everything is all right, on the other hand, 325 00:16:22,200 --> 00:16:26,000 I create a new post, which is stored in the database. 326 00:16:26,000 --> 00:16:30,020 And then I redirect back to the admin page here. 327 00:16:30,020 --> 00:16:34,210 We have a get route for loading a single post. 328 00:16:34,210 --> 00:16:35,960 So that's the route which is triggered 329 00:16:35,960 --> 00:16:37,853 if I click on View & Edit. 330 00:16:38,690 --> 00:16:42,410 And there, in the end, I create my post ID 331 00:16:42,410 --> 00:16:45,530 using that MongoDB object ID thing. 332 00:16:45,530 --> 00:16:49,530 I then find that post by that ID in my collection, 333 00:16:49,530 --> 00:16:52,060 if I don't find a post with that ID, 334 00:16:52,060 --> 00:16:54,560 I rendered the 404 page. 335 00:16:54,560 --> 00:16:58,120 And I also have the logic here for extracting 336 00:16:58,120 --> 00:17:00,400 some error data from a session, 337 00:17:00,400 --> 00:17:03,290 because of course I do have a form on this page as well. 338 00:17:03,290 --> 00:17:04,550 And just as before, 339 00:17:04,550 --> 00:17:07,410 this might be submitted with incorrect data. 340 00:17:07,410 --> 00:17:10,670 So I want to check if I detected incorrect data before, 341 00:17:10,670 --> 00:17:12,810 so that I can show the error message 342 00:17:12,810 --> 00:17:15,450 or extract the error message from the session, 343 00:17:15,450 --> 00:17:18,700 and then send it back to this rendered templates 344 00:17:18,700 --> 00:17:20,470 to show it there. 345 00:17:20,470 --> 00:17:22,569 Because for this post route, 346 00:17:22,569 --> 00:17:25,609 which is triggered if that form is submitted, 347 00:17:25,609 --> 00:17:30,610 in there, I do then actually validate the user input 348 00:17:30,840 --> 00:17:34,410 just as I did it for creating a post. 349 00:17:34,410 --> 00:17:36,530 And I flashed that onto my session, 350 00:17:36,530 --> 00:17:38,880 if I do detect erroneous input, 351 00:17:38,880 --> 00:17:41,553 and then I redirect back to the page. 352 00:17:42,400 --> 00:17:45,390 If we make it past this check here, though, 353 00:17:45,390 --> 00:17:48,270 in this post route for editing a post, 354 00:17:48,270 --> 00:17:52,150 I updated that post in my database like this, 355 00:17:52,150 --> 00:17:54,490 and then I redirect thereafter. 356 00:17:54,490 --> 00:17:58,150 And I'm always using async await when working with MongoDB, 357 00:17:58,150 --> 00:18:00,070 simply to ensure that we wait 358 00:18:00,070 --> 00:18:03,070 for these asynchronous operations to finish 359 00:18:03,070 --> 00:18:04,503 before we continue. 360 00:18:05,670 --> 00:18:09,280 The last route I got here is this delete route 361 00:18:09,280 --> 00:18:12,440 where I'm constructing my object ID, my post ID, 362 00:18:12,440 --> 00:18:14,863 and I'm then deleting a post by that ID. 363 00:18:16,230 --> 00:18:18,410 So that's it. 364 00:18:18,410 --> 00:18:21,840 Plenty of logic in that blog.js file, 365 00:18:21,840 --> 00:18:25,870 but that is the application or the website I prepared. 366 00:18:25,870 --> 00:18:29,490 And now I want to talk about a couple of problems 367 00:18:29,490 --> 00:18:30,923 that we have in there.