Server-Side Validation for Registration Form with Zod🔥Next.js & MySQL Job Portal App #20

Today is our day 19 and today we are going to create server-side validation using Jot Jot is a very popular validation library where you can easily validate both in server-side and in client-side BestParty is already supported in TypeScript So today you will get to know how to use TypeScript in backend, how to use it in backend, how to use it in backend, how to use TypeScript in frontend, what is the value of TypeScript You will get to know everything in this video Because validation is very important Is the name correct or not? Is the username correct or not? Though, if you remember, we could have done one thing from server-side For example, we are using DrizzleURL We had already set the data type of our fields But finally, we are going to use the package that was made for validation TypeScript First Schema Validation with a Static Type Inference And by the way, I have already uploaded a series on TypeScript If you haven't checked it out yet, then please do it And if you haven't checked out the previous video, then do it And if you haven't subscribed to my awesome channel, then please do it So that you don't miss such awesome videos daily First of all, we have to install it Why are we doing this? So that you know that the name is correct, the username is correct, the type is correct, the minimum, the maximum Whatever it is, we will do the error throw at the bottom It will be done when we do it on the front end But we have to set it from our end So look, we have to go to JWT First step, you have to copy it and install it on your system I'll go here You have to install it simply So as long as you are installing it, let it be I'll tell you, you have to tackle your folder structure Where we have this feature If you can see carefully So here we have this feature part In this, we have this auth Now let's create a schema for validation So this is my auth folder Go to the auth folder and create a new file Whose name will be auth.tsx You can also write tsx There is no need to write tsx Yes, this is it So much of my work is done Let's go here once Look, mine is also installed There is no tension And my project is already running Now check it properly Go to the package.json file So guys, you can see clearly We have a Jod over here Look, Jod is installed So there is no tension And I have also created the file And that's auth.schema.ts So what we have to do here We need to create a schema It's important to tell What is the type, length, maximum of my particular field What do we need in it So export it I will write it like this Registration user action not running Register user schema I have created it like this Here, the most important thing is We are using Jod So we need to import Z from our Jod By the way, you have to export Z in this way Basically, you have to keep it inside the object Now what will happen is Our Z, our named export Basically, whatever you call it It has all the properties and methods of Jod Now if you do Z. like this You will get all the suggestions What you need and what you don't need Here we have something called object So I will go inside it And now I will define all my fields one by one Like, first of all We have full name So now you think If there is a full name Then what is the name of it Guys, this is very important We have our own schema if you remember So here we have something called name So the name will be the same No doubt Here we had a variable character Then length I mean, we just kept that There should not be a null and there should be a string But only this How much further can we do Like a name So now see guys, what can happen You will have to write Z Dot First of all, there should be a string Good thing Dot After that After that, guys We will trim it So that from left and right Whatever white space is there We can remove it Then what can happen guys Then if we see We have a minimum What else can happen Like we have a maximum According to me, this will be enough Because unique not null We have already set it on the database There is no need to set double So like in minimum If you see On hovering It is showing a minimum length Which is a number type Then it is showing parameters Means what After that If you want to pass something String Where did it go Here we have a string In second So minimum I think the name of two characters will be there So I will keep two Then you can write Name must be At least Two characters long You can write something like this Your choice In the same maximum If you have kept 255 So keep 255 Here you write something like this Okay So if you write like this So guys see This is yours So here we are going further In more depth Yes The name should be string Trim should be Minimum this much Maximum this much In the same way guys I am going to copy you here For our username It's a string Okay Trim Minimum Maximum And then we add regex Where Username can only contain Letters Numbers Underscore And then hyphens Means username See Keep the name We have not kept any criteria We have not kept any conditions But yes When you are creating your username It is a little important It matters a little Understand Because your username is going to be very unique If you go here too There too See Your username must be unique It is necessary to be unique That's why We are going a little more in depth About this In the same way If I go For our email See guys Why type and waste time When I can explain you very easily And you have also understood That Jot In it You get so many automatic methods That you can do very easily Like in z There is an email By default it was not there before But now we have this email Part Right Like Write z.email So this automatic What should be in the email By default It will include Please enter a valid email address Trim we are doing No doubt Maximum We have kept this much And we have done everything in lower case Lower case Because Tomorrow We can use email You know Check Whatever email is writing We will convert it to lower case And check Whether it is equal or not Whatever Fine And then finally We have Password also See It has to be string Minimum 8 characters Should be And you have seen every time One special character Your Upper case Lower case And a number Or should be a digit So If you write Regex Your work is done And guys If you do not know What are regular expressions Then I have already Uploaded a video on this Regex By Thapa Technical You search on YouTube You will get And then finally At the end We have something called Our role If you remember Fine So we have kept it Nm It means Our role It must be Applicant Or an employer One of these two And then You can see Comma An object We have passed If there is an error If there is no error The role must be Applicant Or an employer The role must be An applicant Whatever you want And by default There is a method Here also By default We have kept Applicant Fine If you do this Your schema is ready See This is our Database schema We have made it Through Drizzle ORM Kind of You may think But yes We don't need Created Deleted Because we are Just tackling The field Which is not visible Why to tackle Fine So in this way Your work is done Now Here Whatever you have created No doubt We have to take care Of so many things So when you go Auth.action.tsx Where you While registering Or While logging The backend Logics Where you have written To fetch the data And then To validate And then To store the data In your database The part You have done here If you remember So this is yours In this way And now What are we using We are using TypeScript In TypeScript You have to define Static types So that In development You have to Auto completion And in run time You have to check Whether it is equal Or not So If you see carefully This was our code In which After data I have said Data type Here Fine My data Like The data I am getting Its type is this Means Name will be this Username will be this So I have done this From my side Which is right But now We are using validation Like Jot We are using In Jot We are using Registered user schema Where Name will be String Username will be String I was telling this Now No Trim Min Max So This data type I have to pass Here Fine Here Where is it Over here So Now What will I do See carefully This part Directly As it is This is a constant Variable As it is I cannot pass Now My validator Object Schema Type I have to find See What happens Export Const Register user Data No problem Register User Data Will be equal to See carefully See I have to know Its type First This type I will pass See Now Guys In Jod We have One of the Most powerful Method Infer You have to write Infer What does it do Its work I will tell you To figure out It creates Type Based on Jod Schema See Anyhow I have to pass Its type So that We can Validate So You have to Z.Infer Method Basically It is a utility Which provides Jod Whatever Schema You have to Pass Not only Schema You have to Type Of Schema What happens You know This type Of Operator Through this Any Variable Type We can Pass Welcome Runtime We can Pass Jod String We can Pass Jod Runtime We can I have to create a type for this anyhow so, when I know that this is my schema and I just wanted to know the type so, with the help of Jot I passed the type of Z.infer I got it here I am saving the controller it is telling property infer does not exist on type of import see, first thing is what is the use of this to give us the type script type but here there will not be a constant variable I want to create a type so, we create the type like this and now my work is done so, I am defining a type register user data, in which I passed it like this we did the same here if you see carefully here you are not getting but in the action part I told you about interface and type so, in the same way I created a type here and Jot helped me what should be the type of this user schema I got to know and I have one more code which I want to copy paste here and this is it we just created it now what I am doing my confirm password is also a field it was left out so, what we did I already have a register user schema so, I am just extending it I am adding one more field and I am validating it I mean it should be a string and then again Jot provides us a powerful method that is so refined in which you are passing a callback function you can see it clearly here first parameter comma and then object here you are passing a condition in refined method and based on that condition if there is any error you can easily pass it forward in case if password data means it can access this field if data.password is not equal to data.confirmpassword so, in case if our condition fails we are passing a message and that's the password don't match and then path is important what it does let's say password doesn't match so, this password don't match where do you want to show it from which field it belongs I said my path is confirm password means if I want to throw an error like I said I will show an error at the bottom now if we compare password and confirm password and password don't match it won't come here it will come under confirm password so, this path is same path means I have to show an error below and once again I have one more field added so, my type script doesn't have confirm password field so, it won't be able to validate that's why we are creating another static type same type this time it's register user with confirm data and again z.info it will automatically create a type script based on the schema you are passing and we don't know what is the schema so, whatever it is it will automatically create and store it for now one more thing we don't need confirm password in server that's why we are creating when we will validate in front end then we will use this but right now we only need this part register user data so, let's go first register user action whatever I wrote here I will pass it control and then space I got it I imported it from our auth schema and that's it that's not enough because the data you are getting still you are getting it from data getting from data means whatever user typed in front end you are getting it as it is but I don't want to get it as it is I want to validate it if user wrote his name is it equal to string is it minimum or maximum now I want to check it so, how it will be for that also I will tell you a powerful method now what we will do I will copy the schema I will paste it here control and then space I got it till now you must be thinking this register user schema and then fields how it will know what was written in username what was written in username field that's what is happening here here we have an option method is save so, inside this my data this data I am passing it whenever someone click on registration button when it comes on server action so, first line is I am passing that data on my schema finally it got name, username, email, password role, everything it will check one by one if everything is correct see this data const here you are getting an object where first is data second is error now here I will give an alias name validated data why I gave an alias name because data is here here also data it will be confusing which data I am talking about so, I will pass this validated data where I was destructuring data now I am validating data because if everything is correct I have to get data so, I represented it as validated data here I have to define error I have to define error then everything will be set the moment I defined error if there is an error return status code error message here also you have to get error you are getting error get first element have to fill message . cancel I will upload video on JWT called Joh теперь better you will understand because I will go in-depth of JWT then it will be a little bit boring you are getting it right? I am just assuming that you have already studied and let's make a project I have already told you this much so yeah guys this is it for today's video there was nothing much to do I was thinking since then how will it get validated so we will pass it like this there was another way to pass it if you want data directly you can pass it here but save parse is an awesome method so yeah guys this is it I hope you liked the video I did this for registration I want for tomorrow's video do the same for our login status basically for login data if any user is logging in how will you check there because there are two fields for login if any user is logging in you can create a schema for jod validation do tell me in the comment I will tell you tomorrow so this is it for today's video I hope you liked the video let me know in the comment section if you liked the video share it with your friends source code is free I will share it in the description if you haven't subscribed please do it see you in the next video till then guys thank you so much take care