-
- So our register form is most of the way there. We're not quite ready to dive into the entirety of authentication yet. We're gonna dive into that after we cover middleware.
-
So let's go ahead and take some time to get our login page set up in addition to our register page so that we have that ready to go. So let's hide our browser back away. And just as we have our register controller,
-
let's go ahead and create a login controller. So we'll dive back into our terminal. We can stop our server, clear that out, and let's do node ace make controller auth/login.
-
And we're going to want a show and a store method, the exact same as we have inside of our register controller. And we also wanna make sure that our login controller stays singular. So we'll do hyphen S there to ensure that.
-
Let's run that. Okay, so now we have an app controllers auth login controller. If we dive into that, we'll see a show and a store method. For our show method, we're gonna want view,
-
and we're going to want to return view render pages auth login. Then for our store method, we're going to want the request as well as the response.
-
The first step we're gonna wanna do is grab our validated data off the request. Then once we have that, we'll want to log in our user. And lastly, just as we did for registration,
-
we'll want to return our user back to the home page. So we'll start with that first because that's nice and easy. So let's return response redirect to route, and we call that route home.
-
For our validated data, we know that we can now do const data equals await request, validate using, and now we need to go create a validator for it. So we can dive into our auth validator,
-
and underneath our register validator, we can export const a login validator, find compile, and then find object so that we can define our object schema.
-
For this one, we're not gonna want the full name. We're just gonna want the email and the password. So we'll start with our email, find string. We can verify that this is a valid email and normalize that email
-
so that it matches what they registered with. However, we will not want to check whether or not this is unique because we're not actually creating anything inside of our database with this email. Instead, we're just gonna use it to find the user
-
so that we can verify whether or not the password that they've provided is correct, which leaves us with needing our password. So we wanna do find string,
-
and whether or not you require the exact same here as you do during registration is completely up to you. I'm gonna go ahead and leave ours nice and vague for the login,
-
and we'll leave our requirements for the password within the registration step. Okay, with that defined, let's jump back into our login controller, and we can now type in our login validator and hit tab to auto import that,
-
and now we have access to our data. We can go ahead and console.log that data out just to check and make sure that everything's working okay. Next, let's hit command or control P,
-
type in routes to dive into our routes file, and we're gonna want to mimic both of these routes here for our login. So we'll copy both of those, paste them in, click somewhere in the middle of our registered word there,
-
option command down arrow to get double cursors, option right to jump to the end of the word, option shift left to jump to the start of the word and select the entirety of the word,
-
type in login, option right arrow two times, option shift left arrow to jump to and select the entirety of register controller, let's type in login controller,
-
and we can hit tab to auto import that. Both of these methods here will remain the same, so we're good there, option right arrow some more, and then option shift right arrow to swap our register with login.
-
Give that a save, and our controller did not go purple, so I'm gonna scroll back up. It did not switch it to lazy, so I'm gonna go ahead and do that real quick here. Import, wrap this up.
-
That also needs to be const right there, all right. And I'm also gonna move our router up to the top of those imports, just so that they're a little bit easier to wade through. Okay, next we need to take care of our login page.
-
So we'll scroll down to our pages. Let's use our register page as a good starting point. So we'll right click on that, click copy, right click on auth and paste that in, and then we can hit enter with that file selected
-
and rename it to login. Our H1, we'll want to switch from register to login, our auth register store, we'll wanna switch from register to login. We can get rid of our full name input right there.
-
We'll want to leave our email and our password inputs and then register down here. We'll switch to login and that should do it. Give that a save. Lastly, let's give ourselves a link to the login page.
-
So keep register on the right and put login on the left. So a href route auth login show and our curly braces and our anchor and add that as login. Give that a save.
-
Let's jump back into our browser and I forgot to put the server backup. So we'll dive back into our terminal, npm run dev, give our browser a refresh. All right, so now we should be able to click on login and cool, we are now in our login page.
-
Let's type something in. So we have test@test.com and some password, hit enter there. We get redirected back to the homepage, which means everything went through our route handler AOK.
-
If we dive back into our terminal, we see the email that was provided as test@test.com and our password of password. Awesome. If we were to dive back into that login page, provide in something that's not an email,
-
first and foremost, the HTML validation is gonna kick into place. But if we were to right click on that, inspect, change that input type to text to circumvent that validation,
-
hide that back away, log in once more, our server side validation kicks in now and says this email field must be a valid email address. Additionally, we also get the same thing for our password, it must be defined.
-
So our validation is working AOK here as well.
