Server-side vs client-side validation

[shell turret]

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?

[safe copper]

what exactly are you trying to achieve here? validation or authentication?

or protecting form submissions with auth?

[safe copper]

We recommend using the client SDK or authClient to handle authentication, rather than server actions with auth.api
this 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

[shell turret]

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?

[lethal tundra]

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

[shell turret]

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!)