1 00:00:02,100 --> 00:00:03,820 So now we got the theory 2 00:00:03,820 --> 00:00:05,240 about sessions and cookies 3 00:00:05,240 --> 00:00:07,440 and how we use those features 4 00:00:07,440 --> 00:00:10,100 to implement real authentication. 5 00:00:10,100 --> 00:00:12,610 How do we now actively write the code 6 00:00:12,610 --> 00:00:15,250 we need to write for this? 7 00:00:15,250 --> 00:00:17,610 Well, for that, it is again, 8 00:00:17,610 --> 00:00:19,360 important to always keep in mind 9 00:00:19,360 --> 00:00:21,630 that sessions and cookies can be 10 00:00:21,630 --> 00:00:24,150 and will often be used outside 11 00:00:24,150 --> 00:00:25,880 of authentication purposes, 12 00:00:25,880 --> 00:00:27,910 so you can use them for a lot of things. 13 00:00:27,910 --> 00:00:31,170 And you typically don't write all the nitty-gritty details 14 00:00:31,170 --> 00:00:34,090 and all the deep dive technical code on your own. 15 00:00:34,090 --> 00:00:36,130 But instead as so often, 16 00:00:36,130 --> 00:00:39,000 you often rely on third-party packages 17 00:00:39,000 --> 00:00:41,430 to do the heavy lifting for you. 18 00:00:41,430 --> 00:00:43,270 And there when you work with node 19 00:00:43,270 --> 00:00:45,580 and express for sessions, 20 00:00:45,580 --> 00:00:49,230 the express-session package is the most popular one. 21 00:00:49,230 --> 00:00:52,160 For cookies, we can work with cookie-parser. 22 00:00:52,160 --> 00:00:54,320 Though if we don't work with 23 00:00:54,320 --> 00:00:56,680 any other cookies then session cookies, 24 00:00:56,680 --> 00:01:00,350 we don't need to install the extra cookie-parser package 25 00:01:00,350 --> 00:01:01,780 since express-session 26 00:01:01,780 --> 00:01:05,349 will automatically manage session cookies for us, 27 00:01:05,349 --> 00:01:07,973 so then we don't need that extra package. 28 00:01:09,170 --> 00:01:10,630 Of course if you would be using 29 00:01:10,630 --> 00:01:13,150 our (indistinct) programming languages, 30 00:01:13,150 --> 00:01:17,210 you also have similar session and cookie packages. 31 00:01:17,210 --> 00:01:20,530 So this is not node JS express specific, 32 00:01:20,530 --> 00:01:24,660 non of the back and concepts taught so far were. 33 00:01:24,660 --> 00:01:26,920 This all applies to all possible 34 00:01:26,920 --> 00:01:29,170 programming languages. 35 00:01:29,170 --> 00:01:32,630 So therefore now back in our code here, 36 00:01:32,630 --> 00:01:35,900 we can stop our server here 37 00:01:35,900 --> 00:01:40,790 and quickly install the express-session package here 38 00:01:40,790 --> 00:01:45,223 to work with sessions in our node express application here. 39 00:01:46,090 --> 00:01:47,750 And once this was installed, 40 00:01:47,750 --> 00:01:50,670 we'll not yet restart our web server data 41 00:01:50,670 --> 00:01:53,840 because there is another package we'll need to install. 42 00:01:53,840 --> 00:01:55,060 But for this, first of all, 43 00:01:55,060 --> 00:01:58,330 let's go back into app JS because here 44 00:01:58,330 --> 00:02:00,040 where we set up all the other things 45 00:02:00,040 --> 00:02:01,700 for our web server as well, 46 00:02:01,700 --> 00:02:05,700 we will also need to set up the session feature 47 00:02:05,700 --> 00:02:07,330 because we'll implement this 48 00:02:07,330 --> 00:02:10,229 as a middleware into our, 49 00:02:10,229 --> 00:02:13,110 well request funnel here in the end, 50 00:02:13,110 --> 00:02:16,510 because sessions are a general feature 51 00:02:16,510 --> 00:02:19,630 and in the end this express session package 52 00:02:19,630 --> 00:02:22,960 needs to run and needs to check on 53 00:02:22,960 --> 00:02:25,120 every incoming request 54 00:02:25,120 --> 00:02:27,790 so that a session can be generated 55 00:02:27,790 --> 00:02:29,480 for every incoming request. 56 00:02:29,480 --> 00:02:32,620 So for every user who's talking to our website 57 00:02:32,620 --> 00:02:37,158 or so that an already created session can be identified 58 00:02:37,158 --> 00:02:41,710 if a user who already has a session sends a request. 59 00:02:41,710 --> 00:02:42,543 And again, 60 00:02:42,543 --> 00:02:46,160 we will know whether a user already has a session or not 61 00:02:46,160 --> 00:02:48,963 because of that cookie that contains the session ID. 62 00:02:50,130 --> 00:02:51,590 So therefore here in app JS, 63 00:02:51,590 --> 00:02:55,780 we'll start by simply requiring this session 64 00:02:55,780 --> 00:02:58,020 packaged as express-session package 65 00:02:58,020 --> 00:02:59,423 which we just installed. 66 00:03:00,280 --> 00:03:04,170 And then we can register this middleware 67 00:03:04,170 --> 00:03:06,810 and we can for example do this here 68 00:03:06,810 --> 00:03:08,837 after a parsing request (indistinct), 69 00:03:09,730 --> 00:03:12,770 the exact position doesn't matter too much. 70 00:03:12,770 --> 00:03:17,100 Here we register it with app use as we did before. 71 00:03:17,100 --> 00:03:20,670 And we simply execute session as a function here. 72 00:03:20,670 --> 00:03:22,020 So this session, 73 00:03:22,020 --> 00:03:25,010 which I'm importing here is simply executed 74 00:03:25,010 --> 00:03:27,130 as a function here. 75 00:03:27,130 --> 00:03:29,950 And this will then generate such a middleware function, 76 00:03:29,950 --> 00:03:33,783 which is registered for is overall request funnel. 77 00:03:34,640 --> 00:03:36,010 Now this session function, 78 00:03:36,010 --> 00:03:40,000 which I'm executing here wants a JavaScript object 79 00:03:40,000 --> 00:03:42,290 in which we can set various properties 80 00:03:42,290 --> 00:03:44,430 to configure this session. 81 00:03:44,430 --> 00:03:47,223 And we should set a couple of settings here. 82 00:03:48,340 --> 00:03:49,173 For example, 83 00:03:49,173 --> 00:03:53,310 the first setting which we should set is the secret setting. 84 00:03:53,310 --> 00:03:56,600 And as always for such configuration objects, 85 00:03:56,600 --> 00:04:00,800 these key names here like secret are not up to you, 86 00:04:00,800 --> 00:04:02,760 instead the session package 87 00:04:02,760 --> 00:04:04,570 will look for these keys 88 00:04:04,570 --> 00:04:06,773 to know how it should work internally. 89 00:04:07,840 --> 00:04:11,240 Now, secret is simply a string 90 00:04:11,240 --> 00:04:13,430 that's totally up to you that is 91 00:04:13,430 --> 00:04:16,572 used for securing this session. 92 00:04:16,572 --> 00:04:18,950 That will all be done behind the scenes, 93 00:04:18,950 --> 00:04:21,696 but here you should enter some secret key, 94 00:04:21,696 --> 00:04:24,430 here I'll use super secret. 95 00:04:24,430 --> 00:04:26,660 You might use a bit of a longer 96 00:04:26,660 --> 00:04:29,600 and more secure string in reality, 97 00:04:29,600 --> 00:04:32,763 but here for demo purposes I'll keep this simple. 98 00:04:33,940 --> 00:04:36,430 So this is just some key that will be used internally 99 00:04:36,430 --> 00:04:38,060 for securing the session 100 00:04:38,060 --> 00:04:40,710 or to be precise also the session cookie. 101 00:04:40,710 --> 00:04:42,145 And this is crucial to ensure 102 00:04:42,145 --> 00:04:45,920 that a session can't be faked somehow, 103 00:04:45,920 --> 00:04:48,670 that there really is no way for a client 104 00:04:48,670 --> 00:04:51,260 telling you that he has a session 105 00:04:51,260 --> 00:04:54,590 that might not have been created before. 106 00:04:54,590 --> 00:04:55,853 So this should be set. 107 00:04:56,720 --> 00:04:57,553 In addition, 108 00:04:57,553 --> 00:04:59,430 we should set the resave option 109 00:04:59,430 --> 00:05:01,540 and set this to false. 110 00:05:01,540 --> 00:05:04,280 This will simply influence that a session 111 00:05:04,280 --> 00:05:07,210 is only updated in the database 112 00:05:07,210 --> 00:05:09,960 if the data in it is really changed. 113 00:05:09,960 --> 00:05:11,630 If that would be set to true, 114 00:05:11,630 --> 00:05:14,830 a new session would be stored in the database 115 00:05:14,830 --> 00:05:16,590 for every incoming request 116 00:05:16,590 --> 00:05:19,300 even if nothing about the session data changed. 117 00:05:19,300 --> 00:05:21,890 And this can have a couple of disadvantages 118 00:05:21,890 --> 00:05:24,580 if the same client sends a lot of requests 119 00:05:24,580 --> 00:05:26,290 in a short time span 120 00:05:26,290 --> 00:05:28,340 then saving the old session state 121 00:05:28,340 --> 00:05:30,010 might not have finished yet 122 00:05:30,010 --> 00:05:33,010 and it would then be overwritten by a new empty state, 123 00:05:33,010 --> 00:05:34,110 which could be wrong 124 00:05:34,110 --> 00:05:36,333 and therefore we wanna set this to false. 125 00:05:37,370 --> 00:05:41,560 We also can and should set the save uninitialized setting 126 00:05:41,560 --> 00:05:43,530 and also set this to false 127 00:05:43,530 --> 00:05:46,240 so that a session is really only stored 128 00:05:46,240 --> 00:05:49,830 in the database or wherever we wanna save it 129 00:05:49,830 --> 00:05:52,740 once we have some data in it. 130 00:05:52,740 --> 00:05:56,090 That data could be that authentication flag 131 00:05:56,090 --> 00:05:58,110 but it could also be some other data 132 00:05:58,110 --> 00:05:59,930 like shopping cart data 133 00:05:59,930 --> 00:06:02,280 for a visitor of our website. 134 00:06:02,280 --> 00:06:04,820 I'll get back to this shopping cart example 135 00:06:04,820 --> 00:06:06,760 in the online shop project 136 00:06:06,760 --> 00:06:09,000 later in the course by the way. 137 00:06:09,000 --> 00:06:11,910 And then we got a last super important setting 138 00:06:11,910 --> 00:06:14,680 and that's the store setting. 139 00:06:14,680 --> 00:06:18,040 The store setting controls where the session data 140 00:06:18,040 --> 00:06:20,060 actually should be stored. 141 00:06:20,060 --> 00:06:22,170 And we've got a couple of options here 142 00:06:22,170 --> 00:06:25,000 as I briefly mentioned before. 143 00:06:25,000 --> 00:06:29,110 We can store session data in memory, 144 00:06:29,110 --> 00:06:31,330 so in the memory of the computer 145 00:06:31,330 --> 00:06:34,760 executing this node express application. 146 00:06:34,760 --> 00:06:36,780 The downside of this is that 147 00:06:36,780 --> 00:06:38,570 if we ever restart our server, 148 00:06:38,570 --> 00:06:40,390 the data will be lost 149 00:06:40,390 --> 00:06:42,450 and we could also run into problems 150 00:06:42,450 --> 00:06:45,020 if we actually deploy 151 00:06:45,020 --> 00:06:48,510 and published this website on multiple servers, 152 00:06:48,510 --> 00:06:50,980 because we might need to handle a lot of traffic 153 00:06:50,980 --> 00:06:54,520 and therefore we might not have some shared memory. 154 00:06:54,520 --> 00:06:57,260 So this is really just an option for development 155 00:06:57,260 --> 00:06:59,870 and not recommended for reality 156 00:06:59,870 --> 00:07:03,493 if you wanna expose this website to real users. 157 00:07:04,560 --> 00:07:07,770 You also can use file storage as a storage here 158 00:07:07,770 --> 00:07:10,100 and that could be absolutely fine. 159 00:07:10,100 --> 00:07:11,750 But in this case here, 160 00:07:11,750 --> 00:07:15,070 since I'm already working with a MongoDB database, 161 00:07:15,070 --> 00:07:17,503 I would like to use MongoDB and start. 162 00:07:19,674 --> 00:07:21,900 And for that and for all those session storages, 163 00:07:21,900 --> 00:07:24,950 we typically also install third-party packages 164 00:07:24,950 --> 00:07:27,740 that will manage that storage for us 165 00:07:27,740 --> 00:07:29,770 so that we'll manage the database 166 00:07:29,770 --> 00:07:32,060 or a file access for us. 167 00:07:32,060 --> 00:07:35,080 And to find a list of all these session storages, 168 00:07:35,080 --> 00:07:36,910 it's best if you search for 169 00:07:36,910 --> 00:07:40,210 the session package itself, express-session, 170 00:07:40,210 --> 00:07:44,500 to visit it's page here on NPM or GitHub. 171 00:07:44,500 --> 00:07:46,920 And then there in this documentation 172 00:07:46,920 --> 00:07:50,680 you'll find a link to the compatible session stores. 173 00:07:50,680 --> 00:07:53,320 And these are third-party packages 174 00:07:53,320 --> 00:07:56,280 that implement different kinds of session stores 175 00:07:56,280 --> 00:07:58,090 for different databases, 176 00:07:58,090 --> 00:08:01,360 for the file system and so on. 177 00:08:01,360 --> 00:08:06,210 And here, we will also find a mongodb-session store, 178 00:08:06,210 --> 00:08:09,420 actually multiple mongodb-session stores. 179 00:08:09,420 --> 00:08:11,010 We'll use this one here, 180 00:08:11,010 --> 00:08:14,160 which is maintained by the MongoDB team 181 00:08:14,160 --> 00:08:16,800 and therefore that's the one I'll choose here, 182 00:08:16,800 --> 00:08:19,590 the connect-mongodb-session package. 183 00:08:19,590 --> 00:08:22,560 And here we can learn how we can use this package. 184 00:08:22,560 --> 00:08:24,550 It's pretty straightforward, 185 00:08:24,550 --> 00:08:26,460 we have to install it, 186 00:08:26,460 --> 00:08:28,250 then we have to import it 187 00:08:28,250 --> 00:08:30,550 and then execute it as a function, 188 00:08:30,550 --> 00:08:33,400 past the session as a parameter to function 189 00:08:33,400 --> 00:08:35,289 and then just create such a store 190 00:08:35,289 --> 00:08:37,770 by pointing at our server URL 191 00:08:37,770 --> 00:08:39,220 and defining the collection 192 00:08:39,220 --> 00:08:41,720 in which the session should be stored. 193 00:08:41,720 --> 00:08:43,600 So that's what we'll do now. 194 00:08:43,600 --> 00:08:46,080 I'll copy the package name here 195 00:08:46,080 --> 00:08:48,810 and then run npm install 196 00:08:48,810 --> 00:08:51,680 to install connect-mongodb-session, 197 00:08:51,680 --> 00:08:53,223 so this package. 198 00:08:54,310 --> 00:08:56,290 And then as a next step, 199 00:08:56,290 --> 00:08:59,430 we just import it. 200 00:08:59,430 --> 00:09:03,370 MongodbStore could be the name we choose here 201 00:09:03,370 --> 00:09:06,823 and that's this connect-mongodb-session package. 202 00:09:11,600 --> 00:09:14,697 Then here I'll create a MongoDBStore object like this 203 00:09:15,710 --> 00:09:18,740 by executing mongodbStore as a function 204 00:09:18,740 --> 00:09:21,330 and passing the session package object 205 00:09:21,330 --> 00:09:23,130 to that function 206 00:09:23,130 --> 00:09:27,030 so that internally these two things can connect. 207 00:09:27,030 --> 00:09:30,130 And then this MongoDBStore thing here 208 00:09:30,130 --> 00:09:32,030 is now actually a class, 209 00:09:32,030 --> 00:09:34,510 a constructor function we can execute 210 00:09:34,510 --> 00:09:36,100 to create a new object 211 00:09:36,100 --> 00:09:37,823 based on a certain blueprint. 212 00:09:38,960 --> 00:09:40,240 And I'll do this here. 213 00:09:40,240 --> 00:09:42,573 I'll create my sessionStore 214 00:09:45,438 --> 00:09:46,788 by calling new MongoDBStore 215 00:09:48,140 --> 00:09:51,170 and to this MongoDBStore constructor, 216 00:09:51,170 --> 00:09:54,350 we pass an object with configuration options 217 00:09:54,350 --> 00:09:56,690 for this MongoDBStore. 218 00:09:56,690 --> 00:09:59,570 And there for example we should set the URI, 219 00:09:59,570 --> 00:10:02,800 so the path to our database. 220 00:10:02,800 --> 00:10:06,070 In this case that's localhost:27017 221 00:10:06,070 --> 00:10:08,723 for the locally running MongoDB database. 222 00:10:10,200 --> 00:10:13,520 Then we can also add a databaseName here 223 00:10:13,520 --> 00:10:14,353 to define the database 224 00:10:14,353 --> 00:10:16,210 in which this collection 225 00:10:16,210 --> 00:10:18,720 for these sessions should be created. 226 00:10:18,720 --> 00:10:21,350 And there I wanna use the same database 227 00:10:21,350 --> 00:10:22,860 as for all the other data, 228 00:10:22,860 --> 00:10:25,723 so in my case that's auth-demo here. 229 00:10:26,860 --> 00:10:30,920 So I'll use that here as a database name 230 00:10:32,500 --> 00:10:33,570 and last but not least, 231 00:10:33,570 --> 00:10:34,960 we define the collection 232 00:10:34,960 --> 00:10:37,930 in which our session entries will be stored 233 00:10:37,930 --> 00:10:40,673 and all simply name that collection sessions. 234 00:10:42,290 --> 00:10:44,460 And that's now this sessionStore, 235 00:10:44,460 --> 00:10:47,260 which we now as a last step can take 236 00:10:47,260 --> 00:10:49,100 and assign as a value 237 00:10:49,100 --> 00:10:52,800 for the store option here when we create our session 238 00:10:52,800 --> 00:10:54,210 or when we initialize 239 00:10:54,210 --> 00:10:56,483 our session package, I should say. 240 00:10:58,010 --> 00:10:59,610 And that is it. 241 00:10:59,610 --> 00:11:01,840 This is how we now install 242 00:11:01,840 --> 00:11:05,110 and set up this session package. 243 00:11:05,110 --> 00:11:06,890 Now with all of that done, 244 00:11:06,890 --> 00:11:09,010 right now nothing changes 245 00:11:09,010 --> 00:11:12,280 but now we will be able to use this session 246 00:11:12,280 --> 00:11:14,360 in our application here. 247 00:11:14,360 --> 00:11:16,760 And that's what I wanna do now. 248 00:11:16,760 --> 00:11:19,330 And therefore we'll now see how we can utilize 249 00:11:19,330 --> 00:11:22,240 such a session for authentication purposes 250 00:11:22,240 --> 00:11:24,800 to lock down access to certain features 251 00:11:24,800 --> 00:11:27,760 and unlock access with that session 252 00:11:27,760 --> 00:11:29,840 before we then as a next step, 253 00:11:29,840 --> 00:11:31,970 we'll also see how we can sessions 254 00:11:31,970 --> 00:11:35,180 outside of the authentication area. 255 00:11:35,180 --> 00:11:36,540 Now I just noticed that 256 00:11:36,540 --> 00:11:39,180 when I tried to start my development server, 257 00:11:39,180 --> 00:11:40,760 it crashes though. 258 00:11:40,760 --> 00:11:43,140 And the reason for this is that I entered an invalid 259 00:11:43,140 --> 00:11:46,010 connection string for the sessions to work. 260 00:11:46,010 --> 00:11:49,003 This should not be local host 27017, 261 00:11:49,902 --> 00:11:51,752 but instead mongodb://localhost27017, 262 00:11:56,100 --> 00:11:58,930 just as it is in database JS, 263 00:11:58,930 --> 00:12:02,240 it should be exactly the same URL. 264 00:12:02,240 --> 00:12:04,410 So I'll save this here. 265 00:12:04,410 --> 00:12:06,650 And with that if you restart NPM start, 266 00:12:06,650 --> 00:12:08,333 now it should be running.