1 00:00:00,420 --> 00:00:06,810 Welcome back in this lesson we're going to pick up where we left off with the auth code along not code 2 00:00:06,810 --> 00:00:07,740 alone. 3 00:00:07,960 --> 00:00:09,000 You never code alone. 4 00:00:09,060 --> 00:00:10,000 You have me here. 5 00:00:10,230 --> 00:00:12,520 So code along part 3. 6 00:00:12,690 --> 00:00:15,040 Now we get to the meat of authentication. 7 00:00:15,090 --> 00:00:20,430 We're going to start by adding these sign up routes register routes and the register form and making 8 00:00:20,430 --> 00:00:24,440 sure that by the end of this video we should be able to sign up for our application. 9 00:00:24,480 --> 00:00:25,740 We won't be able to sign out. 10 00:00:25,890 --> 00:00:28,400 We won't be able to log in but we'll be able to sign up. 11 00:00:28,740 --> 00:00:29,490 OK. 12 00:00:30,000 --> 00:00:31,160 So let's get started. 13 00:00:31,170 --> 00:00:34,480 The first thing we need to discuss are the routes that we need to add. 14 00:00:34,530 --> 00:00:39,060 And before I do that I'm just going to add a little divider here because we do have a lot of content 15 00:00:39,060 --> 00:00:46,250 up top that just says routes I'll make this with a little equal signs. 16 00:00:46,500 --> 00:00:49,790 Just to make it clear that all routes go below this line. 17 00:00:49,800 --> 00:00:50,560 OK. 18 00:00:50,910 --> 00:00:54,620 So we have our get slash and we have the secret route. 19 00:00:55,050 --> 00:01:00,630 Now down here let's add in our Auth. routes to review the routes that we need. 20 00:01:00,780 --> 00:01:05,940 I'm actually going to go to the working version of this stunning home page and then when you click on 21 00:01:05,940 --> 00:01:11,700 register notice that the URL is slash register and we see a form. 22 00:01:11,820 --> 00:01:17,640 So we have a get route slash register that will show us the form to actually sign up and then if we 23 00:01:17,640 --> 00:01:25,360 inspect this form you'll see that it's sending a post request to slash register post slash register 24 00:01:25,370 --> 00:01:25,890 . 25 00:01:25,980 --> 00:01:28,100 We don't have to call it slash register. 26 00:01:28,110 --> 00:01:31,330 You'll see things like sign up or registration. 27 00:01:31,380 --> 00:01:35,530 It can be whatever you want but register is good for us. 28 00:01:35,670 --> 00:01:36,830 So we'll go back to our apt. 29 00:01:36,850 --> 00:01:37,390 Yes. 30 00:01:37,500 --> 00:01:43,570 And we need to add those two routes in and I'll start with an app don't get slash register. 31 00:01:43,650 --> 00:01:47,550 And again the point of this is just to show the form. 32 00:01:47,550 --> 00:01:50,530 So show sign up form. 33 00:01:51,040 --> 00:01:51,590 OK. 34 00:01:51,720 --> 00:01:59,700 So apt get slash register and then our callback in here request and response just like that and we'll 35 00:01:59,700 --> 00:02:07,200 do redstart render and we'll call her template register and then the next logical thing to do would 36 00:02:07,200 --> 00:02:09,400 be to create the register form. 37 00:02:09,540 --> 00:02:13,480 So we'll do a touch views slash register. 38 00:02:13,620 --> 00:02:22,740 E.J. Yes and then we'll open the same file and inside of here we'll start with a simple let's just say 39 00:02:22,740 --> 00:02:28,010 sign up form and save and let's make sure we can see that. 40 00:02:28,260 --> 00:02:32,660 So start the server then we'll go to our app here. 41 00:02:33,180 --> 00:02:35,330 Go back to the root path to start. 42 00:02:35,580 --> 00:02:40,800 And now let's go to slash register and get sign up for him. 43 00:02:40,800 --> 00:02:41,610 Great. 44 00:02:41,610 --> 00:02:47,930 Now let's add in a forum and our form needs to have two inputs one for username one for password. 45 00:02:48,090 --> 00:02:53,070 So we'll start by defining a form and we'll come back and add the method in action. 46 00:02:53,100 --> 00:02:54,760 We'll start with an input. 47 00:02:55,140 --> 00:03:01,200 Both are typed text although we can make the password input type equals password which is actually a 48 00:03:01,200 --> 00:03:02,310 better idea. 49 00:03:02,310 --> 00:03:12,510 So input type goes text placeholder equals user name just like that and then I'll just duplicate that 50 00:03:13,200 --> 00:03:21,040 and I'll do input type because password and placeholder will be password and save. 51 00:03:21,360 --> 00:03:28,380 And then let's add in a submit and we can either do input type equals submit or. 52 00:03:28,840 --> 00:03:29,280 Or. 53 00:03:29,340 --> 00:03:31,200 I prefer a button tag. 54 00:03:31,710 --> 00:03:34,820 Either one will work as long as the button is at the end of the form. 55 00:03:34,860 --> 00:03:36,580 It will automatically submit the form. 56 00:03:36,870 --> 00:03:37,140 OK. 57 00:03:37,140 --> 00:03:42,990 So submit and then we have our input type because text input type goes password and we can start by 58 00:03:42,990 --> 00:03:48,300 just taking a look at this and we see our form but we're missing two crucial things. 59 00:03:48,300 --> 00:03:53,940 First of all the form doesn't go anywhere and even if it did submit somewhere it wouldn't send either 60 00:03:53,940 --> 00:03:57,360 of these items because we don't have the name attributes. 61 00:03:57,450 --> 00:04:09,000 So we need to add name equals the user name and name equals password just like that and we'll save. 62 00:04:09,000 --> 00:04:14,590 Now if we take a look at the form nothing should look different but it's now almost set up. 63 00:04:14,760 --> 00:04:17,410 Now we need to add in the information for the form tag. 64 00:04:17,540 --> 00:04:20,380 Or we have action and method. 65 00:04:20,400 --> 00:04:24,720 So the action it's going to be cash register also. 66 00:04:24,900 --> 00:04:29,430 But we're going to send it as a post request and we don't have that route yet. 67 00:04:29,640 --> 00:04:34,830 So if I went and filled out the form right now if I refresh and filled the form out it would just hang 68 00:04:34,950 --> 00:04:40,380 and then eventually time out because we don't have a post-road slash register and this can be called 69 00:04:40,440 --> 00:04:46,710 anything of course but it's conventional to name it the same thing as the get route slash register. 70 00:04:46,770 --> 00:04:54,750 So let's do the same thing and this route would actually be responsible for handling users sign up and 71 00:04:54,750 --> 00:05:02,820 we'll do an app post slash register function request response. 72 00:05:02,820 --> 00:05:06,000 And in here we'll add all the logic to start. 73 00:05:06,000 --> 00:05:07,980 We'll just do a nice rest and 74 00:05:11,000 --> 00:05:14,930 register post-trib just to make sure that it's connected OK. 75 00:05:15,120 --> 00:05:23,000 And if we restart the server and go back refresh the page fill out some random data and hit submit. 76 00:05:23,060 --> 00:05:25,500 We should see registered post-draft. 77 00:05:25,660 --> 00:05:26,380 There we go. 78 00:05:26,510 --> 00:05:29,120 So that means that our form is submitting to the right place. 79 00:05:29,120 --> 00:05:35,300 We're hitting this now we get to the fun part which is where we actually handle the user sign up about 80 00:05:35,310 --> 00:05:38,320 10 new lines that you haven't seen most of. 81 00:05:38,880 --> 00:05:43,550 So I'll start by writing up the syntax and then I'll pause and go over every line and what it does. 82 00:05:43,620 --> 00:05:48,590 And the first thing we actually need to do which is a review is we need to add in-body parser and configure 83 00:05:48,590 --> 00:05:51,210 it because we're taking data from a form. 84 00:05:51,200 --> 00:05:55,990 This form is sending data in the body and we want to be able to say request up body. 85 00:05:56,020 --> 00:05:59,090 Use your name for Quest up Vadi password. 86 00:05:59,250 --> 00:06:01,170 Right now those will be empty. 87 00:06:01,520 --> 00:06:12,830 So up top we just need to do an app that use body bursar dot you URL encoded and then we add in that 88 00:06:12,890 --> 00:06:15,240 extended true. 89 00:06:15,770 --> 00:06:18,970 And that's another one those lines that you just get used to typing. 90 00:06:19,190 --> 00:06:23,660 We need at any time we're going to be using a form and posting data to a request. 91 00:06:24,020 --> 00:06:25,890 OK so that's done now. 92 00:06:26,250 --> 00:06:31,800 So we should be able to get request up body to that username and password which will contain the username 93 00:06:31,790 --> 00:06:35,750 and password from the form that the user is trying to sign up with. 94 00:06:35,750 --> 00:06:39,770 So now we're back to the logic and I'm going to type a few lines that I mentioned and then explain them 95 00:06:39,770 --> 00:06:40,630 afterwards. 96 00:06:40,940 --> 00:06:47,970 So user don't register and then instead of user dot register we're going to pass in New user and into 97 00:06:47,960 --> 00:06:48,810 New User. 98 00:06:48,900 --> 00:06:56,190 We're going to pass in user name is equal to request up Oddy that user name but we don't add password 99 00:06:56,270 --> 00:06:57,560 into this new user. 100 00:06:57,620 --> 00:07:05,340 We're actually going to add it after we create the new user request up body password comma and then 101 00:07:05,330 --> 00:07:11,440 we're going to add a callback function ever and then user and then we'll open that up. 102 00:07:12,160 --> 00:07:12,850 OK. 103 00:07:13,230 --> 00:07:15,140 So let's talk about what we've done so far. 104 00:07:15,140 --> 00:07:20,820 We make a new user object that isn't actually safe to the database yet it's a new user and we only pass 105 00:07:20,810 --> 00:07:21,860 in username. 106 00:07:22,310 --> 00:07:26,170 And the reason that we do that is that we don't actually save the password to the database. 107 00:07:26,190 --> 00:07:27,570 That's not really a good idea. 108 00:07:27,920 --> 00:07:29,990 And I'll show you what we actually save instead. 109 00:07:30,000 --> 00:07:33,510 Once we get something in a database but it's not the password. 110 00:07:33,500 --> 00:07:39,890 So what we do is we pass the password as a second argument to user dot register and use your dot register 111 00:07:39,890 --> 00:07:40,010 . 112 00:07:40,010 --> 00:07:45,770 We'll take this new user that has a username and then we will hash that password which basically means 113 00:07:45,770 --> 00:07:50,290 that it turns it into this huge string of numbers and letters and it stores that in the database. 114 00:07:50,510 --> 00:07:55,730 So he passes the user object that we want to create and then we pass the password separately. 115 00:07:56,220 --> 00:08:01,330 And then if everything goes well it will return a new user that has everything inside of it. 116 00:08:01,400 --> 00:08:05,120 It has user name and then it has the hashed password as well. 117 00:08:05,120 --> 00:08:06,220 So let's see if that works. 118 00:08:06,320 --> 00:08:14,120 And instead of here we'll add our simple if error and we'll do a console log error and then we'll also 119 00:08:14,120 --> 00:08:22,340 do a red dot render the form again just like that. 120 00:08:22,560 --> 00:08:31,080 And if there isn't an error then we have another line to do which is Passport dot authenticate local 121 00:08:31,080 --> 00:08:31,350 . 122 00:08:31,470 --> 00:08:33,730 And again I'll explain this afterwards. 123 00:08:34,150 --> 00:08:42,360 Request response function and instead of here we're going to redirect to the secret page. 124 00:08:42,360 --> 00:08:47,720 So this will happen once the user has been created and there's not an error if there is an error. 125 00:08:47,730 --> 00:08:51,280 We're going to render that register page and that's where we have a return right here. 126 00:08:51,290 --> 00:08:52,950 It will just short circuit everything. 127 00:08:53,220 --> 00:08:57,780 And if there's not an error we're going to run passport authenticate. 128 00:08:57,890 --> 00:09:03,500 So this line here passport authenticate will actually vog the user in who will take care of everything 129 00:09:03,500 --> 00:09:04,410 in the session. 130 00:09:04,470 --> 00:09:06,140 It will store the correct information. 131 00:09:06,140 --> 00:09:10,510 It will run the serialized user method that we specified here. 132 00:09:11,000 --> 00:09:14,600 And then we're specifying that we want to use the local strategy. 133 00:09:15,090 --> 00:09:20,510 And in the future if we wanted to use another strategy and we had it installed we could change that 134 00:09:20,510 --> 00:09:22,050 to be Twitter or Facebook. 135 00:09:22,080 --> 00:09:23,570 And there are other things you need to do. 136 00:09:23,580 --> 00:09:27,860 We have to sign up and get credentials on Twitter and Facebook and we have to register our apps. 137 00:09:27,950 --> 00:09:29,170 So it's more complicated. 138 00:09:29,370 --> 00:09:34,310 But as far as logic and passport is concerned we can just swap things in and out and there are some 139 00:09:34,320 --> 00:09:36,120 small tweaks that we do need to make. 140 00:09:36,200 --> 00:09:40,970 But generally passport makes it really easy for us to swap out different strategies. 141 00:09:41,150 --> 00:09:42,730 So we're going to use local. 142 00:09:43,160 --> 00:09:46,380 And this again is just going to actually log the user in. 143 00:09:46,830 --> 00:09:54,060 And once the user has been logged in we're going to redirect to the secret stash secret and that's just 144 00:09:54,060 --> 00:09:54,920 a personal choice. 145 00:09:54,920 --> 00:10:00,390 We could go back to the home page the route but the slash secret is what we're all here for. 146 00:10:00,500 --> 00:10:06,800 So once we sign up once we register we should be then taken to slash secret unless there's a problem 147 00:10:07,740 --> 00:10:10,950 and then we'll go back to the registration form. 148 00:10:11,000 --> 00:10:15,110 So let's test this out make sure we don't have any syntax errors. 149 00:10:15,120 --> 00:10:16,380 Looks good. 150 00:10:16,400 --> 00:10:20,920 Now let's go to our app and refresh the page and let's Sign-Up. 151 00:10:21,260 --> 00:10:30,720 So I'm going to create an account as Colt and my password will just be password and no hit submit and 152 00:10:30,710 --> 00:10:35,220 we get to the secret page which is good news but to really make sure that it worked. 153 00:10:35,370 --> 00:10:41,770 Let's stop the server and let's actually open up Mongo and I'm going to connect to my database so I'll 154 00:10:41,780 --> 00:10:46,130 do show Digby's and the database is Auth. demo app. 155 00:10:46,430 --> 00:10:54,060 So I'm going to use that and then I'm going to look at the collections show collections and then we're 156 00:10:54,060 --> 00:11:05,810 going to D.B that users find all DB users and you can see I mean we make this a little bit bigger. 157 00:11:05,900 --> 00:11:11,580 We have a single user from when I just signed up and there's a lot of information in here. 158 00:11:11,630 --> 00:11:15,690 Well there's really not a lot there's only a few pieces but it looks like a lot. 159 00:11:15,710 --> 00:11:18,300 Most importantly we have a user name right here. 160 00:11:18,360 --> 00:11:19,480 Your name Colts. 161 00:11:19,640 --> 00:11:23,410 That's the one piece that we specified that looks normal to us. 162 00:11:23,750 --> 00:11:30,780 And then there are these things salt and hash and I talk a lot more about these in the authentication 163 00:11:30,770 --> 00:11:32,040 from scratch unit. 164 00:11:32,250 --> 00:11:37,260 So we're not going to go into much detail all that I'll mention about it for now is that notice our 165 00:11:37,250 --> 00:11:42,250 raw password the word password in my case isn't stored in the database at all. 166 00:11:42,360 --> 00:11:44,790 What we're storing is this crazy hashed version. 167 00:11:44,960 --> 00:11:49,150 And then this other thing called salt that will help us hash this. 168 00:11:49,320 --> 00:11:54,980 And by helping us I mean that it's all taken care of by the passport local manglers package that we 169 00:11:54,990 --> 00:11:59,610 installed and reconfigured as a plug in which we did right here. 170 00:11:59,660 --> 00:12:05,010 So that takes care of everything from the hashing to the salting to storing things in the database. 171 00:12:05,100 --> 00:12:12,170 All that we had to do was this simple line or resize this again user dot register and we pass in a new 172 00:12:12,170 --> 00:12:14,570 user with a user name. 173 00:12:14,580 --> 00:12:16,030 And then it takes care of everything else. 174 00:12:16,050 --> 00:12:20,250 We give it the password from the form but we never save it to the user. 175 00:12:20,370 --> 00:12:24,540 Instead it handles everything and it never saves a password at all. 176 00:12:24,600 --> 00:12:26,790 It's actually saving the hash version. 177 00:12:27,240 --> 00:12:27,890 OK. 178 00:12:28,520 --> 00:12:30,590 So let's get out of Mongo now. 179 00:12:31,320 --> 00:12:37,500 And we now have registration working the very last thing that we could do is open up the index page 180 00:12:37,670 --> 00:12:40,840 or the home page I mean recit that render home. 181 00:12:40,860 --> 00:12:49,050 So let's do C9 views sosh home and we'll just add in a link so we'll add an ally here and this link 182 00:12:49,050 --> 00:12:51,060 should go to the register page. 183 00:12:51,060 --> 00:12:59,640 So it will be an anchored tag with a trip equal to a cash register and we'll just add Sign-Up inside 184 00:12:59,630 --> 00:13:01,060 the text. 185 00:13:01,080 --> 00:13:06,160 So now if we start the server let's clear all this away node. 186 00:13:06,250 --> 00:13:11,880 Yes and the visitor app and go to the homepage. 187 00:13:11,880 --> 00:13:15,970 We now have a sign up link where we can go to sign up. 188 00:13:16,110 --> 00:13:16,590 Great. 189 00:13:16,670 --> 00:13:19,920 So we covered everything I want to cover in this video in the next video. 190 00:13:19,940 --> 00:13:21,700 We'll work on the log in functionality.