Lesson Summary: Server-Side Validation

In this lesson, we're going to learn to validate the entry on the server side. So, if you don't type anything and you click right, from the client perspective, we are going to get a narrow message. You need to type at least one character. Now, client side validation is never tamper proof. That means anybody on the client side can manage to bypass it. So, we also need to have validation on the server side. We must have it also on the server side. Client side validation is very weak. Anybody can bypass it. So, let's go to the code for server side. Let's assume the user sent an empty, the text of the entry with no characters, an empty string. So, how can we validate that? Well, you go to the route that handles the creation of the entry. And that's here on server, in server.js line 30. Here's the handler function and we see it's creating the new entry and pushing to the array and memory that we have right now. Now, we cannot push if new entry dot text, in this case the rack but body dot text is empty. So, we are going to send back an error to the user and this will be this operation will not be permitted. Okay, so let's break a line here. Go line 31. So, we got that new entry. Well, let's see what I can do here, body dot text and so and so. So, let's do the following. Well, I could do after the object here or I could do before. The thing I'm thinking right now is because of this ID right now, we don't have a database. So, usually we wouldn't set the ID here. We only have the ID after the database operation succeeded. So, at this point we would not have an ID. So, let's let's do the following. Let's try afterward. Let's make believe the ID is not here. Okay, and I just messed up my window. Make believe the ID is not set yet. Because ideally it wouldn't be set it would be here for example new entry dot ID goes whatever and this would actually be done by the database. Let's let's actually do that. I'm going to do that here just to simulate what we would actually have later with the database. So, you have the client side sending some body and then we try to build try first to get the all the accepted properties in this case text only and that could be other ones after that is when you can do the validation. So, we got that new entry build of course not saved yet. So, let's do it. So, we can check new entry dot text. Well, what values could it be? Well, first if the user doesn't give anything it could be undefined or it could even be no if the user explicitly that did that or it could be finally empty string. Right all the invalid cases. Invalid cases. We got those three, right? Well, I can check if the new entry text is invalid. I can do something right. Now, I want to check what first how can I check if it's even defined? Well, this one will suffice as is actually because undefined is a fallacy what's called a fallacy value. No, it's called a fallacy value and empty strings of fallacy value in JavaScript. Okay, to illustrate that I could go here to the browser. On Soul tab and the dev tools. And I can say, for example, if undefined, I'm gonna console log. Yes, this will not work. This return value is from the actual way statement. It's nothing to do with nothing was executed. That means yes was not shown to the screen because this value, the condition was false undefined is false. So that becomes false. Same thing goes for no, right? It's also fallacy value. And same thing goes for empty string. All right. And you can verify with weak comparison to double equals that this is false. Defined is not what I meant. Anyway, let's go on. So this will suffice. But if you want to be explicit, you can also say, okay, if the entry tax is undefined, or if the new entry tax is equal to no, or new entry tax equal to empty string, this is a very explicit way of doing it. Okay, you can do this. So if the first check is it undefined, right? Or if it is not undefined, okay, it is something else. Is it no? Or the double pipe means or right? So it's if this or that or that. So it's gonna check all these three conditions, the first condition that matches that becomes true, it will automatically take that and execute everything inside. It will not care about everything afterwards. So if it was, if it was undefined, and this will be true, it would ignore every single entry after the R because it already knows it's undefined, it's invalid, already executes lie 41 without even bothering to look at the remaining of the line. Okay, if you want to simplify, you could do like this. For example, you can do double equal no, if you do a double equal no, that means it's either no, or undefined. So if it's not undefined, invalid, and you enter the text, find or can also check the length up to you. Or you can just leave and do like this. That's another way of doing it. Because if this value were undefined, it would take the inverse, right, the invert, falsely value becomes true D. So this, this is true and execute everything inside. Same goes for our no and empty string. Anyway, one thing you got to be careful about this one is if you actually intended the value to accept any of these three values. So you want to be careful about that. So perhaps I would go back to what I had before. Take care of actually Emily, these other values. Anyway, let's finally do this after that discussion. So if it's invalid, we don't want to add a new entry, right? We don't want to do any of this. So first, we're going to send what's called an invalid response. Well, there are several HTTP statuses we could use, right? Usually when you get a successful, that's 200k. And you write you look at the network tab, you got a status here, tab 200k. This is not going to be 200k. Okay. So the user sent something that's okay, we got processed. I'm assuming it's a valid JSON and everything. But only that the actual field itself is required. So the user didn't really do anything wrong other than not typing what should have been typed. But besides the formatting of the request and everything was fine. So we can use unprocessable entry. That's 422. Okay, so I'm going to do res.status 422. And I'm going to send some error message, for example. Maybe I could say message or whatever error up to you to devise your own way of handling these things. I'm going to say, entry text is required. And you have to be very careful here, you have to return. Because if you don't return after this line, it's going to keep executing the code, even though you set a response to be sent. So don't forget to return. So the code does not execute everything afterward. Be careful. So you need that. Some people like to put it here before the rest. I'm not in that league, I like to do it afterwards. So it's up to you. Let's say this and go back. Let's now we have to test this now the front end. It already has the validation. How can we bypass it? Well, I could look at the source and do some stuff and try to bypass the code here and everything. Another way of using some sort of client that can make client program that can make HTTP requests easily. It's a program that's convenient for us developers to make those requests and to debug and test API's. One of those programs called postman. And it's the one I'm going to use here. Mind you, there are many kinds of these programs. You can even do this from the command line using the command crawl, for example, it's up to you to use whatever you want. I'm going to demonstrate this debugging with postman. So I have already downloaded it. And I'm going to click here, skip signing in. And it's going to take me to this. I'm going to do some stuff here. So I don't care about this right now. You want to So I want to click to get a new tab. You can see we can make the request versus the verb. You can choose get or post. That's the one focusing right now. So if we want to create a new entry that's post, and you give the URL in this case is going to be HTTP colon slash slash local host, I think us 3000 right 3000 and slash entries and point. Now to give the body to this request, right, you have to go to the body tab here. Choose since we're dealing with Jason, let's do raw. And instead of text to Jason. And then here in the text box, you type the Jason open braces. Now the first key is going to be text under double quotes, make sure there's other double quotes, the text on. Okay, let's first try without anything at all actually. Let's try something that works. This works and then we're going to do the invalid cases. Okay, this is a new entry that we want to add. Mind you, our API doesn't have any kind of authorization. So with anybody can just do whatever right so that's why this client can just go there and do whatever. If you had some sort of authorization, you would go under authorization perhaps and do something or even change the header and add an authorization header here. But we're dealing with very simple stuff starting from scratch. So that's not in the scope right now. Let's focus on the request body here. We got that. Now I'm going to send. Let me watch first the terminal here. Click send. And I had an error. What happened here? I forgot the zero local is 3000 not 300. Okay, so if you don't have any logging in the server, I didn't see anything but actually I got some 200 okay. And ideas for this works. Let's check the client through the browser. Let's go to the browser. And I'm going to refresh. This works is here now that work right now let's try. First let's try the case where the user does not send any text key at all just an empty body. Let's try. We can send. Now you see the status now is 422 unprocessable unprocessable entry entity. And we got that response we created error entry text is required. So that worked. Let's try the case where we actually pass no as a text value. This also was validated for 22 unprocessable entity. Now let's try the empty text. Once again validated. Add one letter at least. It works. So go here to the client and it's there a. So going back to the code. Let's look at what we did. So we added validation to check if the text is has at least one character right effectively. That's what this does. The way we did that was right after we parsed the body right that is we just build a new entry that's not yet saved. We check is the text no first is it undefined. Is it no or is it empty string if any of those cases match. We do a res dot status 422 this will set the status code and you send dot send to send an actual JSON object with the key error and the message here that the client can use to show this actual error in the client side the web page. And don't forget to add return here otherwise the other parts of the code were execute that's not what you want. All right. So for this lesson that's it. And I hope to see you next time.