Welcome back this lesson is part 2 of adding authentication to your camp.
Well focus on configuring passport first and then we'll add the logic for the sign up or register routes
and template.
Let's get started here.
So I have my app US Open and I've already required everything what we need to do now is configure passport
and we have a few lines so I'm going to add in a line here that's just passport configuration just to
make it clear.
The first thing that will do is set up a Express session.
So after use then require express Dasch session and then we're going to execute that.
And inside of that when we run that Choire statement we're going to pass in an object and I'll give
it a secret.
And this can be anything we want Last time I think I did.
Rusty is the best and cutest dog or something like that this time I do something similar.
Again this can be anything that we want but I'll just do once again.
Rusty wins.
Cutest Dog.
Although I have to say Russell is getting a little bit chubby and I don't I don't feel confident that
he would actually win.
Cutest Dog any more.
And then show people his older CUPE photos.
He's a little sausage like now.
OK so we have the secret setup that you need to add in resave and that should be false and then save
on initialized.
Make sure we spelt this one right.
False.
And these are just two options that we have to add and we'll save notes continue on down and work on
configuring passport.
So far this has nothing to do with passport just yet.
We're going to do have that U.S passport that initialize and then another one don't use passport that
session just like that.
Then we're going to do a passport use and this is where we give it the local strategy that we imported
here.
So we're going to run new local strategy then inside of that we're going to give it a method user doesn't
authenticate and user does authenticate is not one that we wrote.
It's one that comes with passport local mongoose.
If we didn't have this package you would have to write that method ourself.
Then we have two more methods.
Passport dot serialise user.
And that's going to be using user dot serialise user which is another one that comes for free with that
passport local mongoose.
And then we need the serialise ups the serialise user and it's the same name over here.
The serialise user user serialize the user.
OK.
So that's all the configuration we need to do before we move on to the route to register.
Let's test that out just see if everything runs OK.
And what do you know.
I spelled save uninitialized wrong again just like I did in the last video and it went out of my way
to try and avoid that let's just copy this in and paste it here.
Hopefully you caught that before me.
Let's save again and restart.
Now we don't get any errors or any warnings and we're good to go.
OK so that's all the set up we have to do.
Now we have to go through and add the routes in our templates and we'll start with the register.
So I'm going to go down to the very bottom and down here below all of our comment routes and our campground
routes.
I'm going to add in our Auth. routes.
So we'll make a little note here and very soon.
I keep saying this but very soon we'll be splitting all the routes into separate files because it's
getting a little bit difficult to manage with all of this code and here is a lot of code.
Okay.
So our first route is going to show the register form.
And that's just apt get cash register and then we need to call back here request response.
And then in here redstart render register which doesn't exist yet.
So now it's go create that.
So touch use.
So cash register.
Yes.
And then let's open that file and we'll add in our simple H1 Sign-Up and let's make sure we see that
when we start the server and we go to that route
slash register and we get the Sign-Up H1.
Now it's added in the form.
So we're going to have a forum tag that form is going to go to slash register doesn't exist yet and
method will be post.
We need to input first on type because text name is equal to username and placeholder is equal to user
name as well.
Then you need another input type.
This one is password.
And then we want name to be password and then a placeholder here can also be password ready.
One more item which is the button to submit it it will just say Sign-Up save let's refresh.
Here's our form.
So right now if we submit the form it's going to send a post request slash register.
We don't have a route to handle that lets go and add that route.
So this route will handle Sign-Up logic and inside of that going to have an apt up post to slash register
or callback.
And let's start with a simple red dot send signing you up and just make sure we see that when we submit
the form.
So we need to restart the server when we add a new route.
And now let's go back to the form refresh.
Fill it out.
Hit sign up and we get signing you up.
OK.
So the route is now set up.
Now let's actually add in all of the important logic we need to use that user dot register.
That's provided by the passport local mongoose package.
So you should not register and we pass in a new user that has a user name assigned and username should
be request top body that username like that.
And then afterwards we pass in the password as a second argument to use or not register.
So what we can actually do is make this into a separate variable to clean it up a little bit and we'll
call it for our new user equals new user that has a user name.
And then we're going to register with new user Khama request dot body dot password.
And that's the password from the form.
This is the username from the form which should be reviewed by now hopefully.
And then we're passing in this new user that only has a user name assigned and register is going to
handle all the logic of taking that password and then rather than storing the password it actually stores
that crazy hash.
So let's make sure that it works so users don't register and then add in a callback.
And this will have error and then user and that user will be the newly created user.
If it worked.
So let's start with an if error.
Well do a constant log error.
But we also want to handle it and we'll do a rez render register and we'll do a return here.
And that's just a nice way to short circuit and get out of this entire callback if we return.
And then down here we run passport dot authenticate with a local strategy and we're going to call that
with the request response and then a callback function that it will handle.
Once it authenticates and what we want to do is redirect and let's redirect to slash campgrounds for
now.
So once the user has signed up then we're going to log them in authenticate them and then we're going
to redirect them to slash campgrounds.
And if we don't and if there's a problem signing the user up then we're going to cancel that log the
error and then we're going to render the form again.
So let's give that a shot.
Start the server up.
If we go to register and fill it out and then we hit submit and we make it to slash campgrounds.
That means that things went well for us.
Let's refresh all sign up here with severance and password or the password again sign up and it takes
us to slash campgrounds.
Excellent.
So we can trust that that worked but we could also open up Mongo and connect to our database show Digby's
and we're using Yelp camp V-6.
So I'm going to use Yelp camp V-6 and then I'm going to do a D-B that users find.
And we should see a single user in here is gigantic looking thing.
If we see that it means that it worked.
So we have our user name that we added ourself when we did user data new here or new user.
And then all of this stuff was added from the user data register.
OK great.
So we have that working all Control-C out of here and we can start the server up again.
And let's see what happens if I go back to the form and I try and register as Severus again
takes me back to the forum.
Every time I do that with the same username It's taken me back to the form and we're getting a message
here that says a user with a given user name is already registered.
So we get that for free by using Passport local mongoose.
We automatically get that message.
It's great we can use it in our view in a later video and we will.
Because right now we're not explaining to the user the problem which is always really frustrating if
you're a user and you don't know what's going wrong.
But you know that something is not working.
But for now all that we care about is that it works.
So we have these two render statements are redstart render and a restaurant redirect.
And we're getting either one depending on if we're successfully signing up or if we're causing an error
in this case by setting up with the user name that's already registered.
Great.
So we did everything you want to do and that's video in the next one we're going to handle the log in
logic and wraps