Welcome back in this lesson we're picking up where we left off with the authentication code along and
we're going to add in the log in functionality.
So that means you need to add in that to log in routes one that's for the form renders the form and
the other one that actually does the log in logic.
And then we actually need to create the form and then we'll test it out.
So let's get started inside.
Yes we're going to add two routes and those two routes again.
One is the GET request and one is a POST request.
Both will be slash log in just like we did for register.
So let's start with the form and I'll make another note here.
These will be logged in routes and the first one is just going to render log in form and that one's
nice and easy don't get slash logon request response and they call back and we'll just do a rez render
log in.
Now let's create that form.
So touch use slash logon Ejay us and then open that up views slash log in that E.J. Yes.
Great.
And we'll just add a nice H-1 that says log in and let's make sure that we see this when we start the
app.
Let's go to our application and go to slash log in and receive the template.
So now it's Add in the form and this will be just like the registration form except for one big difference
which is where the form submits to.
So we'll add that last Let's just go with the inputs again.
So type equals text on the first one name equals username and placeholder equals username and then we'll
duplicate that and here we'll do type equals password name password again and placeholder will be password
.
And then we'll add an R button to submit the form and we'll just write log in and then we have to work
on the actual form itself.
So this form needs to send a post request to slash logon log in as a post will be our other route that
we haven't defined yet but that's where we'll actually process the data and figure out if the credentials
match.
So let's set that up instead of log in each case we have action equals slash log in and method is also
a post.
So this form is actually on the slash logon as it get route and it submits to slash log in as a post
.
Now let's take a look at it.
Refresh the page we see the form.
Great if we try and submit it right now we don't have a slash log in as a post route and it will just
timeout.
So we'll go back now and add the log in post route and this route will be responsible for log in logic
.
So at top post slash log in function request in response and in here we have some new logic and it's
actually not that new because we already used it up here or we have passport dot authenticate local
We'll do the exact same thing except there's a small twist which is that we're not going to do it inside
of the callback here.
We're actually going to do it right here as a second argument.
So let me show you what it looks like first and then go over it.
So amped up post log in and then we're going to add passport dot authenticate and that will take local
as a string comma and then opening and closing braces.
And inside those braces is an object and we're going to pass in success redirect.
And that will be slash secret and then failure redirect will be slash log in again and we'll save and
or authenticated needs to actually close here around that.
So it takes those two arguments passport that authenticate local And then this entire object.
Those are parameters we're passing in comma and then this is our callback function and we don't actually
need to put anything in here for now.
So we'll just leave it up the.
So now let's talk about what we've done here.
We've already seen passport dot authenticate but we haven't seen it use like this inside of the up post
where it's not in the callback itself.
So this is what's known as a middleware and we'll be working with middleware and writing our own middleware
and the next video.
But the idea of middleware I'll spell it out here middle where you said it some code that runs before
our final route callback here.
When our app gets a post request to slash log in it's going to run this code immediately and we can
have multiple middleware stacked up so we can have another thing that will run after we authenticate
and then another thing after that.
And the idea is that they sit between the beginning of your route and then at the end of the route which
is our handler at the very end.
Hence the name middleware.
So again we'll be creating our own middleware in the next video.
But for now all you need to know is that this is called a middleware and recalling passport dot authenticate
.
Remember the whole point of that is that it actually tries to like you when it checks it off then it
keeps your credentials.
So it's going to take the password and the user name that are in the request inside request up body
.
We don't even have to explicitly provide that passport automatically takes the username password from
the form or from the request body and it's basically going to compare the password that the user typed
into the input and compare that to that crazy hash version in the database.
And then we provide an object with two parameters.
Success redirect and failure redirect.
So if it works we're going to redirect to slash secret and if it doesn't work well redirect to slash
log it before we test this out.
There's one other line of code that we need to configure passport with so up top where we did the passport
does serialise and serialise user going to add another one in passport use new local strategy which
is what we imported here.
I support local.
We saved it to local strategy.
So go back to that new local strategy and then in parentheses user dot authenticate and save.
So we're creating a new local strategy using the user does authenticate method.
That is coming from Passport local mongers so we don't actually have to write the authenticate method
either.
That's given to us and then we're just telling passport for the local strategy use that version of user
data authenticate.
OK so now we have that set up our authenticate should work.
So let's give it a shot.
No actually yes.
And let's start by trying to sign up or sign in with an account we know doesn't work.
Log in and it takes you back to the log in page and that's what we had set up here.
Failure redirect slash logon.
Now sign in with an account that I know works
and this time it takes me to the secret page.
So we now have log in working.
We still don't have sign out.
We have logged in working so I can sign up using register and then they can also log in.
We have a form just like Register had a form route and then we have a post route to actually do the
authentication and then we talked about middleware which is the idea of having some code that runs between
the start of a route and the final end of that route handler in the next and final video in this series
are going to implement log out and we'll also create our own middleware