remix-yup-validation-loader-gist.ts

const badRequest = (data: LoginActionData) => json(data, { status: 400 });

const loginSchema = yup.object().shape({
  email: yup
    .string()
    .email("Email must be a valid email")
    .required("Email is required"),
  password: yup.string().required("Password is required"),
});

export const action: ActionFunction = async ({ request }) => {
  const form = await request.formData();
  const email = form.get("email");
  const password = form.get("password");
  if (typeof email !== "string" || typeof password !== "string") {
    return badRequest({
      formError: `Form not submitted correctly.`,
    });
  }

  //validation
  const fieldErrors = { email: "", password: "" };
  try {
    await loginSchema.validate(
      {
        email,
        password,
      },
      { abortEarly: false }
    );
  } catch (err) {
    err.inner.forEach((error) => {
      if (error.path) {
        fieldErrors[error.path] = error.message;
      }
    });
  }

  const fields = { email, password };
  if (Object.values(fieldErrors).some(Boolean)) {
    return badRequest({ fieldErrors, fields });
  }

  //success case
  const { error, user, session } = await auth.signIn(fields);
  console.log("Error", error, user, session);
  if (error) {
    return badRequest({
      formError: error.message,
    });
  }

  return redirect(`/`);
};