Allow updating submission values client-side before being passed to form action

[ryanwalters]

I think allowing updates to submission values client-side before being passed to form action could be a useful feature.

My use case involves performing SRP authentication client side before passing the client side generated tokens to the server action for additional processing and storage. The flow looks something like this:

1. User inputs username and password and hits submit
2. This submission is intercepted client side, generates a password claim signature
3. The password claim signature is added to the form data, password is removed
4. Server action is invoked with username and password claim signature

I had experimented with using the onSubmit() option, but that appeared to be invoked in parallel to the server action rather than sequentially. Here's an example of what I tried:

const [{ errors, id, onSubmit, status, value }, fields] = useForm({
  lastResult: state.submission,
  defaultValue: {
    username: undefined,
    password: undefined,
    passwordClaimSignature: undefined,
  },
  onValidate() { /* do validation */ },
  async onSubmit(event, { formData }) {
    const passwordClaimSignature = await generatePasswordClaimSignature(
      value.username,
      value.password,
    );

    formData.set('passwordClaimSignature', passwordClaimSignature);
    formData.delete('password');

    return formData;
  },
});

I'm sure someone can come up with a much more elegant api for this kind of thing, but hopefully this gives a general idea of what we're trying to accomplish. I'm also open to other suggestions if there are already recommended approaches for performing this kind of functionality!

[edmundhung]

This is likely outside of Conform's scope. Conform intercepts the submit event for validation, but the actual submission is usually handled by either the <Form /> component from React Router or the action prop in the <form /> element in NextJS. Conform has no control over that part.

There are a couple of ways to accomplish this depending on your setup.

If you're using NextJS, you can wrap the action with a custom function on the action prop:

const [lastResult, action] = useActionState(myAction, null);
const [form, fields] = useForm({
  // ...
});
return (
  <form
    {...form.props}
    action={async (formData) => {
      const passwordClaimSignature = await generatePasswordClaimSignature(
        formData.get('username'),
        formData.get('password'),
      );
      formData.set('passwordClaimSignature', passwordClaimSignature);
      formData.delete('password');
      action(formData);
    }}
  >
    {/* ... */}
  </form>
);

Alternatively, you can use onSubmit to prevent the default submission and handle it yourself. This works with any framework:

const [form, fields] = useForm({
  // ...
  async onSubmit(event, { formData }) {
    event.preventDefault();
    const passwordClaimSignature = await generatePasswordClaimSignature(
      formData.get('username'),
      formData.get('password'),
    );
    formData.set('passwordClaimSignature', passwordClaimSignature);
    formData.delete('password');

    // Submit using your framework's mechanism, e.g.:
    // - submit(formData) with useSubmit() in React Router
    // - startTransition(() => action(formData)) with useActionState
    // - fetch() for a custom endpoint
  },
});

In both cases, Conform's validation runs first. If validation fails, neither the action function nor onSubmit will be called.

Maybe we could expand the scope for a tighter integration in the future. But at the moment I think this should be fairly straightforward to handle yourself.

[ryanwalters]

Thanks for the detailed explanation!