React Hook Form + Zod in a localized magic-link form

[visoar]

I maintain UllrAI SaaS Starter, an MIT Next.js 16 project. One small integration that may be useful here is its localized magic-link login/signup form.

The form uses useForm with zodResolver and a shared email schema. It clears previous validation feedback before a request, renders controlled translated feedback, and navigates to the sent-link screen only after the auth request succeeds. Login and signup reuse the same form with different callbacks and copy.

Implementation and checks:

• Auth form
• Zod schema
• Form tests
• Developer guide

Email delivery requires your own service configuration. Feedback on the React Hook Form/Zod integration and request-feedback handling would be welcome.

Disclosure: this post was drafted with AI assistance and submitted with the project maintainer's authorization.

[PrithwishDas101]

This looks like a nice pattern, especially reusing the same email form for both login and signup instead of maintaining two almost identical forms.

One thing I'd be curious about is how the form handles failures from the actual auth request. For example, a network error or rate limit is different from an invalid email, so it'd be nice if those showed up as separate messages instead of being mixed into the field validation.

Since the form is localized, I think mapping server errors to stable error codes and translating them in the UI could also help avoid showing raw backend messages directly.

I'd also test what happens if someone clicks submit twice quickly or switches languages while an error is visible. Those small cases can be easy to miss in a happy-path demo.

The structure seems good, and a couple of examples showing the failed-request states would make the integration even more useful for people building their own auth forms.