Save Subject Validated with airSlate SignNow

Save subject validated

now that we're collecting user data from a friend we can now create a back-end route that'll process this data and store it inside of the database as mentioned previously we're storing users emails and passwords inside of a database so that these users can later prove that they own a particular account through the login logout functionality this proving is done by comparing user submitted data such as email and password fields to whatever email and password was originally stored inside of the database this initial data storage is exactly what we're implementing right now so the stories are info inside of a database we need to use a back-end language like nodejs that can communicate with back-end related apps such as my sequel we're simply creating a chain of different programming languages and apps so that they can work together and perform the required task ahead which is storing user data now there's a bit more that we have to take in consideration when storing user data in order for app to be secure we have to ensure that that data being sent through our registration form is actually the kind of data we expect it to be we wouldn't want someone using our email field as a placeholder to send malicious code up to our server we want to make sure that the only data being pushed to our server from our email field is an actual email and this kind of data checking is what's known as validation there are two types of validation to consider when building web apps back-end and front-end validation Bagon validation is done on surface side meaning we're validating user input with no J yes to ensure that no matter where data is coming from the data is always going to be the exact data we expect it to be fronting validation is a type of validation that's activated within the browser using JavaScript front-end validation notifies your users when they entered of a piece of incorrect data into an input field and this is great for improving a user's experience but it doesn't fully protect your server from malicious attacks since friend invalidation uses client-side JavaScript hackers can edit this JavaScript directly removing the fennec validation which in return would allow the hacker to submit whatever data they want to the server and this includes malicious scripts this is why it's so important have backup validation it protects you from hackers that can edit your front-end code to bypass any validation barriers that may have been in place as a result we'll start by processing user submitted data on our back-end with Express and then validating it with Express validator looking at our app you'll notice that we have a directory called server with a file inside of it called M XJS this is something that knucks created for us since we told MUX to install with Express a back-end framework we can use to read user submitted data and interact with things like databases the most important thing to know when looking at this file is that we aren't staying chaining Express online for then telling you to listen for requests on localhost 3000 a hostname and port number that next provides by default when we start Knox with NPM run dev we're actually starting an instance of Express that's intertwined with next we're essentially saying let's use Express as our back-end framework and then next as our front-end framework we can tell Express how to process certain requests just like the one we sent with Axios in the last video so what we can do is grab our Express instance which is sent to the Const mamed app say we want to listen for any post requests sent to API slash users and specify what should happen if a post request is received which in this case will just log some text [Music] so we're sending a post request from our friend using Axios to the route / API / users which goes to our index dot j has file inside of our server directory which in return logs our text since we told Express to do just that whenever a post request is sent to slash API slash users to test this let's fill out our form and hit submit you may have expected to see data inside of the browser console but it's important to note that whenever you're logging data and a backhand file such as server slash index 5 j s it's always going to be displayed in the terminal window you're running your app in instead so if we look inside our terminal window you'll see that text is being logged each time we hit submit pat yourself on the back because we just successfully connected the front end of our app to the back end before we move on the backend validation let's make sure that we can read the data being submitted from our info fields in the post handler we just created Express conventionally stores user submitted data inside of a property called body something that's located inside of the handlers request object so instead of constant logging our text we're going to console log out rec dot body and when we submit our form you'll notice that we are returned with a value of on define this is a common error faced by many developers express removed its native body parts and functionality a while back and now requires that you set up a separate body parts and package manually all this means is we have to set up a separate package in order for user submitted data be true double their reck body mouflon body parser we'll run NPM install - - save - exact body - parser at one point 19.0 next we'll import it into service / index page is then before a route handler will tell Express to use body parser to parse any data submitted in JSON or URL encoded format and place it inside of our recta body property automatically beautiful move by Axios is simply in JSON format by default while data submitted using HTML forms rather than any JavaScript is by default URL encoded the difference between the two can be seen within the stack overflow response [Music] as a result it's important that we encode both in case we want to use one form submission method over the other now I want to weave some in our form you'll see our data nicely formatted inside of a simple JavaScript object perfect for validating and then storing inside of the database now that we have back-end data being processed let's ensure that this data is what we expect it to be by integrating back-end validation to integrate back-end validation will want to install an express validation package called Express - validator Express validator provides a number of useful functions that check whether using submitted data meets a certain set of criteria to install Express validator we'll run the following command npm install' - - save - exact Express - validator at six point one point one will then head back into service slash index page is and import two functions check and validation results [Music] from Express - validator we'll be using the check function as a form of middleware meaning we'll be checking our users input before we store it inside of the database but still after a user submits the input in the first place our check middleware runs right in the middle of these two actions so right in between slash API slash users and our function over here we'll add an array and inside of this array we'll call our cheque functions to ensure that our user submitted data is valid so check is a function that takes two optional arguments a field name and a message we want to check that the email submitted from an input field is indeed a valid email the field name argument references our inputs ID so if we look at our email input you'll see it has an ID of email that's what we'll put inside of our check function then we'll check of this email is an actual email by training on the method is email Express validator will automatically check if the submitted data is indeed an email and store the result inside of a request object to access the result of this check we'll want to use the second function we imported from Express validator validation result validation result takes one argument our request object this takes any potential errors from our validation check and stores them inside of an object with some handy functions for error checking one of them being is empty [Music] we'll use this is empty function to determine whether or not any validation errors were found and if there were then we're going to return a response with a status of four to two which just indicates that there were indeed some validation errors and we'll also return a JSON object with the exact errors so we can display them on the front end if desired we'll add a console log inside of the conditional so we can see exactly what our errors look like if they exist then we'll submit our form again with some invalid data looking at our console we're receiving some errors which means our validation checking is indeed working all we're saying here is to stop running back in code if there's a validation error otherwise perceive and perform actions such as storing this users data inside of a database to make our validation as clean and secure as possible we'll chain on a normalized email method on to dot is female this will ensure that all uppercase characters are transformed into lowercase rounds then we'll add validation for a password field to ensure that it's larger than 6 characters so we're going to add in is length method that takes an object that's an argument with a property of men which we're going to set to six now when we try submitting a password of less than six characters we log out and air in our console and end the users requests all together you always want to validate user submitted data to a server so it's likely you'll be using Express validators check function in more than a number of ways for a complete listing of Express validators check criteria functions checkout validator j/s the library that expressed validator uses for all its data validation methods with this in place we can now store our validated user data inside of the database you can my sequel will be doing just that in the next video guys I'll see you there right now