Firebase Functions - Data Validation

hey what is going on everybody it is rob aka the diligent dev and a few months ago i shot a video going over how to create a rest api using firebase functions and since then that video has gotten a decent amount of views and i've gotten a lot of questions out of it and one of the questions was how to implement data validation for the data that you're passing to the api so that's exactly what we're going to cover in this video so let's go ahead and jump over the computer and get right into it okay so here we are over the computer and since this tutorial is going to build on top of another video i did going over how to create a rest api using firebase functions we're just going to go ahead and clone that repository and add to it now if you'd like to watch the original video and i highly suggest you do i will link it on the screen right now and i will also put a link to it in the description in the description you can also find a link to this bitbucket repo we're about to clone so what i'm going to do is i'm going to click this clone button and i'm going to go ahead and copy this out of here then i'm going to open up a new terminal cd into my desktop directory and then paste that git clone command in there and it's going to go ahead and clone the project for us now that the project's been cloned i've gone ahead and opened it up in visual studio code and what we're going to do is delete some files out of here so that when we create our firebase project or you create your firebase project it's actually pointing at the project when we initialize firebase inside of this code base so what we're going to do is come up here and delete this firebase rc we're also going to delete firebase.json firestore indexes and firestore rules next we're going to head over to firebase.google.com go ahead and create an account if you don't already have one and then click go to console we're going to add a new project and we're just going to call this fir funk data val and i'm going to click continue i'm not going to enable google analytics and once it's done creating the project i will be right back and now that the project's been created successfully we're going to go ahead and click on cloud firestore here in the left-hand menu and we're going to click create database we're going to start it in test mode now i would not recommend this for a production application but in terms of our tutorial it's going to be fine make sure you brush up on firestore rules before you would release a production application because as it stands right now this will allow anyone to read and write to this database we're going to click next we'll just choose the us central location hit enable and once it's done provisioning the cloud firestore i will be right back okay so now that cloud firestore has been provisioned successfully what we're going to do is install the firebase cli so i'm going to open up my terminal again and i'm going to run the following command npm install dash g for global firebase dash tools now if you're on a mac you'll have to put sudo in front of this and type in your password but on a windows machine it should work just fine i already have installed so i'm not going to run this command just going to go ahead and back this out but go ahead and pause the video here and once it's installed come back and we're going to have to run another command and that is firebase login now i'm already logged in and it recognizes me here but if you are not logged in it's going to go ahead and open a browser window and prompt you to log in so that the cli is synced with your firebase account and now the firebase cli has been synced with our account i've gone ahead and opened up the project again in visual studio code and we're going to open up a new terminal and i'm going to run the following command firebase init it's going to ask us which firebase features we want to add to this project and we're just going to check functions by hitting the space bar and then hitting enter we're going to use an existing project and we're just going to go ahead and grab that project that we created earlier out of this list and hit enter what language we're going to be using at javascript do we want to use eslint i'm going to say yes now a lot of files already exist because like i said earlier this is an existing project so we are not going to overwrite the package.json we don't want to overwrite the eslint or our index.js we're not going to overwrite the git ignore do we want to install dependencies now i'm going to hit y for yes and hit enter and now firebase has been successfully initialized in our project and we can see we have our new firebase rc and our firebase json and if we go ahead and look in this functions folder that was created by the firebase cli we see we have an independent project in here it has its own node modules and package.json and inside of the index.js is where our code actually lives now if you want a detailed explanation of what this code is doing go ahead and watch the original video that i will link in the description now to use a rest api with firebase functions we need to import the express package this will give you the concept of a get post put delete and all the other endpoints that come along with a rest api now since we're using the express framework we can go ahead and tap into a ton of different plugins that we can use that will make a lot of different things easier but in terms of this video we're going to be talking about validation and we are going to be using the express validator plugin so i'll leave a link to this in the description and what we have here is just a package that we're going to go ahead and install using npm and if we look at some basic usage we're going to pull the body and validation result out of this package and on our post request we will put some middleware in here that's going to check the different properties that we're going to be passing in and using some functions that are supplied by expressvalidator or validator.js to validate the data that we're passing in now if we go look at the validation chain api and inside of here you can look at the standard validators and we click here you can see that there are a ton of different validators that are supplied by validator.js that is going to make the validation of our data extremely easy and extremely quick so let's go ahead and head back to the getting started we're going to copy this command we're going to head back to our project we're going to see the entity functions folder and then we're going to run that command now that it's been installed we can go back to their documentation go to this basic usage we'll copy this line right here where we're pulling out the body and validation result we'll go to our index.js and right underneath our express app we'll go ahead and just import that now as our api stands right now the only endpoint that we're going to be passing in data is the post request where we create the user so what i've done is i've gone ahead and created a text document and we're going to be adding these validations to a user creation so we'll have email it will be required and we'll verify that it's a valid email first and last name will be required we will pass in an age it'll be required and it must be an integer we'll pass in a password it'll be required with a min length of six characters a user type and we'll make it so that it either has to be admin or customer and a language that is optional but if it is added it must be javascript python or c sharp so i'm gonna do is just pin this to the side of the screen and pin this over here we'll make this a little bit smaller so that way we can see what's going on here and then if we look at the express validator documentation you'll see that on this post request we're going to pass in an array right here and it acts as middleware now once it gets down into our function body we can call this validation request that we'll go ahead and validate all these properties and then if we have any errors we're going to go ahead and return a 400 and an array of all the errors that we have so let's go ahead and minimize this and right above our post api endpoint i'm going to create an array i'm going to call it user creation validators and inside of here is where we will stick all of our validators the first validator is going to be on email and it's required and we're going to check that it is a valid email so we're going to say body email dot not empty as it's required and then we'll chain another validator called is email next we'll go to the body and we'll verify the first name and it is just required so we'll just say not empty then last name and this is also just required so we're going to check that it's not empty next we're going to do age and we say that it is required so we're going to do not empty and we also want to check that it is an integer so we're going to chain another validator on here and we're going to say is int then we're going to do the password so say password not empty as it's required and then we're going to do is length we're going to pass an object in here and we're going to say min [Music] 5. so it's required and it must be five and we actually said it must be six characters long so we'll do a min of six then we're going to do a user type so we'll say body user type and we said for this one that it is required so not empty and then it must be one of two user types it's either got to be an admin or a customer so we're going to say dot is in we're going to pass it in array and inside of this array we'll say admin or customer so what that's doing is checking that it's not empty that it's required and that if we do pass it in it either has to be admin or customer next we're going to do the language and i've got to wrap this in quotes and we're going to say that this one is optional but if it is passed in we're going to say is in we're going to pass an array again and it either has to be javascript python or c sharp now that we have all of our validators we can just go ahead and copy this and add this as middleware so we'll put it right between the routes and the actual function for our endpoint to use these validators right above the const user we're going to say const errors set that equal to validation result and pass in the request and then we're going to say if exclamation point errors dots dot is empty so if we have any errors we're going to drop down into this if block we're going to return res dot status and return a 400 we're going to append some json onto this and pass it errors and do our errors dot array to convert it to an array i'm gonna hit alt shift f to format everything i'm gonna go ahead and save we're going to come down here and we're to run the following command in the terminal firebase deploy dash dash only functions and once it's done deploying the functions i will be right back okay so as we can see our functions deployed successfully so we're going to go ahead and open up firebase and i've clicked on the functions tab right here go ahead and ignore this it should use the latest version of node this is an old project but anyways we see we have our endpoints of hello world and user and we have this url here that we can hit to make our request to our user endpoints so i'm going to go ahead and copy this out now i'm going to open up a program called postman and i will leave a link to this in the description it's how you test api endpoints i'm going to open a new tab in here now the endpoint that we put our validations on is the post endpoint of user so i'm going to go to post i'm going to paste in the url and if we don't pass a request body at all we should get all of the errors so i'm going to go ahead and hit that and we see we get our errors back so we get two invalid values for email and basically what that means is one is for the required and another one is check if it's email since we required first and last name it's also in here as an error age is error and we don't require it and it's not an integer so we're going to get 2 on that we have password which is required and also that it it's not min length it didn't meet the min length validation we have the user type for both because they are required and they also do not meet that now language is not throwing an error because it is an optional field so let's go ahead and test this with a valid body so what i'm going to do is i'm going to click on body raw we're going to select json and let's go ahead and build out our body for this so we'll wrap this in curly braces and we're going to say email and we'll just say test at test.com we're going to pass in a password and we'll just do password one two three and i misspelled password we have a first name we'll do the or we'll just do diligent last name dev we'll pass in an age and i'm 34. uh what else did we have we had user type and we'll pass in admin i can't remember what the other fields are so let's have the api return to me what i'm missing so we'll go ahead and pass that in and that must have been everything that was required because we got a 201 created so let's head back to firebase let's go to our real-time database or i'm sorry cloud firestore now we have something in the users collection and all of the information that we passed in so let's go ahead and manipulate some of this and see what kind of errors we get back so we'll just go ahead and delete this off i'm going to hit send and we got an error because of this right there so i'm going to go ahead and hit send again and what we're seeing here is that our user type is coming back as invalid values so i'm just going to go ahead and take that off and let's put the comma back up here and let's go ahead and manipulate age and pass something in that's not an integer and you'll see we get an error it gives us the value back so this invalid prim age location is in the body so we will put this back let's pass in a bad email we see we get a an error back that the pram email had an invalid value let's go ahead and pass in an invalid language so we'll say language and we'll pass css this should fail because even though this is an optional parameter it is not one of the ones that we specified is allowable so it went ahead and failed so let's go ahead and change this to javascript pass it in and we're going to see that we got a new user and we passed in javascript as the language now if we go ahead and remove the body again and we go ahead and send it you'll see that we get all of our errors again and you'll see that these errors are not very descriptive and it might be very confusing to the front-end developer if you're working with a front-end and a back-end developer that they're getting two email messages here that they're invalid values so let's set them up to something a little bit more descriptive so that when our front end developer is working on our application and they send this they're not just getting invalid values so what we're going to do is we're going to go back to our project and on this email right here if it hits this not empty so this is our required we're going to say with message and we're going to pass it email is required and then on our email we can do the same thing we can say with message and we can say email is invalid so now we can pass custom messages back so that our front-end developer will have an easier time figuring out exactly what is invalid here so what i'm going to do is i'm going to go ahead and deploy these functions again and i will be right back after they are finished so the function was deployed successfully and i went ahead and hit send but we'll do it again just to show you and we see now we're getting some very specific messages back from our validators and so instead of having two invalid values here we see that email is required and that the email is invalid we could also apply this to age since we have two separate error messages here and also on the password so you see this could really help out a front-end developer and give them a specific error message so that they could fix what they're passing to the back end so as you can see the expressvalidator plug-in allows us to implement data validation and keep our data integrity in our database very easily now if you got any value out of this i'd really appreciate it if you hit that like and subscribe button if you have any comments questions or concerns go ahead and drop a line in the comment section below i try to answer those as frequently as i can and until next time happy coding

Channel: Diligent Dev

Views: 2,502

Keywords: firebase functions node js, firebase functions firestore, firebase functions javascript, firebase functions express, firebase functions rest api, firebase functions, firebase, data validation, api data validation, cloud functions firebase, data integrity, data security, firebase cloud functions tutorial, cloud functions firebase tutorial, firebase cloud functions node js

Id: oiS6XRynE5M

Length: 19min 49sec (1189 seconds)

Published: Sat Sep 19 2020