Creating A Login Form and Validator
In this lesson, we'll apply what we've learned to create a login page as well as a validator for our login form.
- Author
- Tom Gobich
- Published
- Apr 12
- Duration
- 5m 1s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Creating A Login Form and Validator
-
(upbeat music)
-
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'll 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 register 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 passed right there.
-
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 back up,
-
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 [email protected] 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 [email protected]
-
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.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!