What to do when submit on a form MUST call a client-side function?

[JUNIORCO]

// sign-in/form.tsx
export const SignInForm = () => {
  const { revalidate } = useRevalidator();
  const { supabaseClient } = useSupabaseContext();
  const fetcher = useFetcher();

  const signIn = async (): Promise<void> => {
    const signInRes = await supabaseClient.auth.signInWithPassword({
      email: signInForm.email,
      password: signInForm.password,
    });

    if (signInRes.error) {
      return;
    }

    revalidate();
  };

  return (
    <ValidatedForm validator={signInValidator} method="post" fetcher={fetcher}>
      <FormInput name="email" label="Email" />
      <FormInput name="password" label="Password" />
      <FormSubmitButton />
    </ValidatedForm>
  );
};

In the above case, when the user clicks on submit, I must call the signUp function on the client. How do I handle this case, if it is even supported? Or should I just stick to zod-form-data when I need to call the client on submit?

[airjp73]

Hi!

You can use onSubmit as you normally would, but with async superpowers.

return (
  <ValidatedForm
    validator={signInValidator}
    onSubmit={async (validatedData, event) => {
      event.preventDefault();
      await signIn(validatedData);
    }}
  >
    <FormInput name="email" label="Email" />
    <FormInput name="password" label="Password" />
    <FormSubmitButton />
  </ValidatedForm>
  );