feat: make auth mode configurable

.frontend_env.example

@@ -19,3 +19,5 @@ NEXT_PUBLIC_CMS_URL=https://cms.quivr.app
 NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=<ignore-me-or-change-me>
 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<ignore-me-or-change-me>
 NEXT_PUBLIC_STRIPE_MANAGE_PLAN_URL=<ignore-me-or-change-me>
+
+NEXT_PUBLIC_AUTH_MODES=magic_link,password,google_sso

frontend/app/(auth)/login/components/EmailLogin/components/EmailInput.tsx

@@ -0,0 +1,30 @@
+import { Fragment } from "react";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import Field from "@/lib/components/ui/Field";
+import { emailPattern } from "@/lib/config/patterns";
+import { useAuthModes } from "@/lib/hooks/useAuthModes";
+
+import { EmailAuthContextType } from "../../../types";
+
+export const EmailInput = (): JSX.Element => {
+  const { register } = useFormContext<EmailAuthContextType>();
+  const { t } = useTranslation();
+  const { password, magicLink } = useAuthModes();
+  if (!password && !magicLink) {
+    return <Fragment />;
+  }
+
+  return (
+    <Field
+      {...register("email", {
+        required: true,
+        pattern: emailPattern,
+      })}
+      placeholder={t("email", { ns: "login" })}
+      label={t("email", { ns: "translation" })}
+      inputClassName="py-1 mt-1 mb-3"
+    />
+  );
+};

frontend/app/(auth)/login/components/EmailLogin/components/MagicLinkLogin/MaginLinkLogin.tsx

@@ -0,0 +1,31 @@
+import { Fragment } from "react";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { EmailAuthContextType } from "@/app/(auth)/login/types";
+import Button from "@/lib/components/ui/Button";
+import { useAuthModes } from "@/lib/hooks/useAuthModes";
+
+import { useMagicLinkLogin } from "./hooks/useMagicLinkLogin";
+
+export const MagicLinkLogin = (): JSX.Element => {
+  const { t } = useTranslation(["login", "translation"]);
+  const { magicLink } = useAuthModes();
+  const { handleMagicLinkLogin } = useMagicLinkLogin();
+  const { watch } = useFormContext<EmailAuthContextType>();
+
+  if (!magicLink) {
+    return <Fragment />;
+  }
+
+  return (
+    <Button
+      isLoading={watch("isMagicLinkSubmitting")}
+      className="bg-black text-white py-2 font-normal w-full"
+      type="submit"
+      onClick={() => void handleMagicLinkLogin()}
+    >
+      {t("magicLink", { ns: "login" })}
+    </Button>
+  );
+};

frontend/app/(auth)/login/components/MagicLinkLogin/hooks/useMagicLinkLogin.ts → frontend/app/(auth)/login/components/EmailLogin/components/MagicLinkLogin/hooks/useMagicLinkLogin.ts

@@ -1,32 +1,21 @@
-import { useForm } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
+import { EmailAuthContextType } from "@/app/(auth)/login/types";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { useToast } from "@/lib/hooks";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useMagicLinkLogin = () => {
   const { supabase } = useSupabase();
+  const { watch, setValue } = useFormContext<EmailAuthContextType>();
+
   const { t } = useTranslation("login");
   const { publish } = useToast();
 
-  const {
-    register,
-    watch,
-    setValue,
-    formState: { isSubmitSuccessful, isSubmitting },
-    handleSubmit,
-    reset,
-  } = useForm<{ email: string }>({
-    defaultValues: {
-      email: "",
-    },
-  });
-
   const email = watch("email");
 
-  const handleMagicLinkLogin = handleSubmit(async (_, ev) => {
-    ev?.preventDefault();
+  const handleMagicLinkLogin = async () => {
     if (email === "") {
       publish({
         variant: "danger",
@@ -35,32 +24,27 @@ export const useMagicLinkLogin = () => {
 
       return;
     }
-
+    setValue("isMagicLinkSubmitting", true);
     const { error } = await supabase.auth.signInWithOtp({
       email,
       options: {
-        emailRedirectTo: window.location.hostname, // current domain name. for eg localhost:3000, localhost:3001, https://...
+        emailRedirectTo: window.location.hostname,
       },
     });
+    setValue("isMagicLinkSubmitting", false);
+    setValue("isMagicLinkSubmitted", true);
 
     if (error) {
       publish({
         variant: "danger",
         text: error.message,
       });
 
-      throw error; // this error is caught by react-hook-form
+      throw error;
     }
-
-    setValue("email", "");
-  });
+  };
 
   return {
     handleMagicLinkLogin,
-    isSubmitting,
-    register,
-    handleSubmit,
-    isSubmitSuccessful,
-    reset,
   };
 };

frontend/app/(auth)/login/components/EmailLogin/components/PasswordLogin/PasswordLogin.tsx

@@ -0,0 +1,41 @@
+import { Fragment } from "react";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { EmailAuthContextType } from "@/app/(auth)/login/types";
+import Button from "@/lib/components/ui/Button";
+import Field from "@/lib/components/ui/Field";
+import { useAuthModes } from "@/lib/hooks/useAuthModes";
+
+import { usePasswordLogin } from "./hooks/usePasswordLogin";
+
+export const PasswordLogin = (): JSX.Element => {
+  const { t } = useTranslation(["login"]);
+  const { password } = useAuthModes();
+  const { handlePasswordLogin } = usePasswordLogin();
+  const { register, watch } = useFormContext<EmailAuthContextType>();
+
+  if (!password) {
+    return <Fragment />;
+  }
+
+  return (
+    <div>
+      <Field
+        {...register("password", { required: true })}
+        placeholder={t("password", { ns: "login" })}
+        label={t("password", { ns: "login" })}
+        inputClassName="py-1 mt-1 mb-3"
+        type="password"
+      />
+      <Button
+        isLoading={watch("isPasswordSubmitting")}
+        variant="secondary"
+        className="py-2 font-normal w-full mb-1"
+        onClick={() => void handlePasswordLogin()}
+      >
+        {t("login")}
+      </Button>
+    </div>
+  );
+};

frontend/app/(auth)/login/components/EmailLogin/components/PasswordLogin/hooks/usePasswordLogin.ts

@@ -0,0 +1,57 @@
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { EmailAuthContextType } from "@/app/(auth)/login/types";
+import { useSupabase } from "@/lib/context/SupabaseProvider";
+import { useToast } from "@/lib/hooks";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const usePasswordLogin = () => {
+  const { supabase } = useSupabase();
+  const { t } = useTranslation("login");
+  const { publish } = useToast();
+  const { watch, setValue } = useFormContext<EmailAuthContextType>();
+
+  const email = watch("email");
+  const password = watch("password");
+
+  const handlePasswordLogin = async () => {
+    if (email === "") {
+      publish({
+        variant: "danger",
+        text: t("errorMailMissed"),
+      });
+
+      return;
+    }
+
+    if (password === "") {
+      publish({
+        variant: "danger",
+        text: t("errorPasswordMissed"),
+      });
+
+      return;
+    }
+    setValue("isPasswordSubmitting", true);
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    setValue("isPasswordSubmitting", false);
+    setValue("isPasswordSubmitted", true);
+
+    if (error) {
+      publish({
+        variant: "danger",
+        text: error.message,
+      });
+
+      throw error; // this error is caught by react-hook-form
+    }
+  };
+
+  return {
+    handlePasswordLogin,
+  };
+};

frontend/app/(auth)/login/components/EmailLogin/index.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { Divider } from "@/lib/components/ui/Divider";
+import { useAuthModes } from "@/lib/hooks/useAuthModes";
+
+import { EmailInput } from "./components/EmailInput";
+import { MagicLinkLogin } from "./components/MagicLinkLogin/MaginLinkLogin";
+import { PasswordLogin } from "./components/PasswordLogin/PasswordLogin";
+import { EmailAuthContextType } from "../../types";
+
+export const EmailLogin = (): JSX.Element => {
+  const { reset } = useFormContext();
+  const { watch } = useFormContext<EmailAuthContextType>();
+
+  const { t } = useTranslation(["login", "translation"]);
+  const { password, magicLink } = useAuthModes();
+
+  if (watch("isMagicLinkSubmitted")) {
+    return (
+      <div className="text-center flex flex-col gap-4">
+        <p>
+          {t("check_your_email.part1", { ns: "login" })}{" "}
+          <span className="font-semibold">
+            {t("check_your_email.magic_link", { ns: "login" })}
+          </span>{" "}
+          {t("check_your_email.part2", { ns: "login" })}
+        </p>
+        <div>
+          <span>{t("cant_find", { ns: "login" })}</span>{" "}
+          <span
+            className="cursor-pointer underline"
+            onClick={() => void reset()}
+          >
+            {t("try_again")}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <EmailInput />
+      <PasswordLogin />
+      {password && magicLink && (
+        <Divider
+          text={t("or", { ns: "translation" })}
+          className="my-3 uppercase"
+        />
+      )}
+      <MagicLinkLogin />
+    </>
+  );
+};