Node.js & Express From Scratch [Part 9] - User Registration

Key Takeaways

hey what's up guys welcome back this is part nine of our node.js and express beginner application or uh what I what I call it from scratch and we're going to start getting into stuff that's a little more complicated I kind of feel bad now about calling this a beginner tutorial I mean the first few videos were but now we're starting to get into um some more advanced stuff but I did want to kind of continue the series um I'm guessing there'll be maybe two or three more videos uh maybe if you guys want it to keep going enough if enough people want to then I then I'll do that but I want to get it to the point where we have authentication we can log in we can create posts we can edit only our own posts um things like that so we're going to be using passport which is uh right here a simple unobtrusive authentication for no JS and it's extremely flexible uh and there's a lot of different strategies that you can use we're going to be using What's called the local strategy meaning that we're going to be storing our username and password inside of a database inside mongodb but you can also use for instance uh a Facebook strategy so you can use your Facebook login Twitter um you you can use um web tokens so for instance when we did the mean stack front to back series we used JWT we used uh uh Json web tokens so that we could make a request to the to the API and then return uh an access key and we did authentication that way but since we're keeping everything on the server this time everything is you know in our node app um we're not going to be using web tokens or anything we're going to just use a local strategy so hopefully that makes sense uh I did I did do a three video series uh a little over probably a year and a half ago um called node.js login system or something like that and we did this this uh local strategy but I didn't do it how I should have I mean it's it worked and it it's fine but there's there's better ways to do it for instance I didn't include a passport config file I just stuck everything right inside the route and we don't want to do that we want to set a configuration file that has all of our uh passport stuff inside of it all right we just want to clean it up a little bit from what I did in that series and that's what happens you know time goes by and you just you learn more and you learn uh a better way to do things so hopefully we can do that in this in this uh this last couple videos all right so enough talking let's go ahead and get started so this is the passport website and the documentation I mean it's okay as far as the code examples that they give us but it's kind of meshed together actually it's not meshed together it's the opposite it's spread apart so for instance some of the code is under this Au authenticate and then some's going to be under here and then under user profile and it's just it's a little hard to follow at least in my opinion but what we're going to be doing is using a local uh local strategy so to do that we're going to install passport the core module as well as passport local and if we look down here basically we're going to create a strategy and it's going to first of all look for a user by username that whatever they type in the form the login form and if it finds a user or I'm sorry if it doesn't find a user it's going to return with false here which means that there was no user found uh and then if there is a user it'll it'll bypass this and it'll go to check the password and if the password doesn't match it's going to return done with false and then it's if it does match it'll go on and it'll return done with the actual user so that's how it tells if it if um if the login is correct or not in a nutshell so what we're going to do is install a couple modules now in addition to passport we're going to use something called bcrypt which is used to Hash passwords and then uh they're it's used to match the hash to whatever the user um types in to log in um and we're going to use bpjs not just regular bcrypt and the reason for that is because it's much lighter it's it's it's a JavaScript only implementation and there's no weird dependencies uh whenever I use just regular bcrypt I always have these strange things uh strange dependencies that we need and errors and it's just a headache so let's go ahead and install those things so we're going to do npm install Das - saave passport uh passport-local and then bcrypt JS all right so we'll get those three modules installed and let's see if we go over here it should now be in node modules let's see uh bcrypt JS all right so let's uh I'm trying to think of where to start here I mean I have the code in front of me but it's a little I I don't want it to be too confusing so let's start with creating a model okay just like we have with our articles our users need a model to uh to to map out the uh the schema and so on so let's do that let's create a new file and we'll call it user.js and let's see we're going to bring in mongus and then we're going to create our schema so let's say user schema and we're going to create a a variable called user schema okay same thing we did with the Articles Mongoose do schema actually that should be a capital S okay and then we want to throw in here some curly braces and we're going to have a name field and this is going to have a a type of string and let's also make this required true all right and then let's see we'll just copy this let's paste this in three more times so in addition to the name we're going to have an email also a string a username and a password all right and then we're going to create a variable called user and set it to module. exort because we want we want to be able to access this model from outside of this file obviously so let's set this to mongus do model and then in here we'll pass in the model name which is user and then the user schema all right and then let's save that now for the registration we shouldn't really have to do anything with passport because all we're doing is adding a user okay pretty much just like we did with the Articles okay when we go to add articles we submit a form why isn't this running oh I don't have server running so we just submit a form and it goes to a function and or a route and we go ahead and submit it so we're going to do the same thing for the registration so let's go to routes and we're we're going to create a new file here just like we do with articles okay from now on whatever you add to this application pretty much whatever resource you add you're going to have a route uh a route file and you're going to have a model okay as long as it's it's interacting with data so this is going to be users. JS plural and let's see we're going to do pretty much what we did here let's go ahead and just copy this and we bring in Express in the router and then we're going to bring in the user model so this will be models sluser all right and then let's see what we want we want a register route to a get requ a get request to the register route or the register URL so that we can load a form okay so let's do let's just put a comment here we'll just say uh register form so we since we're using a a routed file here we're going to say R.G get instead of app.get and it's going to be to/ users SL register we don't want to include the slash users here because we're going to Route everything that goes to users to this file all right and then this is going to have a function with a request and response and all we're going to do here is res. render and we're going to render a view called register so let's save that and then let's go to our appjs file and go down let's see go way down here to where we have our articles routes and we're going to do the same thing with users so let's set users to routes SL users and then just like we did here we're going to Route anything that goes to users to that file all right and save so now what we'll do is create the register view so let's go into views and say new file register. pug and just to test this out let's just say register and then if we go to users slash register see what happens here uh strings not Define what is this models uh oh this should actually be a capital S for string let's try that and let's see we got another error uh oh I didn't export the model yes I did I didn't export the route that's what I didn't this file here the routes SL users needs to have module. exports equals uh equals router all right now hopefully it works okay let's go over here and reload and I don't see register and that's probably because we're using Jade so we wouldn't see it let's go back to that page and let's copy what we have in uh let's see add article cuz it's going to be a similar form I'm just going to grab everything here and I don't I don't know why but I forgot we're using pug so this isn't going to work it's going to look at this as a a tag as a register tag so let's just paste that in I'm not going to use a dynamic title we'll just say register and then this is going to go to users register but it's going to be a post request and obviously we'll have to handle that on the other side and then for the label let's say name and that should be name as well so we'll have name we'll have email and we'll have um username this should actually be an input though and give it a type so type text and then let's just copy this and we're going to need two more I don't know why it indents like that I can't stand that just got to bring this back so these fields are going to be the password so let's change this to password and change this and the type and then this is going to be the confirm p password because we want to check it just to make sure that they know what they're actually putting in so that will be uh for the name let's call it password 2 all right we'll save that let's go back to userregister and now we have a registration form all right so we know that this is going to post to users register so let's go back to our users routes and let's create we'll say register process and we'll do router. poost and it's just going to be SL register remember we don't need to put the users and then function with a request and response and then we're going to use validation just like we did with articles so let's say const name equals we'll set that to request. body. name okay we want to grab all the fields so we'll have name email username password and password two okay so we'll grab those and put them in variables then we're going to need the check bodies cuz we're using Express validator so let's say check body name and then the message whoops will just be name is required okay and then we're going to set the rule to not empty so let's copy this two three four five and this is going to be email okay and we're going to set that to not empty and then we want another email and this one is going to be to check the actual email address make sure it's valid so we'll say email is not valid and the rule for that is going to be is email okay and then after that we're going to have the username and that's going to be required and then we're going to have password and that's going to be required and then we want to match the password to password two so the way that we do that actually that should be a lowercase p and then this is going to be password 2 and the message is going to be passwords do not match and then the rule for that is going to be equals and then it takes a parameter of the field that you actually want to match which is going to be request. body do password to um password all right so that should do it for that now we want to get the errors if there are any so let's say let errors equals request. validation errors and then we want to check for them this will be an if else so we'll say if there are errors then what do we want to do we just want to render the template right so res. render register and we want to pass along the errors as well okay and then if everything goes okay and the the validation passes we're going to submit a new user so let's create a variable called new user and actually let's let's um let's use a let for that so let new user equals new user remember we brought the model in so we can do this and then we want to pass in the field so name which will be equal to the name variable above and email and password okay so there's our object where saying new user now before we uh submit this before we actually call new user. saave we need to Hash the password and we brought in bcrypt up here right no we didn't so we do need to bring that in so let's say uh bcrypt and that's going to bcrypt equals require and make sure in here you put bcrypt Js and then down here right after where we create the new user we're going to say bcrypt and it has a function called gen salt and that's going to generate the the salt and we're going to say it's going to be 10 characters and then we have a call back and that's going to actually give us the salt so we'll have an error if there is one and then the salt all right and then we want to call another function which is going to be bcrypt Doh which does just that it'll hash the password so it's going to take in the actual password which is going to be a we'll be able to access from new user. password okay so whatever is typed in the form is going to be put here the password and then we're actually going to run it through this hash and it's going to give us that back okay now we have to pass in the salt and then we'll have a call back okay okay and that will take error and the hash and we just want to check for that error and um let's see you can handle this how you want I'm just going to console.log and then let's set new user. password okay instead of it having having it be the plain text which it is at this point we're going to set it to the hash okay hopefully you understand what just happened so uh we we submit the password plain text it's still plain text here then we generate the salt then we call the hash pass in the salt along with the plain text password gives us a hash back and we set new password um new user. password to Hash all right now we're ready to call the save method so we can say new user. save all right and that's going to take call back and an error if there is one we'll check for that error and let's see we'll just console.log and we'll return there and then we just want to do else you guys can handle errors however you want if you want to do it a little more elegantly then you can do that but um if it passes we're going to send out a flash message and we're going to say let's see this is going to be a success message and we're going to say you are uh now registered and can log in okay and then we'll just redirect and we're going to redirect to the login page which we didn't create yet but we will user SL login all right let's save that now just so this actually functions how we want it to and and actually redirects and shows the message let's just create the login route so we'll go to our users actually we're already in the users route but we'll go under the register which is right here and then we'll just say router. get and this is going to be to login that's not right function and let's see request response and all we're going to do is render the login template all right so let's go to views and say new file uh login. pug and let's copy what's in the register. Pug okay and then we'll paste that in and we're just going to let's change this and then we only want the username and password so we're going to get rid of these get rid of this and it's going to post to users SL login all right so at least now we have the view so if we go to users SL login that works good so now let's try the the registration username I'll just say Brad password I'm doing 1 2 3 4 56 but it should get hashed submit uh name is required passwords do not match let's see let's go to our registration template so input uh name equals password name equals password to name equals username so those look good let's go to our route now where we're submitting it to and for some reason it's not check body username password what the hell name is required oh this should be lowercase and then let's see why isn't that one working maybe my password's really didn't match let's save that and we'll try this again one 2 3 4 5 six submit passwords do not match password two should be the name of right here password two sometimes I wish I live stream these things so you guys could point out my stupid errors cuz you guys I'm sure most you know some of the times you guys already see what the hell's wrong uh password two is the name password to and equals require all this three s's Jesus and uh this should also this should be gen salt I don't know why I put get salt uh because it generates assault we pass it in here and uh this should actually be error ER r r it's been a long day and I did the same thing here okay whatever whatever's here if that said error then this should be error but it should match and I think that's that should be good let's try it out so uh let's see I'm just going to refresh this page submit cannot get user login why oh user it should be users uh let's see right here should be users SL login all right last time hopefully you are now register oh so you know what I think I just I think I just submitted it twice but that's fine at least we know it works um well we don't know yet let's take a look at the database so I'm going to just open up the standard Windows command line so I can go to the shell uh I want to run this as administrator and let's go into mongodb SL bin and let's say use we named it node KB and let's do db. users do find yeah see it went in twice so I'm going to I'm just going to delete one of these so we'll say U db. users. remove and we want to match underscore ID and we want to match it to one of these object IDs so I'm just going to contrl C copy that put that in there and now we should only have one good and look at the password it's a long uh very secure hash so we now have full registration on in our application uh now last thing I want to do in this video is just put a register link over here so let's go to layout and uh sorry about that what I'm going to do is just let's go right here and let's create another UL so it'll be nav nav Das navbar and then navbar navbar dasr list item and Link okay this is going to go to slash users slash register all right we might as well put the login link as well all right let's reload and that's wrong for some reason you uh now bar the hell oh this is backwards it should be Navar dnav wow I'm making a lot of mistakes in this video guys hopefully hopefully I haven't lost you all right so register we have that login doesn't work yet but we'll get to that in the next video so I'm going to stop it here it's getting late it's been a very long day and I will uh continue this in the morning and I'll try to get the the uh login video out as well all right thanks for watching guys and I will see you then