Welcome to Day 20 of our full-stack Job Portal series using Next.js, MySQL, and Drizzle! In the last video, I gave you the task of adding server-side validation to the login form. Today, we're solving it together.
Learn the best way to handle Next.js server-side validation for your login form using Zod. We'll build a robust `loginSchema`, validate user input on the server, and ensure our Next.js Server Action only receives clean, type-safe data.
In this tutorial, we will: ✅ Create a Zod schema (`loginSchema`) for our email and password fields. ✅ Discuss why the login password validation is different from registration. ✅ Use Zod's `infer` feature to automatically create a TypeScript type from our schema. ✅ Implement Zod's `.safeParse()` method to validate form data *before* passing it to our Server Action. ✅ Secure our application by rejecting invalid data on the server.
This is a critical skill for building any secure, full-stack Next.js application.
🔥 **COMING UP NEXT (DAY 21):** Now that our server-side logic is secure, we'll supercharge the front-end by integrating React Hook Form for a seamless client-side validation experience!
⌛TIMELINE⏳ 0:00 – Login Form Server Side Validation with Zod 1:00 – Creating Login Schema for Email & Password 1:30 – Why Password Validation Differs in Login vs Registration 2:40 – Generating TypeScript Type from Zod Schema 4:30 – Validating Data with `safeParse` on Form Submit 5:10 – What's Next: Integrating React Hook Form (Day 21)
Today is Day 20
Today we are going to do
Login Page Validation
With the help of JWORD Validation
Yesterday in registration
I told you about validation
I gave you a task
Validate our login page
Which server side validation
We are doing server side validation
Not front end
With the help of JWORD
TypeScript First Schema Validation
With a Static Type
With the help of this schema
You can validate each field in depth
And how easy it is
TypeScript type is also telling you
Which you have to add later
So it is doing everything for you
In today's day
I don't need to do many things
First of all
You have to install JWORD
Which we have done in yesterday's video
I told you about its folder structure
Which we have seen in yesterday's video
Then I told you the whole thing
So now what we will do
I'm copying this in Ditto
Because it is the same
There is no such big thing
I'm pasting it here
I don't need a role
I don't need an email
I'm done with this
Now in return of this register
I will login here
Login User Schema
My work is done in a snap
But one thing is important
In this password part
You don't need to put any regex
When we were registering
We have done a full validation
In A to Z password
Minimum one character
I mean one lower case, one upper case
Special character numbers or digits
But when you are logging in
There is not much need
Because the user has already registered
So now just remember
What I had logged in
I mean while registering
What was my password
Just keep that in mind
So there is no need to do much validation
And there may be other reasons
When you were registering
There was not much validation
But after 5-6 months
You put rules
So the old users
They will not be able to log in
Because a new rule has come
There was no such rule before
So there is no need to do much on login
Just leave it
Now for login
You have created your schema
Validator schema
Now
When you go to auth.action
You can see
We have this login data
This is my type
This is your static typescript type
Typescript type
Which helps you in auto completion
And validation in run time
So for now email string and password string
That's it
But there is at least this much
And by the way
What is happening here
Is there anything else in email
No, that's it
At least I need this
As we had inferred
That my login user schema
I need the typescript type
So how to know
Export
Because I have to use it
I have to create type
So we need to go with this type
Login
User data
And z.infer
I had told you
There is an awesome method or utility
In which you can
Login user schema
User schema is not coming
I don't know why
User
Schema
Type of
Type of operator
Whichever variable or object
We will get the type
And our
Jod will check
Which static type
I can create for this type
Type of my typescript
It will get it and pass it
Login user data
This login user data
I have to pass it here
I will import it
I don't need it
And
What I did yesterday
For our
Registration
I will copy it
You are thinking
How to validate
Email and password
In this way
Instead of register user schema
I will go with login user schema
You can see it here
I got it
We have a data over here
As it is data and error
Error is error
There is no need of username
No need of name
No need of role
I don't need it
If you do this
In yesterday's video
Server side validation is completed
By doing this
Server side validation of login page
Is completed
This is it
For today's video
I hope you liked it
I am really sorry for the noise outside
Because it is Diwali
We can't stop it
Our server side validation is completed
In tomorrow's video
We will see how to validate
In frontend
With the help of react hook
Because Jod's support is awesome
If you have any doubt
Please comment
If you haven't checked out previous video
Please do it
Like and share
Subscribe
See you in next video
Till then thank you so much
Take care
