1 00:00:02,040 --> 00:00:05,080 Now with that connectToDatabase, 2 00:00:05,080 --> 00:00:08,600 we are finally ready to work on storing users. 3 00:00:08,600 --> 00:00:11,580 And for this, since we'll use the MVC pattern, 4 00:00:11,580 --> 00:00:16,129 I'll go to my models folder and add a user.js file in there. 5 00:00:16,129 --> 00:00:21,000 Or we could also name it user.model.js 6 00:00:21,000 --> 00:00:23,740 to be inline with the naming convention I used 7 00:00:23,740 --> 00:00:28,210 on other files where I also described those key files 8 00:00:28,210 --> 00:00:30,550 and what their role is, 9 00:00:30,550 --> 00:00:32,940 but you don't need to add a .model.js, 10 00:00:32,940 --> 00:00:34,960 this is totally optional. 11 00:00:34,960 --> 00:00:38,560 Now here in the user.model.js file, 12 00:00:38,560 --> 00:00:41,690 I'll start by creating a class User. 13 00:00:41,690 --> 00:00:44,480 You'll learn that classes are a JavaScript feature 14 00:00:44,480 --> 00:00:46,630 that allow us to define blueprints 15 00:00:46,630 --> 00:00:49,290 for objects that we wanna create in the future. 16 00:00:49,290 --> 00:00:52,280 And I do wanna create user objects in the future 17 00:00:52,280 --> 00:00:54,950 with the intention of then saving them in the database 18 00:00:54,950 --> 00:00:56,243 or logging them in. 19 00:00:57,720 --> 00:01:01,830 Now in such clauses, you can add constructor methods, 20 00:01:01,830 --> 00:01:05,110 one constructor method per class to be precise, 21 00:01:05,110 --> 00:01:08,310 which is a method that will be called automatically 22 00:01:08,310 --> 00:01:12,070 whenever you create an instance based on that class 23 00:01:12,070 --> 00:01:14,250 with the new keyword. 24 00:01:14,250 --> 00:01:17,530 Then the values you pass between those parentheses here 25 00:01:17,530 --> 00:01:21,250 will be the values received in the constructor function. 26 00:01:21,250 --> 00:01:24,310 And we'll create instances based on the user class 27 00:01:24,310 --> 00:01:26,830 with the new keyword later. 28 00:01:26,830 --> 00:01:28,660 Here we can then use the constructor 29 00:01:28,660 --> 00:01:31,640 to receive some values that we need to initialize, 30 00:01:31,640 --> 00:01:33,990 the to-be-created object. 31 00:01:33,990 --> 00:01:36,318 And for example, here, I wanna get the email 32 00:01:36,318 --> 00:01:39,420 and the password of the to-be-created user. 33 00:01:39,420 --> 00:01:43,370 I wanna get the full name of the user. 34 00:01:43,370 --> 00:01:47,780 I also wanna get the street, the postal code and the city. 35 00:01:47,780 --> 00:01:50,010 These are the different values I wanna get 36 00:01:50,010 --> 00:01:51,803 for every user that's created. 37 00:01:53,220 --> 00:01:58,010 Or to be precise, these values should actually be optional, 38 00:01:58,010 --> 00:02:01,060 but I always wanna have email and password. 39 00:02:01,060 --> 00:02:03,460 And by adding these optional values 40 00:02:03,460 --> 00:02:07,500 at the end of this parameter list here, I make them optional 41 00:02:07,500 --> 00:02:10,060 because in JavaScript, you can call a function 42 00:02:10,060 --> 00:02:12,820 with free parameter values, for example, 43 00:02:12,820 --> 00:02:16,710 with just two values, and then the omitted parameters 44 00:02:16,710 --> 00:02:20,650 will simply receive a default value of undefined. 45 00:02:20,650 --> 00:02:23,230 So you can call a function or method 46 00:02:23,230 --> 00:02:26,623 with less parameter values than it expects. 47 00:02:27,990 --> 00:02:30,940 So that makes those parameters here optional, 48 00:02:30,940 --> 00:02:32,910 because we can simply call the constructor 49 00:02:32,910 --> 00:02:35,840 with just two values instead of those values. 50 00:02:35,840 --> 00:02:39,180 And that gives us the flexibility of creating users 51 00:02:39,180 --> 00:02:41,373 with more or less data. 52 00:02:42,950 --> 00:02:44,490 Now, here, I then wanna store 53 00:02:44,490 --> 00:02:47,030 all the received values like this. 54 00:02:47,030 --> 00:02:49,600 And by using the this keyword here, 55 00:02:49,600 --> 00:02:53,700 we are referring to the to-be-created object. 56 00:02:53,700 --> 00:02:58,250 We add a property, a key named email to it, 57 00:02:58,250 --> 00:03:00,870 and we set the value of that property 58 00:03:00,870 --> 00:03:04,640 to that email we're getting here in the constructor. 59 00:03:04,640 --> 00:03:07,230 And we don't need to have the same names here 60 00:03:07,230 --> 00:03:10,400 on the left and right side of the equal sign. 61 00:03:10,400 --> 00:03:14,300 I just refer to this email here with the email here, 62 00:03:14,300 --> 00:03:17,290 so I'm using the constructor value I'm getting. 63 00:03:17,290 --> 00:03:20,730 This name here is totally up to you, on the other hand. 64 00:03:20,730 --> 00:03:22,980 This could be a totally different name as well, 65 00:03:22,980 --> 00:03:24,780 it doesn't have to be the same name. 66 00:03:25,620 --> 00:03:28,120 But of course I am storing an email address, 67 00:03:28,120 --> 00:03:31,493 so it makes sense to pick email as a name here as well. 68 00:03:33,110 --> 00:03:34,810 And I'll do the same for the password 69 00:03:34,810 --> 00:03:37,130 and store this in a password property 70 00:03:37,130 --> 00:03:39,540 of the to-be-created object. 71 00:03:39,540 --> 00:03:41,790 And I do the same with the name. 72 00:03:41,790 --> 00:03:44,810 Here I store full name in a name property, 73 00:03:44,810 --> 00:03:46,850 and here we also see that we don't need 74 00:03:46,850 --> 00:03:48,923 to have equal property names. 75 00:03:49,940 --> 00:03:52,210 I will also add an address property, 76 00:03:52,210 --> 00:03:55,180 and that should actually be a nested object, 77 00:03:55,180 --> 00:03:56,580 which you can also create 78 00:03:56,580 --> 00:04:01,070 with this object literal notation in JavaScript 79 00:04:01,070 --> 00:04:03,540 with opening and closing curly braces. 80 00:04:03,540 --> 00:04:06,890 That's how you can create an object in JavaScript 81 00:04:06,890 --> 00:04:08,270 an object on the fly, 82 00:04:08,270 --> 00:04:11,620 which is not based on a predefined class. 83 00:04:11,620 --> 00:04:14,800 So that's an alternative to new something, 84 00:04:14,800 --> 00:04:17,490 whatever your class name is, 85 00:04:17,490 --> 00:04:19,329 you can use curly braces like this 86 00:04:19,329 --> 00:04:20,959 to create an object on the fly, 87 00:04:20,959 --> 00:04:23,680 which is not based on any blueprint. 88 00:04:23,680 --> 00:04:26,780 And here, I just create this object on the fly 89 00:04:26,780 --> 00:04:29,790 to group all the address data together. 90 00:04:29,790 --> 00:04:31,710 So I'll add a street field here, 91 00:04:31,710 --> 00:04:34,270 which stores the street value. 92 00:04:34,270 --> 00:04:37,513 And here, this property name is up to you. 93 00:04:38,500 --> 00:04:40,740 This property name here on the apprehend 94 00:04:40,740 --> 00:04:43,840 refers to this parameter value here. 95 00:04:43,840 --> 00:04:46,670 Parameters in the end are like variables 96 00:04:46,670 --> 00:04:48,990 inside of the function where you use them. 97 00:04:48,990 --> 00:04:51,143 So here we need to have equal names. 98 00:04:52,270 --> 00:04:54,550 This name on the apprehend doesn't have to be equal 99 00:04:54,550 --> 00:04:55,683 as I just mentioned. 100 00:04:56,840 --> 00:04:59,780 And then I also store to postal code. 101 00:04:59,780 --> 00:05:03,910 Here you see that the names don't have to be equal. 102 00:05:03,910 --> 00:05:05,033 And the city. 103 00:05:06,180 --> 00:05:08,530 So with that, I'm storing all the user data, 104 00:05:08,530 --> 00:05:11,320 but of course I'm not storing it in the database with that. 105 00:05:11,320 --> 00:05:14,920 I'm just storing it into to-be-created user object, 106 00:05:14,920 --> 00:05:17,793 which is created based on this user class. 107 00:05:19,400 --> 00:05:22,440 But this will be a first step. 108 00:05:22,440 --> 00:05:26,600 Because with that added, we can add a function, 109 00:05:26,600 --> 00:05:29,870 a method to this user class, 110 00:05:29,870 --> 00:05:32,017 which could be called signup. 111 00:05:33,185 --> 00:05:35,020 And the idea of this method is 112 00:05:35,020 --> 00:05:39,040 that it does actually store that user data in the database. 113 00:05:39,040 --> 00:05:41,910 So that it takes the properties of the object 114 00:05:41,910 --> 00:05:43,550 on which this method is called 115 00:05:43,550 --> 00:05:47,160 and stores the values stored in those properties 116 00:05:47,160 --> 00:05:48,253 in the database. 117 00:05:49,760 --> 00:05:53,390 Now for this, we wanna use our database helper file, 118 00:05:53,390 --> 00:05:55,580 we worked on in the last lectures. 119 00:05:55,580 --> 00:05:58,763 The file where we get access to the connected database. 120 00:05:59,900 --> 00:06:02,770 For this, I will import it with require. 121 00:06:02,770 --> 00:06:04,840 And since I'm in the models folder, 122 00:06:04,840 --> 00:06:09,400 and I want this database.js file in the data folder, 123 00:06:09,400 --> 00:06:13,900 I have to go up one level first with ./ 124 00:06:13,900 --> 00:06:17,050 so that I'm now in the main project folder. 125 00:06:17,050 --> 00:06:18,960 And then go into the data folder 126 00:06:18,960 --> 00:06:22,050 and then access the database file in there. 127 00:06:22,050 --> 00:06:26,900 And this gives me access to the exported object here 128 00:06:26,900 --> 00:06:29,080 in this database.js file. 129 00:06:29,080 --> 00:06:32,483 So that I can use it into user.model.js file now. 130 00:06:35,410 --> 00:06:40,410 This db thing here can now be used in the signup method here 131 00:06:41,000 --> 00:06:43,990 and there, I now wanna call getDb 132 00:06:43,990 --> 00:06:46,670 to get hold of that connected database. 133 00:06:46,670 --> 00:06:49,510 And then access a specific collection in there. 134 00:06:49,510 --> 00:06:52,650 Because remember when working with MongoDB, 135 00:06:52,650 --> 00:06:55,040 you have collections in a database. 136 00:06:55,040 --> 00:06:57,520 Collections of documents. 137 00:06:57,520 --> 00:07:01,520 Collections are basically like tables in a MySQL 138 00:07:01,520 --> 00:07:03,680 or in SQL database in general, 139 00:07:03,680 --> 00:07:05,950 but they have no fixed schema. 140 00:07:05,950 --> 00:07:09,883 They have no fixed data types. They are more flexible. 141 00:07:10,920 --> 00:07:13,220 Now you pass the name of the collection 142 00:07:13,220 --> 00:07:14,750 to this collection method. 143 00:07:14,750 --> 00:07:17,670 And the name is up to you, just as with the database, 144 00:07:17,670 --> 00:07:21,060 it will be created on the fly if it doesn't exist yet. 145 00:07:21,060 --> 00:07:22,870 And I'll choose users here, 146 00:07:22,870 --> 00:07:24,820 which sounds like a fitting collection name 147 00:07:24,820 --> 00:07:26,513 for storing user data. 148 00:07:28,210 --> 00:07:30,060 And now to insert a new user, 149 00:07:30,060 --> 00:07:32,730 which is what I wanna do when a user signs up, 150 00:07:32,730 --> 00:07:34,173 we can call insertOne. 151 00:07:35,600 --> 00:07:38,593 That's how we can insert one new document. 152 00:07:39,650 --> 00:07:42,550 Then a document here in JavaScript 153 00:07:42,550 --> 00:07:46,200 with the MongoDB package is just a JavaScript object. 154 00:07:46,200 --> 00:07:49,030 So we can pass an object to insertOne. 155 00:07:49,030 --> 00:07:52,010 And here I am, again, creating one on the fly 156 00:07:52,010 --> 00:07:54,220 and that will then be stored as a document 157 00:07:54,220 --> 00:07:56,053 in the MongoDB database. 158 00:07:57,560 --> 00:07:59,650 Now it's up to you, which data you wanna store. 159 00:07:59,650 --> 00:08:01,500 But in the end here, I wanna store the email, 160 00:08:01,500 --> 00:08:03,630 which is this.email. 161 00:08:03,630 --> 00:08:08,630 I wanna store the password, which is this.password, maybe? 162 00:08:10,340 --> 00:08:11,663 We'll come back to that. 163 00:08:13,520 --> 00:08:16,980 I wanna store the name, which is this.name. 164 00:08:16,980 --> 00:08:20,973 And I wanna store the address, which is this.address. 165 00:08:24,040 --> 00:08:26,450 So I basically wanna store all the data 166 00:08:26,450 --> 00:08:29,093 that I collected and set in my constructor, 167 00:08:30,320 --> 00:08:34,360 but there is one exception or one special thing about that. 168 00:08:34,360 --> 00:08:37,020 And that's related to the password. 169 00:08:37,020 --> 00:08:41,140 Whenever you're storing passwords in a database, 170 00:08:41,140 --> 00:08:44,010 you don't wanna store them as plain text. 171 00:08:44,010 --> 00:08:45,840 That's what you learned in this course. 172 00:08:45,840 --> 00:08:48,270 And that is super important. 173 00:08:48,270 --> 00:08:52,840 It's a security issue to store passwords as plain text, 174 00:08:52,840 --> 00:08:56,540 because if your database ever gets compromised 175 00:08:56,540 --> 00:09:00,410 by an intruder or an unhappy employee, 176 00:09:00,410 --> 00:09:03,080 the attacker will be able to read 177 00:09:03,080 --> 00:09:06,260 all your user passwords in plain text. 178 00:09:06,260 --> 00:09:09,410 And since users tend to use the same password 179 00:09:09,410 --> 00:09:11,080 for different services 180 00:09:11,080 --> 00:09:13,320 and an attacker would now have to email 181 00:09:13,320 --> 00:09:15,810 and password combinations of your users, 182 00:09:15,810 --> 00:09:19,680 he or she could use these email/password combinations 183 00:09:19,680 --> 00:09:22,710 to access user data on totally different sites, 184 00:09:22,710 --> 00:09:25,033 at least to try to get access. 185 00:09:26,110 --> 00:09:29,870 And therefore you don't wanna store passwords in plain text. 186 00:09:29,870 --> 00:09:33,460 Instead, we wanna use a technique that is called hashing, 187 00:09:33,460 --> 00:09:35,500 which means the password is converted 188 00:09:35,500 --> 00:09:40,500 into a randomly looking string, which actually isn't random, 189 00:09:40,880 --> 00:09:43,300 but which can't be decrypted back 190 00:09:43,300 --> 00:09:45,690 to the original password. 191 00:09:45,690 --> 00:09:47,210 Instead, we have that hash 192 00:09:47,210 --> 00:09:50,590 and we can just verify whether a future password 193 00:09:50,590 --> 00:09:51,930 matches that hash, 194 00:09:51,930 --> 00:09:55,770 but we can't decrypt to hash back to a password. 195 00:09:55,770 --> 00:09:59,133 And that's a good protection mechanism for passwords. 196 00:10:00,225 --> 00:10:03,690 Now, creating those hashes manually is cumbersome, 197 00:10:03,690 --> 00:10:07,540 that's why I will install a third-party package again. 198 00:10:07,540 --> 00:10:10,313 And that's the bcryptjs package here. 199 00:10:11,470 --> 00:10:14,560 That is a package that will help us with encrypting 200 00:10:14,560 --> 00:10:17,120 or with hashing passwords. 201 00:10:17,120 --> 00:10:19,620 And once it is installed, 202 00:10:19,620 --> 00:10:22,560 we can restart the development server. 203 00:10:22,560 --> 00:10:25,710 We can import this package here 204 00:10:25,710 --> 00:10:30,523 in this user model file by requiring bcryptjs. 205 00:10:33,330 --> 00:10:35,840 And actually it is considered a good convention 206 00:10:35,840 --> 00:10:40,250 to have a built in or third-party package imports first, 207 00:10:40,250 --> 00:10:42,490 and then your own imports thereafter. 208 00:10:42,490 --> 00:10:45,880 It's not technically required, but a good practice. 209 00:10:45,880 --> 00:10:49,240 And with that imported here in signup, 210 00:10:49,240 --> 00:10:51,880 instead of just storing the password like this, 211 00:10:51,880 --> 00:10:56,880 I now just call bcrypt.hash, and then pass my password, 212 00:10:58,900 --> 00:11:02,200 this.password as a first parameter value. 213 00:11:02,200 --> 00:11:06,280 And then the number of salting rounds, as it's called, 214 00:11:06,280 --> 00:11:08,480 which basically just controls how strong 215 00:11:08,480 --> 00:11:13,180 the hashing algorithm is as a second parameter value. 216 00:11:13,180 --> 00:11:15,380 And I'll use 12 here, which is considered 217 00:11:15,380 --> 00:11:20,380 a sufficiently strong number of salting rounds. 218 00:11:20,530 --> 00:11:22,720 So that should give us a strong hash, 219 00:11:22,720 --> 00:11:27,113 which can't be a decrypted back to the original password. 220 00:11:28,810 --> 00:11:31,400 Now hash actually can take a bit longer, 221 00:11:31,400 --> 00:11:33,900 hence it's an async operation 222 00:11:33,900 --> 00:11:36,430 just as insertOne is by the way, 223 00:11:36,430 --> 00:11:38,530 this is also an async operation. 224 00:11:38,530 --> 00:11:42,610 And therefore these operations return promises, 225 00:11:42,610 --> 00:11:45,520 which we could handle with then and catch, 226 00:11:45,520 --> 00:11:49,500 or we turn sign up into an async function. 227 00:11:49,500 --> 00:11:51,830 Therefore to sign up method itself 228 00:11:51,830 --> 00:11:54,240 will all the return a promise, 229 00:11:54,240 --> 00:11:57,430 and we can then await this hashing here 230 00:11:57,430 --> 00:12:00,450 and just store the final value in a constant 231 00:12:00,450 --> 00:12:02,660 or variable as we always do. 232 00:12:02,660 --> 00:12:06,393 In this case, the hashed password like this. 233 00:12:07,370 --> 00:12:11,570 And then we also await inserting this data. 234 00:12:11,570 --> 00:12:13,960 And here, instead of this.password, 235 00:12:13,960 --> 00:12:16,303 we now use the hashed password. 236 00:12:18,660 --> 00:12:21,350 Now insertOne will return a result, 237 00:12:21,350 --> 00:12:23,480 which we could store and use, 238 00:12:23,480 --> 00:12:25,860 but here I'm not too interested in it. 239 00:12:25,860 --> 00:12:28,970 Therefore I will actually not store it. 240 00:12:28,970 --> 00:12:33,520 And instead, just await this and after this, we'll be done. 241 00:12:33,520 --> 00:12:35,870 So this method execution will only finish 242 00:12:35,870 --> 00:12:38,240 once this insertOne step finishes. 243 00:12:38,240 --> 00:12:39,640 And that's what I want here. 244 00:12:40,480 --> 00:12:43,863 And this should allow us to store users in a database. 245 00:12:45,010 --> 00:12:47,990 Therefore with all that work done in this model, 246 00:12:47,990 --> 00:12:50,080 in this user model here, 247 00:12:50,080 --> 00:12:53,970 we can now make that model available outset of this file 248 00:12:53,970 --> 00:12:56,420 with module exports. 249 00:12:56,420 --> 00:13:00,210 And here I'll then just export this user class as a whole. 250 00:13:00,210 --> 00:13:04,520 So I don't export an object with multiple combined things, 251 00:13:04,520 --> 00:13:07,370 I just export the user class here like this 252 00:13:07,370 --> 00:13:09,453 in this user.model.js file. 253 00:13:10,300 --> 00:13:14,320 And then you auth controller, we can now use that. 254 00:13:14,320 --> 00:13:18,090 Here we can import user by requiring, 255 00:13:18,090 --> 00:13:22,120 going up one level models, user.model. 256 00:13:22,120 --> 00:13:25,313 So we are requiring that model we just export it. 257 00:13:26,770 --> 00:13:28,840 And now in this signup function, 258 00:13:28,840 --> 00:13:31,890 which will be triggered once to sign up form is submitted. 259 00:13:31,890 --> 00:13:36,290 We now can use this user model to create a new user 260 00:13:36,290 --> 00:13:39,630 based on this blueprint with the new keyword. 261 00:13:39,630 --> 00:13:42,410 That's how you use classes in JavaScript 262 00:13:42,410 --> 00:13:44,170 to use the class blueprint, 263 00:13:44,170 --> 00:13:47,730 to create a concrete instance of that blueprint. 264 00:13:47,730 --> 00:13:50,973 So to create a new object based on that blueprint, 265 00:13:51,920 --> 00:13:54,810 and we could then store the newly created object 266 00:13:54,810 --> 00:13:56,523 in a constant name user. 267 00:13:58,090 --> 00:14:02,190 Now to user here, we can pass various values 268 00:14:02,190 --> 00:14:06,643 because our constructor function accepts various values. 269 00:14:07,620 --> 00:14:10,500 And here I wanna pass in all those values, 270 00:14:10,500 --> 00:14:13,050 but for that, we need to be able to extract 271 00:14:13,050 --> 00:14:15,853 those values from the incoming request. 272 00:14:16,840 --> 00:14:21,840 And that can be done by express with the proper middleware. 273 00:14:22,480 --> 00:14:24,570 We haven't added that middleware yet. 274 00:14:24,570 --> 00:14:27,650 And therefore we have to do this in app.js. 275 00:14:27,650 --> 00:14:30,350 In app.js because I wanna try to extract 276 00:14:30,350 --> 00:14:32,270 any attached request data 277 00:14:32,270 --> 00:14:35,200 for all incoming requests. 278 00:14:35,200 --> 00:14:40,200 And therefore here, maybe after handling static of files, 279 00:14:40,780 --> 00:14:42,690 we can use app.use, 280 00:14:42,690 --> 00:14:46,900 and then use the express.urlencoded middleware. 281 00:14:46,900 --> 00:14:48,710 This is a function you have to call 282 00:14:48,710 --> 00:14:51,300 because that function then actually yields 283 00:14:51,300 --> 00:14:53,160 the actual middleware. 284 00:14:53,160 --> 00:14:55,860 And this is a function because we can pass an object 285 00:14:55,860 --> 00:14:57,650 with configuration to it. 286 00:14:57,650 --> 00:15:00,720 And there, in this object, you can set extended, 287 00:15:00,720 --> 00:15:03,650 and it is quite common to set this to false, 288 00:15:03,650 --> 00:15:07,763 to only support a regular form submission so to say. 289 00:15:09,000 --> 00:15:13,260 So now with that, we are handling data, that's coming in 290 00:15:13,260 --> 00:15:16,860 attached to requests, and specifically we're handling data 291 00:15:16,860 --> 00:15:19,853 that's coming in because of forms being submitted. 292 00:15:21,500 --> 00:15:24,760 Now we can go back to our controller, 293 00:15:24,760 --> 00:15:27,960 to the auth controller. 294 00:15:27,960 --> 00:15:30,120 And in there, on this req object, 295 00:15:30,120 --> 00:15:32,820 we now have access to req.body. 296 00:15:32,820 --> 00:15:34,830 And then with the dot notation, 297 00:15:34,830 --> 00:15:38,610 we can access all the fields we defined in our form. 298 00:15:38,610 --> 00:15:41,620 So if we have a number, look at our signup.ejs file, 299 00:15:41,620 --> 00:15:46,180 where we have this form, then there it's these name values 300 00:15:46,180 --> 00:15:50,293 that we can now access as keys on the request body. 301 00:15:51,480 --> 00:15:55,790 So email, confirm email, password, full name, 302 00:15:55,790 --> 00:15:59,503 street, postal, and city. 303 00:16:01,890 --> 00:16:04,600 So therefore going back to the auth controller, 304 00:16:04,600 --> 00:16:09,020 here for the email, we can access request.body.email, 305 00:16:09,020 --> 00:16:11,993 for the password we can use req.body.password. 306 00:16:13,460 --> 00:16:16,789 Then for the full name, it's req.body.fullname, 307 00:16:16,789 --> 00:16:18,940 that was the name of the form. 308 00:16:18,940 --> 00:16:23,870 And then for the street, we have req.body.street. 309 00:16:23,870 --> 00:16:26,970 Thereafter for postal is req.body.postal. 310 00:16:26,970 --> 00:16:30,293 And then for a city it's req.body.city. 311 00:16:31,410 --> 00:16:33,380 Now I'll press the auto format shortcuts 312 00:16:33,380 --> 00:16:34,213 to make this more readable, 313 00:16:34,213 --> 00:16:37,810 and that now creates a new user with all that data. 314 00:16:37,810 --> 00:16:39,263 Thanks to our blueprint. 315 00:16:41,960 --> 00:16:46,360 Now on that user, we can now call the signUp method, 316 00:16:46,360 --> 00:16:49,990 which we defined to store that user in that database, 317 00:16:49,990 --> 00:16:53,083 because that's what this signUp method does in the end. 318 00:16:54,220 --> 00:16:56,690 Now this signUp method returns a promise 319 00:16:56,690 --> 00:16:58,560 because it's an async method. 320 00:16:58,560 --> 00:17:00,570 And therefore we wanna await this 321 00:17:00,570 --> 00:17:02,953 before we sent back our response. 322 00:17:03,960 --> 00:17:07,430 So here I will also add async 323 00:17:07,430 --> 00:17:11,569 in front of this signup function here in my controller file 324 00:17:11,569 --> 00:17:15,063 so that we can now await this signup method call here. 325 00:17:16,700 --> 00:17:19,880 And then we know that once we make it into the next line, 326 00:17:19,880 --> 00:17:22,640 we'll be done with creating that user. 327 00:17:22,640 --> 00:17:26,970 And therefore here, I then wanna send back a response 328 00:17:26,970 --> 00:17:29,700 and it will actually redirect here. 329 00:17:29,700 --> 00:17:32,520 For controller functions that are triggered 330 00:17:32,520 --> 00:17:34,690 upon incoming post requests, 331 00:17:34,690 --> 00:17:37,190 it is pretty standard to redirect 332 00:17:37,190 --> 00:17:40,270 instead of rendering a template as a response, 333 00:17:40,270 --> 00:17:42,500 because if you would render a template, 334 00:17:42,500 --> 00:17:45,800 if the user presses the refresh button of the browser, 335 00:17:45,800 --> 00:17:49,743 you get this pop-up wherever you wanna send post data again. 336 00:17:50,640 --> 00:17:53,020 Now with a redirect, you instead redirect 337 00:17:53,020 --> 00:17:56,140 to a totally different route, and you wanna do that 338 00:17:56,140 --> 00:17:58,620 after handling the submitted data successfully. 339 00:17:58,620 --> 00:18:01,990 So that the user can't accidentally resubmit 340 00:18:01,990 --> 00:18:04,231 the post route data. 341 00:18:04,231 --> 00:18:05,680 Therefore here, I wanna redirect, 342 00:18:05,680 --> 00:18:09,493 and I wanna redirect to /login here. 343 00:18:10,990 --> 00:18:13,070 We don't support this yet. 344 00:18:13,070 --> 00:18:15,150 I'll add some logic for this in a second, 345 00:18:15,150 --> 00:18:18,010 but this will send the user to the login page 346 00:18:18,010 --> 00:18:20,310 after a user was created. 347 00:18:20,310 --> 00:18:23,210 And that makes sense, because once a user was created 348 00:18:23,210 --> 00:18:25,790 as a next step, we wanna allow the user 349 00:18:25,790 --> 00:18:28,623 to now log in with that created user. 350 00:18:30,090 --> 00:18:32,780 So now, to be able to test this, 351 00:18:32,780 --> 00:18:37,780 I will quickly go back to signup.ejs, 352 00:18:37,920 --> 00:18:40,253 copy the entire markup in there, 353 00:18:41,520 --> 00:18:43,953 and paste that into login.ejs. 354 00:18:44,890 --> 00:18:47,840 And in there, I just want to 355 00:18:47,840 --> 00:18:50,163 change the h1 text to Login. 356 00:18:51,723 --> 00:18:55,310 And then the form I'll get rid of the confirm email 357 00:18:55,310 --> 00:18:57,220 label input combination. 358 00:18:57,220 --> 00:18:59,340 And then have the horizontal line 359 00:18:59,340 --> 00:19:01,690 and all the inputs thereafter 360 00:19:01,690 --> 00:19:04,800 because for logging in, we don't need any of that. 361 00:19:04,800 --> 00:19:06,873 We just need email and password for that. 362 00:19:09,060 --> 00:19:12,550 On the button, I then also wanna say log in. 363 00:19:12,550 --> 00:19:16,073 And on this link down there, I wanna redirect to /signup, 364 00:19:17,520 --> 00:19:21,323 and say Create a new user, 365 00:19:22,700 --> 00:19:23,533 like that. 366 00:19:25,360 --> 00:19:28,180 So that's now my login.ejs file. 367 00:19:28,180 --> 00:19:31,990 And I quickly created that, so that in the auth controller, 368 00:19:31,990 --> 00:19:36,990 in getLogin, we can now res.render this template 369 00:19:37,520 --> 00:19:41,400 so that redirecting to /login will succeed later. 370 00:19:41,400 --> 00:19:46,400 And I wanna res.render customer/auth/signup, 371 00:19:47,310 --> 00:19:48,720 or at least I'd copied that. 372 00:19:48,720 --> 00:19:51,510 But then I wanna render a customer/auth/login 373 00:19:51,510 --> 00:19:53,883 to render this login.ejs view. 374 00:19:55,360 --> 00:19:58,610 Now with that, we should be able to sign up. 375 00:19:58,610 --> 00:20:00,980 This is not the finished code, there is more we can do, 376 00:20:00,980 --> 00:20:03,630 but we should be able to create new users. 377 00:20:03,630 --> 00:20:06,490 And we'll then refine this process thereafter. 378 00:20:06,490 --> 00:20:10,010 But first of all, let's test whether that works. 379 00:20:10,010 --> 00:20:13,000 Let's go back and reload this form, 380 00:20:13,000 --> 00:20:17,810 and let's enter some details here, a email address. 381 00:20:17,810 --> 00:20:18,720 And for the moment, 382 00:20:18,720 --> 00:20:20,910 you can have different email addresses here, 383 00:20:20,910 --> 00:20:23,700 because we don't have any validation on this server 384 00:20:23,700 --> 00:20:24,533 at the moment. 385 00:20:25,900 --> 00:20:29,940 So then a password then a name here, 386 00:20:29,940 --> 00:20:34,500 and I'll pick my name and then some street, 387 00:20:34,500 --> 00:20:38,280 some postal code, which has to be five characters long, 388 00:20:38,280 --> 00:20:40,820 thanks to the front end validation we added, 389 00:20:40,820 --> 00:20:43,673 so thanks to these HTML attributes we added. 390 00:20:46,560 --> 00:20:48,230 And then a city. 391 00:20:48,230 --> 00:20:50,850 If I now create account, 392 00:20:50,850 --> 00:20:53,200 I'm redirected to login. 393 00:20:53,200 --> 00:20:55,690 I also don't have an error here in the console. 394 00:20:55,690 --> 00:20:59,020 So the server didn't crash, so that's looking good. 395 00:20:59,020 --> 00:21:03,150 And if I now connect to my database with the MongoDB shell, 396 00:21:03,150 --> 00:21:08,150 I can use this online shop database to which I'm connecting 397 00:21:09,230 --> 00:21:13,170 and then run db.users.find 398 00:21:13,170 --> 00:21:16,070 to find all the users and the users collection. 399 00:21:16,070 --> 00:21:18,103 And I find one user here. 400 00:21:19,020 --> 00:21:21,060 Now it might be a bit differently formatted for you, 401 00:21:21,060 --> 00:21:22,980 but I find one user here. 402 00:21:22,980 --> 00:21:26,360 And if I scan over that, I can see that all the data 403 00:21:26,360 --> 00:21:29,750 for that user is there and that the password is also hashed. 404 00:21:29,750 --> 00:21:32,170 It's this unreadable string. 405 00:21:32,170 --> 00:21:33,430 And that's good. 406 00:21:33,430 --> 00:21:35,340 With that, we created this user. 407 00:21:35,340 --> 00:21:37,310 We're able to store users. 408 00:21:37,310 --> 00:21:40,470 Now, we still got some improvements to make 409 00:21:40,470 --> 00:21:42,883 about this signup process though.