With remix-hook-form

[otatar]

Hi there,

simple login form with FormStrategy and React-Hook-Form. This is loader:

export const action = async ({ request }: DataFunctionArgs) => {
  const {
    errors,
    data,
    receivedValues: defaultValues,
  } = await getValidatedFormData<FormData>(request, resolver);
  
  if (errors) {
    return json({ errors, defaultValues });
  }

  return await authenticator.authenticate("form", request, {
    successRedirect: "/",
    failureRedirect: "/login",
    context: { data },
  });
};

This is the error:

Looks like we access the body of request twice...where am i wrong?

[sergiodxa]

getValidatedFormData is reading the body to validate it, and Remix Auth is doing it again, you should clone the request when validating it, or validate inside the strategy callback.

[otatar]

Hi Sergio. Thank you for your answer. Well I am already doing that, passing cloned request object. But according to this: https://github.com/sergiodxa/remix-auth-form#passing-a-pre-read-formdata-object I we pass formData as part of optional context, we don't need to clone request...

[sergiodxa]

The context property must be formData, not just data.

Also is that data returned by getValidatedFormData a FormData instance? or a plain object? You need to pass a FormData object.

I recommend you to clone the request here await getValidatedFormData<FormData>(request.clone(), resolver);.

[otatar]

"I recommend you to clone the request here await getValidatedFormData(request.clone(), resolver);." Am already doing that.

Well it seems that data is plain object, not FormData, and that is the reason I guess.

Thank you

[sergiodxa]

You're not doing that, this is your code from the original comment await getValidatedFormData<FormData>(request, resolver), I updated it to add request.clone() instead of just request.

I still recommend you to clone it or move the validation to inside the strategy callback.