Welcome back in this lesson which is part 3 of adding authentication to your camp we're going to focus
on loggin will be writing the two in routes and then also the log and template with the form kids started
here.
So just like register log in needs to have two routes.
This should be a bit of a review from the last unit where we covered in more detail but we need a GET
request to show the form and then opposed to actually do the logging in.
So let's start with the form and I'll add a comment here.
Show log in form just like that.
And then once you've an appetite get slashed log in our request response and the callback every go and
then will render the log in template that doesn't exist yet.
Now let's create that touch views slash log in.
E.J..
Yes and now it's open that
much to start with.
And each one that just says log in and save a start the server.
Let's go to our app and try and visit slash logon.
There we go.
Looks good.
No lunch at the forum.
So we need to have a form tag and let's start with our inputs and put type calls text and we could just
steal this from the register form.
But it's good practice to type it again from scratch.
So input type goes text name equals username placeholder equals username as well.
And then another one input type equals password name equals password placeholder equals password.
And then rather than doing a button which I've been doing I'm just going to use an input type submit
just to demonstrate that you can use either one.
So input type submit.
And then we need to give it a value.
And that's what will actually show up.
So value will just say log in but save Take a look at our form.
OK.
We have the form.
It doesn't do anything right now because we need to give it an action and a method.
And just like register on register we have a post request that we're making to slash register on the
logon form.
We're going to make a post request to slash logon.
So action should be social logon and the method should be post and we'll save it to make sure that works
.
Then if I hit log in right now we'll get a little message that says can not post slash log in because
we don't have a route for that.
So I'll go back to actually yes and add in our log in route and this route will be responsible for handling
log in logic.
So amped up post slash log in at our callback.
And then what we'll do is just do a simple read send log in.
Logic happens here and we just want to make sure we see that and we do have to restart the server whenever
we change or add a new route.
Now let's refresh type anything.
We actually don't even have to fill those out log in and we get log in logic happens here.
All right.
Great.
So we have the routes that up correctly but I'm actually going to get rid of all this because if you
remember back from the last unit the way that we can do log in is by using a middleware.
And that's the passport.
Authenticate middleware.
So add that in here Khama passport dot authenticate.
And then inside we need to provide local.
And then after local as a second argument we provide an object and that object will take two things
success.
Redirect.
And if a user successfully logs in let's redirect to slash campgrounds and a failure redirect and let's
indent this now that we have enough text here.
OK so success redirect and a failure redirect
and it will redirect just back to slash logon.
If it fails just like this there's a lot of tick in here and we still need a comma and then we should
be good to go.
So let's walk through this again.
It's a bit of review from before we haven't amped up post route to slash log in when a request comes
in slash log in.
This is going to run first.
All of this and this is all just the second argument.
So it really looks like this apt up post we have Slash log in then we have the middleware and then we
have our callback.
So the middleware goes from here down to there which is always a little confusing when you put things
on new lines.
But it's much better than just having one gigantic line not middleware we'll call authenticate method
which we set up up here so much code to go through towards the top.
Here we are.
Passport don't use local strategy user or authenticate.
So when we call user data things Kate or passport dot authenticate on a local strategy it will use the
method that we didn't have to write.
It was given to us for free by using the passport local mongoose package.
But it's going to call that authenticate which will then take up body password request up by the username
and then it will authenticate that password with what we have stored in the database for that user.
And it takes care of all the complex logic that we don't have to worry about.
And then if it works redirects such camp grounds if it doesn't work redirect to slash in and then we
have this Colbeck here that really doesn't do anything.
And we can get rid of that if we wanted to.
But I just want to leave it there so that you are aware that this is a middleware.
OK.
So restart the server.
Let's see what happens I'll get rid of this line.
It's complaining about that.
There we go.
Let's refresh and let's plug in with that same account that they created last time Severus and password
is password Nahit log in and I go to slash campgrounds.
Great.
Now let's go back.
I'll reset the server again and let me try and read something that I know doesn't work.
Hopefully we don't have an account with that password and I get back to the log in form because that's
what I set as the failure redirect.
OK so let me just reiterate this because it is an important concept.
This is the same passport that authenticate that we're using instead of register as we're using instead
of log.
The difference is that instead of register we're doing other things before we run passport authenticate
we're actually registering the user making a new user.
And then if that works then we're logging the user in versus here on slash log in the user is presumed
to exist already.
So all we do is passport does authenticate which will log them in.
OK so that's everything I want to get done.
The log in logic with those two routes after I get log in APT up post log in.
And then we also have the form here.
Just a simple form just like register.
The only difference is this right here where we're submitting the form to.
Awesome.
In the next video be working on logging out and also making our NAV bar a little bit better.