Server-side vs client-side validation
Which approach is better when working with Tanstack Start and Tanstack Form, is it server-side validation like the link bellow or client-side validation for authentication using Better Auth?
https://tanstack.com/form/latest/docs/framework/react/guides/ssr
In better auth docs, they recommend using auth client with Tanstack Start:
We recommend using the client SDK or authClient to handle authentication, rather than server actions with auth.api
while with Next.js, they recommend using server actions and RSC:
The api object exported from the auth instance contains all the actions that you can perform on the server. Every endpoint made inside Better Auth is a invocable as a function. Including plugins endpoints.
How should I go with it?
React Meta-Framework Usage | TanStack Form React Docs
TanStack Form is compatible with React out of the box, supporting SSR and being framework-agnostic. However, specific configurations are necessary, according to your chosen framework. Today we support...
5 Replies
absent-sapphire•4w ago
what exactly are you trying to achieve here? validation or authentication?
or protecting form submissions with auth?
We recommend using the client SDK or authClient to handle authentication, rather than server actions with auth.apithis part in their docs lacks nuance - I think they're only referring to operations that perform mutations like signing in/out, changing password, etc. There are a lot of valid cases for "handling auth server-side" like fetching the session via server functions in your case i assume you want to protect form submissions with auth. so that should be done server-side
stormy-goldOP•4w ago
I have this sign in form:
const router = useRouter();
const search = useSearch({
from: "/signin",
select: (search) => search.redirect,
});
const form = useAppForm({
...signInFormOpts,
validators: {
onChange: signInFormSchema,
},
onSubmit: async ({ value }) => {
try {
await authClient.signIn.email({
email: value.email,
password: value.password,
});
await router.invalidate();
await router.navigate({
to: search || fallback,
replace: true,
});
// ...
<form
className="flex flex-col gap-4"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
>
// rest of the code
my question is: should I use server functions and form's action like the exaxmple in tanstack form with ssr support?
vicious-gold•4w ago
Better Auth api is still server side and validating your login, so i dont think ( in particular case ) that you should worry about it. You can just have a zod/we schema to have the errors before hiting the server. Anything else i would recommend like Alren said. Have a zod schema that is shared between client and server and you should validate both always ( never trust the user input ) :p
stormy-goldOP•4w ago
does the better auth recommendation for using their auth client comes from tanstack start not yet implementing react server components like in their docs?
When might I not want to use it?
TanStack Start is not for you if:
Your goal is a server-rendered site with zero JS or minimal client-side interactivity
You're looking for a React-Server-Component-first framework. (We'll support RSCs soon in our own awesome flavor!)
vicious-gold•4w ago
Well thats mostly because better auth exposes an api and not the function directly i think. so you would end up doing 2 requests for a login : one to your server and then another one from your server to your own server :p