WEBVTT 0 00:01.340 --> 00:01.570 All right. 1 00:01.600 --> 00:02.750 So let's get started 2 00:02.780 --> 00:09.550 putting into practice what we just learned about and adding cookies and sessions to our current app. 3 00:09.590 --> 00:11.180 So first things first. 4 00:11.180 --> 00:17.090 As always we have to install some packages and the ones that we're using in this lesson are passport, 5 00:17.510 --> 00:21.680 passport-local, passport-local-mongoose. 6 00:21.800 --> 00:23.790 It's like some sort of weird game. 7 00:23.930 --> 00:27.000 And finally express-session. 8 00:27.050 --> 00:30.620 Notice this is not express-sessions. 9 00:30.620 --> 00:37.820 We want the singular one. Because people are allowed to come up with names for their packages and there's 10 00:37.820 --> 00:40.880 no sort of copy writing of any sort like that 11 00:40.880 --> 00:46.910 you often end up with packages that are named really really similarly and only until you've installed 12 00:46.910 --> 00:48.020 it and you've required it 13 00:48.020 --> 00:52.630 and it's not working and you spend hours and hours debugging your code 14 00:52.640 --> 00:55.200 you realize that you actually used the wrong package. 15 00:55.370 --> 00:59.800 So to avoid all of this heartache just make sure that you've got the right one. 16 00:59.870 --> 01:04.460 And there's a really easy way of checking to make sure that you're using the right one. 17 01:04.460 --> 01:12.570 So let's say if I typed in express-session you can see that over here there's a popularity score, 18 01:12.590 --> 01:15.920 there's a quality score and there's a maintenance score. 19 01:15.920 --> 01:22.940 Now if these bars are long that means it's a popular, high quality, frequently maintained package. 20 01:22.940 --> 01:24.510 And that's usually what you want. 21 01:24.590 --> 01:31.220 And if you take a look at express-session you can see that it gets over half a million downloads 22 01:31.280 --> 01:32.580 per week. 23 01:32.600 --> 01:38.330 Now if we accidentally typed in express-sessions you can see that all of those lines are a little bit 24 01:38.330 --> 01:39.330 shorter 25 01:39.380 --> 01:43.360 and when you click on it you see that it only has 600 weekly downloads. 26 01:43.430 --> 01:46.240 Some people probably genuinely want to use this package 27 01:46.340 --> 01:50.090 but also there's probably people who have mistakenly installed it. 28 01:50.630 --> 01:56.280 So it's this one that we want in addition to all of the others that we saw just now. 29 01:56.330 --> 01:59.750 And if you still got your server running go ahead and stop it. 30 02:00.280 --> 02:15.770 And then we're going to npm i passport passport-local passport-local-mongoose and 31 02:15.800 --> 02:20.060 finally express-session without 32 02:20.090 --> 02:20.920 the 's'. 33 02:21.080 --> 02:26.300 And let's hit enter and it'll go through and install everything. 34 02:26.300 --> 02:30.580 And now we're ready to go ahead and incorporate it to our app.js. 35 02:31.160 --> 02:35.990 So first things first we're going to rip out all of the parts where we were hashing and salting using 36 02:35.990 --> 02:36.880 bcrypt. 37 02:36.920 --> 02:39.290 So I'm going to delete it from here. 38 02:39.290 --> 02:48.030 And I'm also going to empty out my app.post login route and also the register one. 39 02:48.050 --> 02:54.770 So now both of our app.posts are empty and we're going to incorporate hashing and salting and authentication 40 02:55.130 --> 02:59.310 using passport and the packages that we've added just now. 41 02:59.420 --> 03:04.640 And the first package that we have to configure is express session. 42 03:04.640 --> 03:11.120 It's really really important that in the following steps you do everything exactly in the order that 43 03:11.120 --> 03:15.110 I'm showing it to you and placing it in the right parts of the code. 44 03:15.200 --> 03:20.000 So take note of where I'm writing the code because it's really really important 45 03:20.000 --> 03:22.990 and it's really easy to mess up. 46 03:23.180 --> 03:29.720 So let's get started. First things first. Let's require express-session 47 03:29.930 --> 03:36.000 and I'm simply going to paste it in just to avoid making typos which I make a lot of. 48 03:36.200 --> 03:42.360 But they say that recognizing you have a problem is the first step to solving those problems. 49 03:42.530 --> 03:46.420 And I'm going to change that var to a const because we are using 50 03:46.430 --> 03:46.740 ES 51 03:46.740 --> 03:48.690 version 6 in our code. 52 03:48.700 --> 03:55.070 Now while I'm here I'm going to also require the other packages that we installed and the only ones 53 03:55.070 --> 03:59.190 that we actually need to create a constant for are passport. 54 03:59.210 --> 04:10.390 So I'm going to require passport. And then I'm going to require passport-local-mongoose. And just check 55 04:10.390 --> 04:12.730 to make sure that you don't have the typos anywhere 56 04:13.330 --> 04:20.140 and we don't actually need to require passport local because it's gonna be one of those dependencies 57 04:20.170 --> 04:23.470 that will be needed by passport-local-mongoose 58 04:23.470 --> 04:30.550 but we don't actually need to refer to it in the code so we don't need to expose it explicitly by creating 59 04:30.550 --> 04:33.630 a constant and requiring the package. 60 04:33.640 --> 04:33.910 All right. 61 04:33.910 --> 04:41.200 So now that we're done, the next thing to do is to actually set up our session and you can see that whenever 62 04:41.200 --> 04:48.670 we're referring to a method or a property that's from express session we're going to use the keyword 63 04:48.760 --> 04:49.450 session. 64 04:49.990 --> 04:55.600 So as always when you're confused about what to do head back to the documentation and it will be your 65 04:55.600 --> 04:56.890 guiding light. 66 04:56.890 --> 05:01.440 So we've got express-session that we've already installed and required. 67 05:01.750 --> 05:04.350 So the next step is to actually use it. 68 05:04.660 --> 05:11.620 And in order to use it we're going to use a bit of code where we say app.use and we're going to call 69 05:11.710 --> 05:19.180 session and we're going to pass in some options such as secret, resave and saveUninitialized. And we're 70 05:19.180 --> 05:25.960 going to place this code just above where we have mongoose.connect and just below all of the other 71 05:26.120 --> 05:27.280 app.uses, 72 05:27.280 --> 05:28.340 so right here. 73 05:28.360 --> 05:31.290 And it's important that you place your code here as well. 74 05:31.360 --> 05:38.530 So we're going to write app.use and the package is called session and then I'm gonna open a set of 75 05:38.530 --> 05:41.630 parentheses and some curly braces. 76 05:41.770 --> 05:48.550 And then inside those curly braces is going to be a Javascript object with a number of properties. One 77 05:48.610 --> 05:53.420 is going to be the secret and this can be a long string of your choosing. 78 05:53.440 --> 05:57.300 And this is something that we're going to keep secret in our environment file. 79 05:57.340 --> 06:01.000 But first let's get it working before we move it to the environment file. 80 06:01.150 --> 06:08.190 So I'm just gonna put in a long sentence. "Our little secret." and I'll end it with a full stop. 81 06:08.200 --> 06:09.360 Now you don't have to. 82 06:09.370 --> 06:15.760 You can write any long string in here as long as you remember what it is and you use it consistently. 83 06:16.540 --> 06:16.850 All right. 84 06:16.870 --> 06:19.960 So let's add a comma and then let's add the next one. 85 06:20.140 --> 06:23.770 So we're going to set resave to false 86 06:23.770 --> 06:28.610 and we're going to set saveUninitialized. 87 06:28.720 --> 06:32.830 Remember that it has to be a 'z' for the Americanized spelling. 88 06:32.830 --> 06:35.170 And we're going to set that to false as well 89 06:35.170 --> 06:37.680 and then we can cap that off. 90 06:37.750 --> 06:42.920 Now if you're wondering what all of those things I just said are actually doing, then 91 06:42.940 --> 06:50.680 be sure to read through the documentation and simply just hit Command + F and search for it. And you can 92 06:50.680 --> 06:56.600 read through the documentation to see why we're choosing the options we are 93 06:56.620 --> 07:01.430 and I'm basically following just the documentations recommendations. 94 07:01.450 --> 07:01.720 OK. 95 07:01.750 --> 07:09.220 So now that we've set up our session the next thing to do is to initialize and start using passport. 96 07:09.520 --> 07:12.190 And in order to use passport 97 07:12.190 --> 07:15.630 the first thing we have to do is to initialize it. 98 07:15.940 --> 07:22.960 So right below where we initialized our session with all of these options we're going to again call 99 07:23.080 --> 07:24.400 app.use 100 07:24.550 --> 07:29.660 and in this case we're going to use something that comes along with passport 101 07:29.890 --> 07:39.520 and it's simply to initialize it. And this is a method that comes bundled with passport and sets up passport 102 07:39.520 --> 07:43.120 for us to start using it for authentication. 103 07:43.120 --> 07:50.360 Now the next line that we have to write is to tell our app to use passport to also set up our session. 104 07:50.710 --> 07:56.680 So we're going to write passport.session and then we're going to add the parentheses and close that 105 07:56.680 --> 07:56.920 off. 106 07:57.520 --> 08:05.170 So we first tell our app to use the session package that we required up here and then we set it up with 107 08:05.170 --> 08:07.460 some initial configuration. 108 08:07.480 --> 08:15.520 Next we tell our app to use passport and to initialize the passport package and to also use passport for 109 08:15.520 --> 08:16.910 dealing with the sessions. 110 08:16.930 --> 08:24.220 And if you want to know how I know to write these bits of code be sure to check out the passport documentation 111 08:24.670 --> 08:31.810 and especially under the configure section where they talk about passport strategies and how to verify 112 08:31.810 --> 08:37.510 callbacks and how to work with Express based applications which is what we're doing. 113 08:37.630 --> 08:40.380 And this is where these bits of code comes from. 114 08:40.390 --> 08:47.200 So now that we've set up our app to use sessions and passport for managing those sessions, the next thing 115 08:47.200 --> 08:52.790 to do is to set up our last package, passport-local mongoose. 116 08:53.050 --> 09:00.540 And we've already installed it but in order to use it we have to add it to our mongoose schema as a plugin. 117 09:00.550 --> 09:05.800 So this is very similar to what we did when we covered encryption when we used the Mongoose encryption 118 09:05.800 --> 09:06.830 package. 119 09:06.850 --> 09:13.270 So here we're going to tap into our userSchema and remember that this schema in order for it to have 120 09:13.270 --> 09:16.670 a plugin it has to be a mongoose schema. 121 09:16.690 --> 09:20.550 It can't just be a standard Javascript object. 122 09:20.680 --> 09:23.280 So make sure that your code still looks like this 123 09:23.530 --> 09:28.660 and if you're confused about what I'm talking right now make sure you take a look at the encryption 124 09:28.660 --> 09:30.190 lesson in this module. 125 09:30.970 --> 09:31.180 All right. 126 09:31.180 --> 09:37.480 So we've tapped into our userSchema and we're going to add a plugin to it. And the plug in is of course 127 09:37.510 --> 09:46.270 passportLocalMongoose and that is what we're going to use to hash and salt our passwords and to save 128 09:46.300 --> 09:49.980 our users into our MongoDB database. 129 09:50.020 --> 09:52.570 It's going to do a lot of heavy lifting for us. 130 09:53.140 --> 09:57.630 So now that we've enabled it let's go ahead and use it. 131 09:57.670 --> 10:04.900 So right below where we've created our user mongoose model and setup Mongoose to use that schema that 132 10:04.900 --> 10:06.130 we created earlier on, 133 10:06.280 --> 10:12.100 we're ready to configure the very last thing which is the passport local configurations and we're going 134 10:12.100 --> 10:20.080 to use exactly the same as what the documentation tells us to do which is to create a strategy which 135 10:20.080 --> 10:26.950 is going to be the local strategy to authenticate users using their username and password and also to 136 10:26.950 --> 10:27.760 serialize 137 10:27.790 --> 10:34.480 and deserialise our user. Now the serialise and deserialise is only necessary when we're using sessions. 138 10:34.990 --> 10:42.520 And what it does is when we tell it to serialize our user it basically creates that fortune cookie and 139 10:42.520 --> 10:51.460 stuffs the message namely our users identifications into the cookie. And then when we deserialise it basically allows 140 10:51.460 --> 10:57.690 passport to be able to crumble the cookie and discover the message inside which is who this user is. 141 10:57.790 --> 11:02.520 And all of their identification so that we can authenticate them on our server. 142 11:02.560 --> 11:08.760 So normally if you are just using passport and passport local you would have to write a lot more code. 143 11:08.890 --> 11:14.560 But because we're using passport local mongoose it's going to take care of a lot of that in between 144 11:14.560 --> 11:15.370 code for us. 145 11:15.670 --> 11:22.900 So all we need to do is just add these three lines of code right below where we create our new mongoose 146 11:22.900 --> 11:23.660 model 147 11:23.890 --> 11:26.790 and we're now ready to run our app. 148 11:26.980 --> 11:35.470 So let's go over and use nodemon to run our app.js making sure that your MongoDB server is still 149 11:35.470 --> 11:42.440 running. And some of you might notice this deprecation warning come up in the console. 150 11:42.460 --> 11:46.160 So what do we do when we come across a warning in the console? 151 11:46.270 --> 11:49.080 We copy it and we paste it into Google. 152 11:49.570 --> 11:50.800 So let's see what we get. 153 11:50.920 --> 11:59.260 Now the first link we get is a link to an issue on the original Mongoose package. And you can see that 154 11:59.260 --> 12:02.740 people are getting exactly the same problem that we're experiencing 155 12:02.740 --> 12:09.700 and some people have very helpfully told us how to fix it. All we need to do is call mongoose.set 156 12:10.150 --> 12:15.530 and then pass in this user create index option and set it to true. 157 12:15.610 --> 12:21.700 So whenever you're using third party libraries, there's all sorts of things that can happen and give 158 12:21.700 --> 12:25.270 you these deprecation warnings or other types of warnings. 159 12:25.300 --> 12:28.860 It's really really important to realize that you are not alone 160 12:28.930 --> 12:33.220 and other people have probably experienced what you're going through right now. 161 12:33.370 --> 12:39.340 So you have to try and find those people and see how they solved their problem. 162 12:39.410 --> 12:43.760 So let's go ahead and add that right below where we have our mongoose. 163 12:43.850 --> 12:49.960 .connect and we're gonna say mongoose.set 164 12:50.210 --> 12:56.720 useCreateIndex and let's set that to true. 165 12:56.720 --> 12:56.920 All right. 166 12:56.960 --> 13:04.760 Now let's hit save and the Mongoose server will restart or you can write 'rs' for restart and you can 167 13:04.760 --> 13:08.740 see we no longer have that deprecation warning anymore. 168 13:09.010 --> 13:15.740 Okay so we're pretty happy that our server is running without any warnings or errors 169 13:15.830 --> 13:22.520 and if you're getting some problems in here make sure that you firstly review where the code went and 170 13:22.640 --> 13:24.630 whether if you have any typos. 171 13:24.680 --> 13:34.160 So we first required three packages express-session, passport and passport local mongoose. And then 172 13:34.370 --> 13:42.770 we set up sessions to have a secret, set the resave option to false and set the saveUinitialized option 173 13:42.770 --> 13:44.420 to false as well. 174 13:44.420 --> 13:52.860 And then we initialize passport and we used a passport to manage our sessions. And then we set up our 175 13:52.860 --> 13:57.290 userSchema to use passport local mongoose as a plugin. 176 13:57.330 --> 14:05.340 And finally we used our passport local mongoose to create a local log in strategy and set a passport 177 14:05.400 --> 14:11.150 to serialise and deserialise our user. And notice the order of the code here. 178 14:11.340 --> 14:18.600 It's really really important that your code is placed in exactly the same places as I have on the screen 179 14:18.600 --> 14:27.540 here because if for example you decided to set up sessions after you tried to use the sessions to serialise 180 14:27.550 --> 14:29.670 and deserialise, it won't work. 181 14:30.120 --> 14:36.540 And similarly if you tried to use passport to create a strategy but you haven't initialized it, that 182 14:36.600 --> 14:37.700 also won't work. 183 14:37.710 --> 14:40.470 So this is why the order is important. 184 14:40.470 --> 14:47.520 So now that we are assuming that all the configuration is done and dusted, the next thing to do is to 185 14:47.520 --> 14:52.660 actually setup the register post route and the login post route. 186 14:52.680 --> 14:59.820 So let's tackle one at a time. And we're going to be using our passport local mongoose package to do 187 14:59.820 --> 15:00.570 this. 188 15:00.570 --> 15:07.710 So in the documentation in the example section they show you how you might use this package to register 189 15:07.740 --> 15:16.140 your users. You would provide a user name which will in our case be an email, the user's password and 190 15:16.140 --> 15:22.440 then there'll be a callback which might return error if there were problems or a user if everything 191 15:22.440 --> 15:23.810 went successfully. 192 15:24.150 --> 15:28.430 And then if there were no errors then we can authenticate our user. 193 15:28.470 --> 15:31.200 So let's go ahead and do that in here. 194 15:31.200 --> 15:38.410 Now we're first going to tap into the user model and we're going to call the method register on it. 195 15:38.640 --> 15:45.240 And this method comes from the passport-local-mongoose package. And it's only because of the package 196 15:45.360 --> 15:54.090 that we can avoid creating our new user, saving our user and interacting with Mongoose directly. Instead 197 15:54.450 --> 16:00.270 we're going to be using the passport-local-mongoose package as our middleman to handle all of that for 198 16:00.270 --> 16:01.020 us. 199 16:01.050 --> 16:09.750 So inside here we're going to first add the username field and we're going to pass in the information 200 16:09.750 --> 16:11.590 that gets passed over from our form. 201 16:11.670 --> 16:17.080 So it's the field that the user typed in for req.body.username. 202 16:17.220 --> 16:19.900 And this is going in as a Javascript object 203 16:19.920 --> 16:26.310 so with curly braces around it. The next part is we're going to pass in the password that user wanted 204 16:26.310 --> 16:31.850 to register with and this is gonna be req.body.password. 205 16:32.110 --> 16:38.040 Now for some reason I keep accidentally typing passport insert a password and I often mess those two 206 16:38.040 --> 16:38.440 up. 207 16:38.550 --> 16:44.610 So be sure that when you're typing you don't make the same mistakes that I do. And it's req.body 208 16:44.620 --> 16:46.380 .password. 209 16:46.380 --> 16:53.400 Now the very last thing that we have to add is a callback which can potentially give us an error or 210 16:53.400 --> 16:57.960 give us the new registered user if everything was fine. 211 16:58.350 --> 17:01.290 And we're going to check to see if there were any errors, 212 17:01.440 --> 17:08.250 then we're going to log those errors. And for the user we're simply going to redirect them back to the 213 17:08.250 --> 17:12.570 same register page so that they can try again. 214 17:12.630 --> 17:18.350 Now if there were no errors though, we're going to authenticate our user using passport. 215 17:18.810 --> 17:26.400 So we're going to write passport.authenticate and the type of authentication that we're performing 216 17:26.580 --> 17:28.140 is local. 217 17:28.140 --> 17:34.560 And then once we've authenticated them, we're going to again open a set of parentheses and we're going 218 17:34.560 --> 17:42.720 to pass in req, res and a callback. And this callback is only triggered if the authentication 219 17:42.810 --> 17:50.070 was successful and we managed to successfully setup a cookie that saved their current logged in session 220 17:50.100 --> 17:53.030 so will you have to check to see if they're logged in or not. 221 17:53.070 --> 18:02.010 So we can assume that if they end up in here then we can safely res.redirect them to the secrets 222 18:02.100 --> 18:04.160 route. 223 18:04.290 --> 18:11.640 Now notice that previously we never had a secrets route because we always relied on res.rendering 224 18:11.640 --> 18:15.670 the secrets page either through register or through login. 225 18:15.960 --> 18:22.290 But in this case because we're authenticating our user and setting up a logged in session for them then 226 18:22.380 --> 18:29.820 even if they just go directly to the secret page, they should automatically be able to view it if they 227 18:29.820 --> 18:32.050 are in fact still logged in. 228 18:32.070 --> 18:35.860 So that's why we need to create our secrets route. 229 18:35.880 --> 18:40.790 So I'm going to do that just below the register route up here and I'm going to say app. 230 18:40.790 --> 18:52.100 get /secrets and we're going to have our req and res and inside this callback is where 231 18:52.100 --> 18:59.330 we're going to check to see if the user is authenticated and this is where we're relying on passport 232 18:59.450 --> 19:03.380 and session and passport-local and passport- 233 19:03.400 --> 19:12.140 -ocal-mongoose to make sure that if a user is already logged in then we should simply render the secrets 234 19:12.140 --> 19:17.300 page. But if they're not logged in then we're going to redirect them to the login page. 235 19:17.840 --> 19:24.470 So here we're going to write if the request is authenticated 236 19:27.730 --> 19:41.210 then in this case we're going to res.render the secrets page. But or else i.e. the user is not authenticated, 237 19:41.350 --> 19:42.810 they're not logged in, 238 19:42.850 --> 19:52.120 then we should redirect them to the logging route and force them to login first before they can view 239 19:52.120 --> 19:53.080 this page. 240 19:53.080 --> 19:59.800 So let's go ahead and save our code and see if our registration section works. 241 19:59.800 --> 20:02.760 Making sure that our servers running without any issue 242 20:02.890 --> 20:09.970 let's go over to localhost:3000 and let's try to register a new user. Let's call this new 243 20:09.970 --> 20:16.220 user user@passportlocalmongoose.com or you can call them whatever it is you like. 244 20:16.330 --> 20:21.020 But I just want to be able to identify them when we try to locate them on our database. 245 20:21.160 --> 20:28.540 So they're going to get a password that is 123456 and I'm going to click register. And now I get 246 20:28.540 --> 20:34.240 taken to the secrets page which means that everything went through successfully. 247 20:34.240 --> 20:41.110 So now if we had ever to Robo 3T and let's view all the documents in our collection you can see we have 248 20:41.230 --> 20:49.510 a brand new document here where the username is user@passportlocalmongoose.com and we've got a salt 249 20:49.780 --> 20:50.740 and a hash. 250 20:51.040 --> 20:58.570 So this is what I meant when I said that the passport-local-mongoose package will salt and hash our 251 20:58.570 --> 21:03.510 password for us automatically without us having to do anything about it. 252 21:03.550 --> 21:11.170 But in addition, when say I navigate a way to, I don't know, the home page and I tried to access the secrets 253 21:11.170 --> 21:18.760 page directly it gets rendered straight away without me needing to login again because I am already 254 21:18.760 --> 21:26.830 authenticated and this is all thanks to the cookie that got my session ID saved and we can even see 255 21:26.830 --> 21:35.140 it if we go into our Chrome settings and we search for cookies, go to content settings, cookies, see all cookies 256 21:35.140 --> 21:42.460 and site data. And if we locate our local host you can see that we've got one cookie that's saved right 257 21:42.460 --> 21:50.380 here and you can see this is the content that gets created by that express-session's package and it saves 258 21:50.380 --> 21:58.320 it inside this cookie called connect.sid and it's set to expire when our browsing session ends. 259 21:58.390 --> 22:06.470 So that means that when I quit Chrome and I open it again and I try to go back to localhost:3000 260 22:06.800 --> 22:14.020 /secrets, you can see that I am now no longer authenticated because that cookie got deleted 261 22:14.020 --> 22:19.200 by my browser because it's set to expire when I close down my browser. 262 22:19.600 --> 22:25.710 So now it's pushing me towards the login page because I am no longer authenticated. 263 22:25.720 --> 22:31.090 So I have to log back in in order to be able to access the privileged areas. 264 22:31.090 --> 22:34.470 Now at the moment we haven't got our login routes set up yet 265 22:34.660 --> 22:36.800 so let's go ahead and do that. 266 22:36.850 --> 22:45.370 So inside the app.post section for our login route, let's go ahead and create a new user. And this 267 22:45.370 --> 22:53.560 is going to be a new user created from our Mongoose model and then this user is going to have its two 268 22:53.560 --> 23:02.180 properties username and password setup. And the user name is going to of course come from the req. 269 23:02.180 --> 23:04.540 .body.username 270 23:07.620 --> 23:12.030 and the password is going to be request.body.password. 271 23:12.170 --> 23:17.340 And this of course comes from the user when they fill in the login form right here. 272 23:17.360 --> 23:27.410 So now that we've created our new user, then we're going to use passport to log in this user and authenticate 273 23:27.410 --> 23:27.930 them. 274 23:28.120 --> 23:33.630 And in order to do that we're going to use a login function that passport gives us 275 23:33.770 --> 23:37.910 and it has to be called on the request object. 276 23:37.910 --> 23:43.730 So it has to be req.login the user that we want to login and then we get a callback to see 277 23:43.730 --> 23:48.560 if there were any errors. But if there were none, then we're going to take the user to where they need 278 23:48.560 --> 23:49.180 to be. 279 23:49.190 --> 23:53.690 So going back to our code we're going to call request.login 280 23:53.870 --> 23:57.760 and remember this method comes from passport. 281 23:58.070 --> 24:05.660 And we have to pass in the new user that comes from the login credentials that the user provided on 282 24:05.660 --> 24:12.800 our login page. And then we have a callback which can potentially return an error if we were unable 283 24:12.800 --> 24:16.640 to find that user with that username in our database. 284 24:16.640 --> 24:22.940 So here is where we're going to check to see if there were any errors. And if there were then we're simply 285 24:22.940 --> 24:25.970 going to log those errors in the console. 286 24:26.120 --> 24:30.950 But if there were no errors then we're going to authenticate our user 287 24:30.980 --> 24:38.210 so it means that they've successfully logged in and we're going to call passport.authenticate and 288 24:38.270 --> 24:41.570 we're going to use the local strategy. 289 24:41.570 --> 24:47.690 And you can see that I'm typing exactly the same code as I've got up here which basically authenticates 290 24:47.780 --> 24:51.980 our user using their password and username. 291 24:52.010 --> 24:57.680 And if we've successfully authenticated them then again we're going to redirect them to the secrets 292 24:57.680 --> 25:03.780 route where we of course check whether if they are indeed authenticated or not. 293 25:03.800 --> 25:10.220 So both when they've successfully registered and when they've successfully logged in using the right 294 25:10.220 --> 25:17.840 credentials, we're going to send a cookie and tell the browser to hold onto that cookie because the cookie 295 25:17.870 --> 25:24.620 has a few pieces of information that tells our server about the user, namely that they are authorized 296 25:24.920 --> 25:29.750 to view any of the pages that require authentication. 297 25:30.080 --> 25:32.060 So let's go ahead and hit save and 298 25:32.420 --> 25:33.740 let's check it out. 299 25:33.770 --> 25:39.950 So we're going to go to the home page and we're going to click on login. So let's find that user that 300 25:39.950 --> 25:41.140 we sign up just now. 301 25:41.150 --> 25:43.600 user@passportlocalmongoose.com 302 25:43.940 --> 25:48.750 and I'm going to put in their password of 123456 and click login. 303 25:48.920 --> 25:52.310 And now I get taken to the secret page. 304 25:52.310 --> 25:54.800 So it's working perfectly. 305 25:54.800 --> 25:59.810 Now there's just one last thing. We haven't yet defined a logout route. 306 25:59.870 --> 26:07.040 And when I click on that button all I get is "Cannot GET /logout" because that button is 307 26:07.040 --> 26:14.630 trying to hit up a route called /logout and currently in our server we don't have that 308 26:14.630 --> 26:15.410 route. 309 26:15.470 --> 26:17.030 So let's go and add it in. 310 26:17.360 --> 26:25.890 Let's add our app.get for the route that is logout and add a callback, a req and a res. 311 26:25.970 --> 26:33.640 And here is where we're going to essentially deauthenticate our user and end that user session. 312 26:33.650 --> 26:35.450 So how do we logout users? 313 26:35.450 --> 26:42.830 Well let's take a look at the documentation. All we have to do is to call req.logout and then 314 26:42.980 --> 26:44.500 that's it. 315 26:44.510 --> 26:46.390 So let's do your req. 316 26:46.400 --> 26:57.770 logout and then we're going to res.redirect them to the home page or the root route so that they 317 26:57.770 --> 27:01.240 go back to the home page once they've logged out. 318 27:01.280 --> 27:08.500 So let's save that and let's go back to our home page and log in our user again. 319 27:08.760 --> 27:12.830 123456 and log in. 320 27:12.830 --> 27:19.520 And now if we click on logout then you can see it takes us right back to our home page. 321 27:19.520 --> 27:25.270 And if we tried to access the secrets page it will force us to log in. 322 27:25.370 --> 27:33.680 Whereas if we are already logged in and we voluntarily say navigate to some website or closed down 323 27:33.680 --> 27:41.690 the tab and try to go back to our localhost:3000/secrets our session is saved and we're still authenticated 324 27:41.960 --> 27:45.730 because of that cookie that we have on our browser. 325 27:45.770 --> 27:53.450 Now remember that when you update the code in your app.js and you hit save that nodemon will 326 27:53.510 --> 27:55.660 restart your server 327 27:55.670 --> 27:56.490 right? 328 27:56.540 --> 28:04.760 And whenever your server gets restarted your cookies gets deleted and your session gets restarted. 329 28:04.760 --> 28:09.860 So now if I try to go to secrets page it redirects me to log in 330 28:09.870 --> 28:16.690 because I'm no longer authenticated. That cookie gets deleted every time we restart the server. 331 28:16.700 --> 28:23.090 So now our website is able to remember when a user is already logged in 332 28:23.270 --> 28:30.080 so that once they log in and they want to be able to access the parts of the website that require authentication 333 28:30.320 --> 28:32.900 they don't have to keep logging back in. 334 28:32.930 --> 28:37.070 It's all saved in our cookie for that particular session. 335 28:37.250 --> 28:44.360 And the content of the cookie has a meaning to our server because it can check against it and know that 336 28:44.360 --> 28:46.920 the current user is already signed in 337 28:47.030 --> 28:55.130 so we don't have to force them to sign in again when they try to access a part of the website that requires 338 28:55.130 --> 28:56.030 authentication. 339 28:56.300 --> 29:02.420 So cookies and sessions and passport are not easy concepts to grasp. 340 29:02.420 --> 29:10.850 So I recommend watching this video a couple of times and also to be sure that you read through the passport, 341 29:11.180 --> 29:18.980 passport-local, the passport-local-mongoose and the express-session documentation. It's through reading 342 29:19.040 --> 29:27.350 all of these very very long tomes essentially that you actually understand how to interact with it and 343 29:27.350 --> 29:28.040 why it is 344 29:28.070 --> 29:29.870 the code looks the way it does.