WEBVTT 0 00:00.650 --> 00:01.030 All right. 1 00:01.050 --> 00:07.120 So in the last lesson we have setup all of our starting files for our very simple website. 2 00:07.230 --> 00:13.710 And the next step is the setup account creation for users to allow them to register and login so that 3 00:13.710 --> 00:18.480 they can finally view our secrets page of our website. 4 00:18.510 --> 00:22.730 And in order to do this we're going to be using Level 1 security, 5 00:22.740 --> 00:28.130 so the lowest level possible of security for our website. 6 00:28.440 --> 00:35.100 And this is simply just going to be creating an account for the user, storing their email and password 7 00:35.550 --> 00:42.120 in our database so that when they come back at a later date we can check their email against their password 8 00:42.420 --> 00:45.390 and see if we should let them pass or not. 9 00:45.390 --> 00:51.480 So in order to create a user account and store these pieces of data then we're going to have to create 10 00:51.900 --> 00:54.150 a user database. 11 00:54.180 --> 00:59.260 So we're going to do that using our good old friend Mongoose and MongoDB. 12 00:59.280 --> 01:06.360 So let's go ahead and stop our server and use npm to install mongoose. 13 01:06.660 --> 01:08.910 And as always we're going to need to require it 14 01:08.910 --> 01:13.700 so Mongoose equals require Mongoose. 15 01:13.770 --> 01:21.930 So now that we've required mongoose, it's time to put it into action and we're going to use it to connect 16 01:22.260 --> 01:23.910 to our MongoDB. 17 01:23.970 --> 01:32.070 So to do that we say mongoose.connect and then we specify the URL where our MongoDB database 18 01:32.160 --> 01:36.900 is located which as always is going to be our localhost. 19 01:36.900 --> 01:47.280 So we're going to specify mongoDB://localhost:27017 which is the 20 01:47.340 --> 01:49.400 default port for MongoDB. 21 01:50.220 --> 01:55.380 And then we're going to have a forward slash and the name of our database which we're going to call 22 01:55.440 --> 01:56.780 userDB. 23 01:56.940 --> 02:04.320 And finally we're just going to add in that flag which is code useNewUrlParser 24 02:04.530 --> 02:09.180 and this will remove that little warning that we get in the console. 25 02:09.180 --> 02:13.170 So that's all we need to connect to our MongoDB. 26 02:13.170 --> 02:22.600 So let's try and run our app with nodemon app.js in the secrets folder and we get a error. 27 02:22.680 --> 02:28.220 And it tells us that there's a Mongo network error and it failed to connect to the server. 28 02:28.260 --> 02:32.310 Well the reason is because we haven't started up our MongoDB server yet. 29 02:32.880 --> 02:40.740 So if we want to do that we have to type the mongod command and now we're listening on 27017. 30 02:40.860 --> 02:50.760 So if we control + C and rerun our command then it should now be all good and we no longer have this problem. 31 02:50.850 --> 02:52.700 So everything's all looking great. 32 02:52.710 --> 02:55.680 Our server started on port 3000. 33 02:55.690 --> 03:04.410 Now all we have to do is set up our new user database. And to do that we're going to create a schema first. 34 03:04.410 --> 03:12.090 sSo we're going to create a userSchema and our userSchema is going to be a very simple Javascript object 35 03:12.270 --> 03:14.820 that only has two fields. 36 03:15.360 --> 03:18.650 So it's going to have a email which is gonna be a string 37 03:18.860 --> 03:24.280 and it's also going to have a password which is also going to be a string. 38 03:24.540 --> 03:30.790 And now we can use our userSchema to set up a new user model. 39 03:30.810 --> 03:35.400 So it's going to be a new mongoose.model 40 03:35.730 --> 03:41.610 and then we have to specify the name of our collection which is also going to be User in the singular 41 03:41.610 --> 03:43.820 form with a capital U 42 03:44.100 --> 03:48.210 and it's going to be created using that userSchema that we made just there. 43 03:48.570 --> 03:55.160 So now we can start creating users and adding it to this userDB. 44 03:55.560 --> 04:02.700 So the point at which we want to create our users is of course when the user goes to the register page 45 04:03.420 --> 04:11.730 and they've typed in their email and their password and they've decided to hit the submit button, then 46 04:11.880 --> 04:16.690 this form makes a post request to our register route. 47 04:16.800 --> 04:21.160 So in order to catch that we're going to create our register route right here. 48 04:21.340 --> 04:28.170 So we're going to write app.post and we're going to target the register route. And then we can add 49 04:28.170 --> 04:31.990 in our callback with that req and res 50 04:32.220 --> 04:37.250 and then inside the callback is where we're going to create our brand new user. 51 04:37.290 --> 04:42.080 So we're going to create the user using the information that they passed over from here. 52 04:42.210 --> 04:48.720 So you can see that these two inputs, one has a type of email and the other one has a type of password 53 04:48.960 --> 04:56.530 but the most important thing to grab that data from the body of the post request is to know their names. 54 04:56.550 --> 05:00.220 So one is called username and one is called Password. 55 05:00.260 --> 05:05.100 Let's go ahead and create a brand new user we'll call them a newUser. 56 05:05.510 --> 05:10.130 And this is going to be created using that user model here. 57 05:10.130 --> 05:18.710 So newUser open up a set of parentheses and then some curly braces and we're going to specify the values 58 05:18.710 --> 05:19.790 for the two fields. 59 05:19.790 --> 05:25.730 So one is called email and the other one is called password and let's just check to make sure that we've 60 05:25.730 --> 05:26.520 got it right, 61 05:26.570 --> 05:33.330 email and password. And the email is gonna be set to req.body.username 62 05:33.350 --> 05:39.230 so catching whatever it is that they typed into this input and then we're going to set the password 63 05:39.290 --> 05:46.750 to req.body.password which will be equal to whatever they typed in over here. 64 05:46.760 --> 05:51.690 So now we're ready to go ahead and save this new user. 65 05:51.770 --> 05:57.810 So we're gonna say newUser.save, not saver but save. 66 05:58.320 --> 06:06.150 And then we're going to add a callback into the save function to check to see that during the save process 67 06:06.690 --> 06:12.590 if there were any errors and if there were some errors then we're going to log those errors. 68 06:13.080 --> 06:19.630 But if there weren't any errors then we're going to res.render the secrets page. 69 06:19.920 --> 06:25.530 So this is really important. At the moment on our website 70 06:25.590 --> 06:33.240 we're able to handle get requests to the root route, the login route and the register route. 71 06:33.450 --> 06:41.490 But notice that there isn't a app.get for the /secret route because we don't want to render 72 06:41.490 --> 06:46.890 that unless the user is registered or logged in. 73 06:46.890 --> 06:52.150 So we're only rendering the secrets page from the register and login routes 74 06:52.170 --> 07:00.130 for now. So now that we've set up our website if the user has been successfully created in our database 75 07:00.400 --> 07:03.340 then they should be able to see the secrets page. 76 07:03.340 --> 07:07.610 And this is currently the only way they can view the secrets page. 77 07:07.660 --> 07:11.320 So let's go ahead and save our code and check it out. 78 07:11.650 --> 07:18.680 So our server is still running on port 3000 and if we go over to our localhost:3000 79 07:19.000 --> 07:23.050 then you can see we've got our home page and we haven't set up the login screen yet. 80 07:23.050 --> 07:27.600 So let's go over to register and let's go ahead and create an email. 81 07:27.670 --> 07:31.690 Now at this stage it doesn't really matter what your email address is. 82 07:31.690 --> 07:35.440 You can call it 1@2.com if you wish. 83 07:35.440 --> 07:41.050 The only thing that that email checks in terms of validation is that there is an ad sign in there and 84 07:41.060 --> 07:45.010 there's a dot something that comes afterwards. 85 07:45.040 --> 07:52.150 So I'm just gonna use 1@2.com or test@email.com just to test it for now. And then we're 86 07:52.150 --> 07:55.190 gonna add a password and I'm just gonna put 123. 87 07:55.210 --> 07:56.940 We also don't have any validation there 88 07:57.050 --> 07:59.830 so it doesn't really matter how many digits I put in there. 89 08:00.130 --> 08:02.920 And this is really good for testing right now 90 08:02.920 --> 08:09.040 otherwise you're gonna be entering a 12 digit password every time you test your forms which is not what 91 08:09.040 --> 08:10.480 we want. 92 08:10.480 --> 08:19.660 So now let's go ahead and click register. And you can see it now renders the secret page and it's showing 93 08:19.720 --> 08:24.060 my deepest darkest secrets which is not much of a secret over here. 94 08:24.250 --> 08:32.260 So this page is only accessible once you have registered and we can verify this by going over to our 95 08:32.260 --> 08:37.780 Robo 3T and connecting to our MongoDB on our local host. 96 08:37.960 --> 08:38.950 And you can see 97 08:39.010 --> 08:39.610 check it out 98 08:39.610 --> 08:47.590 we've got our userDB over here. And in our collections there's a collection of users which only has 99 08:47.650 --> 08:54.750 one document at the moment which has an email of 1@2.com with a password of 123. 100 08:54.760 --> 09:02.200 So at the moment the user can register but they can't log in because we haven't created a app.post 101 09:02.290 --> 09:04.240 for our login route. 102 09:04.330 --> 09:10.210 So when they go onto the login page they enter their email and the password that they remembered from 103 09:10.270 --> 09:12.190 previously when they created the account 104 09:12.820 --> 09:16.090 and then it makes a post request to the login route. 105 09:16.090 --> 09:18.700 So let's go ahead and handle that right now. 106 09:18.700 --> 09:21.070 So underneath the app.post for register 107 09:21.070 --> 09:25.990 we're going to create an app.post for the /login route. 108 09:25.990 --> 09:33.040 And here is where we're going to try and check in our database to see if we actually have a user with 109 09:33.040 --> 09:34.910 the credentials that they put in. 110 09:35.020 --> 09:41.760 So those credentials are going to be a username which is going to be the req.body.username 111 09:42.790 --> 09:50.020 and also a password which is in request.body.password. 112 09:51.010 --> 09:57.520 So now we have these two things that the user entered and we have to check them against our database. 113 09:58.000 --> 10:05.680 So we're going to look through our database and see that for the username with this value if their 114 10:05.680 --> 10:08.980 password is equal to the one that the user typed in. 115 10:08.980 --> 10:16.540 So to do this we're going to say user, so look through are collection of users, and we're going to find 116 10:16.600 --> 10:24.420 one where the email field is matching with our username field. 117 10:24.670 --> 10:30.490 So remember the username field comes from the user who's trying to log in and the email field is the 118 10:30.490 --> 10:37.450 one in our database that's got the saved data. And then we're gonna have a callback with a error and 119 10:37.450 --> 10:44.040 potentially a found user and we can check to see if there were any errors 120 10:44.050 --> 10:46.920 firstly then we're going to handle that error, 121 10:46.930 --> 10:54.130 we're going to log it. But if there weren't any errors then we're going to check to see if there was 122 10:54.220 --> 10:56.350 a found user. 123 10:56.350 --> 11:00.580 So does that user with that email exist? 124 11:00.730 --> 11:09.730 And if there was a user on our database with that email then we should check to see if that user that 125 11:09.730 --> 11:19.630 we found has a password which matches the password that the user typed in on the login page. 126 11:19.690 --> 11:25.560 So if the foundUser.password is equal to the password created here. 127 11:26.980 --> 11:31.350 And if that is the case then that means not only do we have a user with that email, 128 11:31.360 --> 11:38.560 so the user exists and they registered before, but also the password they typed in in the form is equal 129 11:38.560 --> 11:45.520 to the one in our database which means that they are the correct user. They've successfully logged in 130 11:45.880 --> 11:49.230 and our server has successfully authenticated them. 131 11:49.240 --> 11:55.720 So in this case we should also res.render the page that we're trying to access which is the one 132 11:55.750 --> 11:57.100 called secrets. 133 11:57.160 --> 12:05.170 So now let's close everything off and we should when we save our app.js check if our server still running 134 12:05.410 --> 12:09.750 and then go ahead and go back to our home page. 135 12:09.760 --> 12:16.120 Let's go ahead and try and login with the email and password that I registered previously which was 136 12:16.150 --> 12:17.340 1@2.com. 137 12:17.410 --> 12:18.310 and 123. 138 12:19.150 --> 12:26.860 So let's try it 1@2.com and 123, hit login and it's now revealed the secret page. 139 12:27.130 --> 12:32.840 So success right? Now there's just one problem. 140 12:33.130 --> 12:42.130 If we look at our users collection and we look at the documents in there, there's only one at the moment 141 12:42.550 --> 12:47.960 but we can see the user's password in plain text. 142 12:48.010 --> 12:57.910 And this is really really bad because if I had millions of users say I was, I don't know, Amazon or Facebook 143 12:57.910 --> 13:05.980 or Google and I had all of my users passwords saved in plain text like this 144 13:05.980 --> 13:13.340 then any one of my employees can look through my database and know what everybody's password is. 145 13:13.360 --> 13:18.580 So that means if I had an employee who wanted to know what was, I don't know, 146 13:18.610 --> 13:21.730 Britney Spears is password on Facebook 147 13:21.790 --> 13:25.640 then they could just look at it and they could use it to log in 148 13:25.660 --> 13:26.370 right? 149 13:26.470 --> 13:35.020 But also it means that if a hacker decided to hack into my server and locate my database then this is 150 13:35.230 --> 13:37.590 a pretty big loot for them 151 13:37.630 --> 13:46.390 if everybody's password was stored in plain text. And most people will reuse their passwords and if you 152 13:46.390 --> 13:52.630 use the same password on lots of websites then once the hacker knows your email and password for one 153 13:52.630 --> 13:59.860 site then they can pretty much login as you across all of the websites including things such as your 154 13:59.860 --> 14:03.970 bank account or Paypal which is definitely not what you want. 155 14:03.970 --> 14:07.570 So firstly, don't reuse passwords. 156 14:07.570 --> 14:15.010 Try and make different passwords especially for the accounts which are tied to a payment portal. But 157 14:15.010 --> 14:21.010 the second thing is if you're going to make a website, don't store your users passwords in plain text 158 14:21.010 --> 14:21.640 like this. 159 14:21.640 --> 14:24.490 It's really really bad. 160 14:24.490 --> 14:34.570 So now that we've seen what level 1 authentication looks like, it's time to level up and do right by 161 14:34.570 --> 14:38.600 our users and increase the security of our website. 162 14:38.620 --> 14:42.520 So for all of that and more, I'll see you on the next lesson.