Welcome back in this lesson we're going to pick up where we left off with the auth code along not code
alone.
You never code alone.
You have me here.
So code along part 3.
Now we get to the meat of authentication.
We're going to start by adding these sign up routes register routes and the register form and making
sure that by the end of this video we should be able to sign up for our application.
We won't be able to sign out.
We won't be able to log in but we'll be able to sign up.
OK.
So let's get started.
The first thing we need to discuss are the routes that we need to add.
And before I do that I'm just going to add a little divider here because we do have a lot of content
up top that just says routes I'll make this with a little equal signs.
Just to make it clear that all routes go below this line.
OK.
So we have our get slash and we have the secret route.
Now down here let's add in our Auth. routes to review the routes that we need.
I'm actually going to go to the working version of this stunning home page and then when you click on
register notice that the URL is slash register and we see a form.
So we have a get route slash register that will show us the form to actually sign up and then if we
inspect this form you'll see that it's sending a post request to slash register post slash register
.
We don't have to call it slash register.
You'll see things like sign up or registration.
It can be whatever you want but register is good for us.
So we'll go back to our apt.
Yes.
And we need to add those two routes in and I'll start with an app don't get slash register.
And again the point of this is just to show the form.
So show sign up form.
OK.
So apt get slash register and then our callback in here request and response just like that and we'll
do redstart render and we'll call her template register and then the next logical thing to do would
be to create the register form.
So we'll do a touch views slash register.
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
sign up form and save and let's make sure we can see that.
So start the server then we'll go to our app here.
Go back to the root path to start.
And now let's go to slash register and get sign up for him.
Great.
Now let's add in a forum and our form needs to have two inputs one for username one for password.
So we'll start by defining a form and we'll come back and add the method in action.
We'll start with an input.
Both are typed text although we can make the password input type equals password which is actually a
better idea.
So input type goes text placeholder equals user name just like that and then I'll just duplicate that
and I'll do input type because password and placeholder will be password and save.
And then let's add in a submit and we can either do input type equals submit or.
Or.
I prefer a button tag.
Either one will work as long as the button is at the end of the form.
It will automatically submit the form.
OK.
So submit and then we have our input type because text input type goes password and we can start by
just taking a look at this and we see our form but we're missing two crucial things.
First of all the form doesn't go anywhere and even if it did submit somewhere it wouldn't send either
of these items because we don't have the name attributes.
So we need to add name equals the user name and name equals password just like that and we'll save.
Now if we take a look at the form nothing should look different but it's now almost set up.
Now we need to add in the information for the form tag.
Or we have action and method.
So the action it's going to be cash register also.
But we're going to send it as a post request and we don't have that route yet.
So if I went and filled out the form right now if I refresh and filled the form out it would just hang
and then eventually time out because we don't have a post-road slash register and this can be called
anything of course but it's conventional to name it the same thing as the get route slash register.
So let's do the same thing and this route would actually be responsible for handling users sign up and
we'll do an app post slash register function request response.
And in here we'll add all the logic to start.
We'll just do a nice rest and
register post-trib just to make sure that it's connected OK.
And if we restart the server and go back refresh the page fill out some random data and hit submit.
We should see registered post-draft.
There we go.
So that means that our form is submitting to the right place.
We're hitting this now we get to the fun part which is where we actually handle the user sign up about
10 new lines that you haven't seen most of.
So I'll start by writing up the syntax and then I'll pause and go over every line and what it does.
And the first thing we actually need to do which is a review is we need to add in-body parser and configure
it because we're taking data from a form.
This form is sending data in the body and we want to be able to say request up body.
Use your name for Quest up Vadi password.
Right now those will be empty.
So up top we just need to do an app that use body bursar dot you URL encoded and then we add in that
extended true.
And that's another one those lines that you just get used to typing.
We need at any time we're going to be using a form and posting data to a request.
OK so that's done now.
So we should be able to get request up body to that username and password which will contain the username
and password from the form that the user is trying to sign up with.
So now we're back to the logic and I'm going to type a few lines that I mentioned and then explain them
afterwards.
So user don't register and then instead of user dot register we're going to pass in New user and into
New User.
We're going to pass in user name is equal to request up Oddy that user name but we don't add password
into this new user.
We're actually going to add it after we create the new user request up body password comma and then
we're going to add a callback function ever and then user and then we'll open that up.
OK.
So let's talk about what we've done so far.
We make a new user object that isn't actually safe to the database yet it's a new user and we only pass
in username.
And the reason that we do that is that we don't actually save the password to the database.
That's not really a good idea.
And I'll show you what we actually save instead.
Once we get something in a database but it's not the password.
So what we do is we pass the password as a second argument to user dot register and use your dot register
.
We'll take this new user that has a username and then we will hash that password which basically means
that it turns it into this huge string of numbers and letters and it stores that in the database.
So he passes the user object that we want to create and then we pass the password separately.
And then if everything goes well it will return a new user that has everything inside of it.
It has user name and then it has the hashed password as well.
So let's see if that works.
And instead of here we'll add our simple if error and we'll do a console log error and then we'll also
do a red dot render the form again just like that.
And if there isn't an error then we have another line to do which is Passport dot authenticate local
.
And again I'll explain this afterwards.
Request response function and instead of here we're going to redirect to the secret page.
So this will happen once the user has been created and there's not an error if there is an error.
We're going to render that register page and that's where we have a return right here.
It will just short circuit everything.
And if there's not an error we're going to run passport authenticate.
So this line here passport authenticate will actually vog the user in who will take care of everything
in the session.
It will store the correct information.
It will run the serialized user method that we specified here.
And then we're specifying that we want to use the local strategy.
And in the future if we wanted to use another strategy and we had it installed we could change that
to be Twitter or Facebook.
And there are other things you need to do.
We have to sign up and get credentials on Twitter and Facebook and we have to register our apps.
So it's more complicated.
But as far as logic and passport is concerned we can just swap things in and out and there are some
small tweaks that we do need to make.
But generally passport makes it really easy for us to swap out different strategies.
So we're going to use local.
And this again is just going to actually log the user in.
And once the user has been logged in we're going to redirect to the secret stash secret and that's just
a personal choice.
We could go back to the home page the route but the slash secret is what we're all here for.
So once we sign up once we register we should be then taken to slash secret unless there's a problem
and then we'll go back to the registration form.
So let's test this out make sure we don't have any syntax errors.
Looks good.
Now let's go to our app and refresh the page and let's Sign-Up.
So I'm going to create an account as Colt and my password will just be password and no hit submit and
we get to the secret page which is good news but to really make sure that it worked.
Let's stop the server and let's actually open up Mongo and I'm going to connect to my database so I'll
do show Digby's and the database is Auth. demo app.
So I'm going to use that and then I'm going to look at the collections show collections and then we're
going to D.B that users find all DB users and you can see I mean we make this a little bit bigger.
We have a single user from when I just signed up and there's a lot of information in here.
Well there's really not a lot there's only a few pieces but it looks like a lot.
Most importantly we have a user name right here.
Your name Colts.
That's the one piece that we specified that looks normal to us.
And then there are these things salt and hash and I talk a lot more about these in the authentication
from scratch unit.
So we're not going to go into much detail all that I'll mention about it for now is that notice our
raw password the word password in my case isn't stored in the database at all.
What we're storing is this crazy hashed version.
And then this other thing called salt that will help us hash this.
And by helping us I mean that it's all taken care of by the passport local manglers package that we
installed and reconfigured as a plug in which we did right here.
So that takes care of everything from the hashing to the salting to storing things in the database.
All that we had to do was this simple line or resize this again user dot register and we pass in a new
user with a user name.
And then it takes care of everything else.
We give it the password from the form but we never save it to the user.
Instead it handles everything and it never saves a password at all.
It's actually saving the hash version.
OK.
So let's get out of Mongo now.
And we now have registration working the very last thing that we could do is open up the index page
or the home page I mean recit that render home.
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
should go to the register page.
So it will be an anchored tag with a trip equal to a cash register and we'll just add Sign-Up inside
the text.
So now if we start the server let's clear all this away node.
Yes and the visitor app and go to the homepage.
We now have a sign up link where we can go to sign up.
Great.
So we covered everything I want to cover in this video in the next video.
We'll work on the log in functionality.