00:00 All right, now let's talk about server-side validation. Now, the first thing we need to do is have a place to actually send this data to. So let's go create an API route in our project. Now, I'm going to use api register and then route.tsx.

00:17 That means that this function is handling any requests to /api/register. And it's route.tsx instead of page.tsx because we want the lower level primitives. We want to be able to handle things like POST and GET using just our code.

00:34 We don't actually want to return any HTML or do any of that React stuff. We just want to handle the raw request. So let's bring in next request from the next response from the next server. And now we need to define a route handler. Now, from this route handler, we want to handle POST.

00:51 We want to POST to this endpoint. And what we're going to POST is a JSON payload, first and foremost. So we're going to get that as the request. And we're going to need to crack that request and get the JSON payload. To do that, we use await request JSON. That gives us back our data.

01:08 So since we trust the client implicitly, we're just going to add that to the database. And we're going to reply that the user is registered. Of course, because we would never call this if we didn't have valid data, right? Well, of course, wrong. We want to make sure that we have validation on both the client and the server side.

01:26 And we want those validations to match. So let's bring in the schema and then use it to validate this data. To do that, we bring in schema from registration schema. And then we use that schema and the safe parse function that was created by Zod to parse that data safely.

01:43 Now, safe just means it's not going to throw any exceptions if that data is invalid. So data could be anything. It could be null. It could be arrays. It could be whatever. But it's going to make sure that that data matches whatever our schema says. Now, coming out of parse are a couple of different values that we want. Success.

02:00 That tells us whether it was successful or not, whether we actually matched the schema. If we did, then we have .data. That is the cleaned up data. Otherwise, we get a set of errors. So let's go and add some conditionals to look at that. So now that we have that parsed response, let's go and take out this code

02:16 and replace it with a conditional that looks to see whether we were successful or not. And if we were successful, then we will return back the fact that the user is registered, as well as the data. And for now, if it's successful, then we will return that we have invalid data and give back the error. So we know which fields are wrong.

02:33 OK, now let's try this out on the client. To do that, I'm going to replace our console log with a fetch to our API register endpoint. We're going to use a method of post that matches the async function that we have here, that have the same verb. Then we're going to tell it that we have a content type of application JSON. That means that it is a JSON post.

02:53 And then we're going to send it the data. So we're going to stringify that data as the body of the request. And then when we get the response back, we're going to parse that JSON. It's always going to be JSON, good or bad. And then we're going to console log that out. So let's take a look and see if it worked. All right, we've got our form running in our console. It's time to hit submit. Nothing good there.

03:12 So let's add in some good data. Hit submit. And now we get a response back that we are registered, user registered. And we have our user data. So if I were to go and add some whitespace in here, we would see that it would also trim that whitespace out for us. So everything is both cleaned and also validated. Fantastic.

03:30 But how do we know if it's actually really applying that validation? Because, I mean, it just could pass. So let's go and see if there is a way to actually test it. Can't test it from the UI because we can't get around the client-side validation. So let's go to our Visual Studio code. Bring up another terminal.

03:49 And then from here, run a curl against the exact same endpoint, API register. We'll give it no data. So it's going to be invalid. And then a content type of application, JSON, to show that it's a JSON payload. Return. And now we get a message back from the server saying invalid data, just like we expected. And we've got the error.

04:08 And it tells us all of the errors that are there. In this case, we failed all of the fields. But if you are a end user of this API endpoint, that's really nice. Because it actually tells you which fields are missing.

04:22 And that, as a API user, a legitimate user, that is fantastic information for me. So now we've implemented the first of our four different mechanisms for connecting our client to our server. The next one is going to be an API route as well. But instead of sending JSON data, we're going to send form data.

04:40 And I want you to take a try at this first. There's some helpful information in the instructions. And then when you are through, you can go see how I implemented this in the next video.