Form Validation, Zod and Server Actions

[pkellner]

I'm new to react-hook-form and am a little confused on when (and why) to use Zod and how that integrates with Server Actions (nextJS 14). I had that that Zod does validation to insure that the data you POST to the server action is in a correct format. What confuses me is that I thought that is what react-hook-form does so why do it twice (and how to make sure they are always doing exactly the same validation?).

Also, it makes sense to me to verify the payload with zod in the Server Action. Assuming I got that right, is there a way when using react-hook-form not to have to define the schema and the validation rules separately on the client, and then again on the server?

Sorry if I missed the NextJS 14 example. I looked but did not find one,

Thanks, -Peter Kellner

[craigmcc]

Interesting question.

I look at it this way in my own apps:

• Do my server actions get called by anyone else besides my client-side forms that have already done the required validations (in particular, that are there no API routes that also call the same server actions, without going through our client side checks)?
• Do I trust that NextJS has sufficiently protected the way that client->server calls to server actions are authenticated and authorized, so that I don't need to worry about potential attacks with invalid data?
• Will my database-level checks (null/not-null checks, foreign key constraints, etc.) catch the worst case problems even if the previous concerns might not be met?

If you are satisfied with no/yes/yes answers to the above questions, you probably don't need to do the "double validation" thing. If not (and absolutely not if you have API routes that call the same server actions), you really will want to validate them at the server level. I would tend to implement this in the API route handler itself (before the server action is called), symmetric with the way we ask RHF to do a client side validation before the server action is ever called. But that's more doing something that fits best in your overall architecture than a hard and fast rule.

If you decide you do need double validation, you should also explore factoring your Zod schemas (or whatever) into separate modules that can be reused on both sides, to reduce code duplication problems.

[pkellner]

Thanks. I think I understand how u can share the zod schema between client component and server action. Not sure about the duplicate validation though. Is there no way to have react hooks form pick up the validations like required, min and max length from zod schema so I do t need to keep them in sync myself?

[pkellner]

To be extra clear, I've not used Zot or react-hooks-form yet in anything but local experiments. I'm really trying to understand what everyone else here probably knows, and is obvious.

Regarding Server Actions and nextjs route api, I know both very well. I'm confident that each server action endpoint I create will only be used once by the a single component (could be either server or client component). Any code re-use Wii be in their server action itself calling common shared functions.

I appreciate any suggestions here. It's very new to me. So far, I'm very impressed with this package and its design.

[elie222]

"that client->server calls to server actions are authenticated and authorized"

Next.js doesn't handle auth.

"called by anyone else besides my client-side forms"

You can't stop other clients making a call to the server.

[elie222]

Also: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#server-side-validation-and-error-handling

[pkellner]

I've found this video this morning that I believe now completely solves my issue. It uses the validation from Zod to do input validation so I don't need to duplicate my validation anyplace as long as I pull out my zod schema into a sharable asset. It also does require using the @hookform/resolver/zod package.

https://youtu.be/FXWD_etMJWA?list=PLeO8M-2wYaaV5vh2lRWV7qt_-Io8agaf-&t=2421