returning custom validation errors

[tconroy]

I'm trying to figure out how to return custom authentication/validation errors to users with remix-auth.

If the user provides invalid credentials (i.e malformed email, too short of password), I want to return an error object. I'm using remix-validated-form and zod package for validation.

const loginFormValidator = withZod(
  z.object({
    email: z
      .string()
      .nonempty("email is required")
      .email("Must be a valid email"),
    password: z
      .string()
      .nonempty("password is required")
      .min(8, "Password must be at least 8 characters long"),
  })
);

  authenticator.use(
    new FormStrategy(async ({ form }) => {
      const {
        error,
        data,
      } = await loginFormValidator.validate(form);

      if (error) {
        // what do I do here? `throw new AuthorizationError()`? call `invariant()`?
      }
  
      const user = await userModel.verifyLogin(data!.email, data!.password);

      invariant(user, 'Provided email or password was incorrect.');
      
      return user;
    })
  );

The other way I thought was doing it in the action, however that feels not ideal (we'd already make a call to our DB with the unvalidated payload by this point).

// routes/auth/$provider.tsx
export const action: ActionFunction = async ({ request, params }) => {
  invariant(params.provider, "Must specify a provider.");

  try {
    await authenticator.authenticate(params.provider, request, {
      throwOnError: true,
    });
  } catch (e) {
    // do I validate here? isn't this after we've hit the DB?  How do we differentiate types (ie validation error vs authorization error)?
  }
};

[n1ghtmare]

I have the exact same scenario, what did you end up doing?

[OFranke]

@n1ghtmare @tconroy
I am doing a little bit of a workaround I think, but I couldn't solve it any other way.

const schema = zfd.formData({
  username: z
    .string({
      required_error: "Username is required",
      invalid_type_error: "Username must be a string",
    })
    .trim()
    .min(1),
  password: z
    .string({
      required_error: "Password is required",
      invalid_type_error: "Password must be a string",
    })
    .trim()
    .min(1),
});

export const loginValidator = withZod(schema);

export const action: ActionFunction = async ({ request }) => {
  const clonedRequest = request.clone();
  const formData = await clonedRequest.formData();

  const result = await loginValidator.validate(formData);

  if (result.error) {
    return validationError(result.error);
  }

  await authenticator.authenticate("form", request, {
    successRedirect: "/filiale",
  });
};

So the first thing I do is the form validation via remix-validated-form and then the remix-auth part. I came across an issue when accessing the form data two times (in action and in remix-auth), so I had to use request.clone. See some details here: remix-run/remix#3003

Hope that helps.