feat: make auth mode configurable (#1579)

Fix https://github.com/StanGirard/quivr/issues/1524

Demo:


https://github.com/StanGirard/quivr/assets/63923024/d1365b67-060e-488f-ad10-ca6ce2ac373a

.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/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,13 +24,15 @@ 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({
@@ -49,18 +40,11 @@ export const useMagicLinkLogin = () => {
         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 />
+    </>
+  );
+};

frontend/app/(auth)/login/components/MagicLinkLogin/hooks/__tests__/useMagicLinkLogin.test.ts

@@ -1,56 +0,0 @@
-import { act, renderHook } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { useMagicLinkLogin } from "../useMagicLinkLogin";
-
-const mockSignInWithOtp = vi.fn(() => ({ error: null }));
-
-const mockUseSupabase = () => ({
-  supabase: {
-    auth: {
-      signInWithOtp: mockSignInWithOtp,
-    },
-  },
-});
-const email = "user@quivr.app";
-const watchMock = vi.fn(() => email);
-vi.mock("react-hook-form", async () => {
-  const actual = await vi.importActual<typeof import("react-hook-form")>(
-    "react-hook-form"
-  );
-
-  return {
-    ...actual,
-    useForm: () => ({
-      ...actual.useForm(),
-      watch: watchMock,
-    }),
-  };
-});
-
-vi.mock("@/lib/context/SupabaseProvider", () => ({
-  useSupabase: () => mockUseSupabase(),
-}));
-
-describe("useMagicLinkLogin", () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("should not call signInWithOtp if email is empty", async () => {
-    watchMock.mockReturnValueOnce("");
-    const { result } = renderHook(() => useMagicLinkLogin());
-    await act(() => result.current.handleMagicLinkLogin());
-    expect(mockSignInWithOtp).toHaveBeenCalledTimes(0);
-  });
-
-  it("should call signInWithOtp with proper arguments", async () => {
-    const { result } = renderHook(() => useMagicLinkLogin());
-    await result.current.handleMagicLinkLogin();
-    expect(mockSignInWithOtp).toHaveBeenCalledTimes(1);
-    expect(mockSignInWithOtp).toHaveBeenCalledWith({
-      email,
-      options: { emailRedirectTo: window.location.hostname },
-    });
-  });
-});

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

@@ -1,63 +0,0 @@
-"use client";
-
-import { useTranslation } from "react-i18next";
-
-import Button from "@/lib/components/ui/Button";
-import Field from "@/lib/components/ui/Field";
-import { emailPattern } from "@/lib/config/patterns";
-
-import { useMagicLinkLogin } from "./hooks/useMagicLinkLogin";
-
-export const MagicLinkLogin = (): JSX.Element => {
-  const {
-    handleMagicLinkLogin,
-    isSubmitting,
-    register,
-    isSubmitSuccessful,
-    reset,
-  } = useMagicLinkLogin();
-  const { t } = useTranslation(["login", "translation"]);
-
-  if (isSubmitSuccessful) {
-    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 (
-    <form className="w-full" onSubmit={(e) => void handleMagicLinkLogin(e)}>
-      <Field
-        {...register("email", {
-          required: true,
-          pattern: emailPattern,
-        })}
-        placeholder={t("email", { ns: "login" })}
-        label={t("email", { ns: "translation" })}
-        inputClassName="py-1 mt-1 mb-3"
-      />
-      <Button
-        isLoading={isSubmitting}
-        className="bg-black text-white py-2 font-normal w-full"
-      >
-        {t("magicLink", { ns: "login" })}
-      </Button>
-    </form>
-  );
-};

frontend/app/(auth)/login/page.tsx

@@ -1,18 +1,28 @@
 "use client";
 import Link from "next/link";
 import { Suspense } from "react";
+import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
 import { Divider } from "@/lib/components/ui/Divider";
+import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
+import { EmailLogin } from "./components/EmailLogin";
 import { GoogleLoginButton } from "./components/GoogleLogin";
-import { MagicLinkLogin } from "./components/MagicLinkLogin";
 import { useLogin } from "./hooks/useLogin";
+import { EmailAuthContextType } from "./types";
 
 const Main = (): JSX.Element => {
   useLogin();
+  const { googleSso, password, magicLink } = useAuthModes();
 
+  const methods = useForm<EmailAuthContextType>({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
   const { t } = useTranslation(["translation", "login"]);
 
   return (
@@ -27,9 +37,13 @@ const Main = (): JSX.Element => {
             <span className="text-primary">Quivr</span>
           </p>
           <div className="mt-5 flex flex-col">
-            <MagicLinkLogin />
-            <Divider text={t("or")} className="my-3 uppercase" />
-            <GoogleLoginButton />
+            <FormProvider {...methods}>
+              <EmailLogin />
+            </FormProvider>
+            {googleSso && (password || magicLink) && (
+              <Divider text={t("or")} className="my-3 uppercase" />
+            )}
+            {googleSso && <GoogleLoginButton />}
           </div>
           <p className="text-[10px] text-center">
             {t("restriction_message", { ns: "login" })}

frontend/app/(auth)/login/types.ts

@@ -0,0 +1,8 @@
+export type EmailAuthContextType = {
+  email: string;
+  password: string;
+  isMagicLinkSubmitted: boolean;
+  isPasswordSubmitted: boolean;
+  isMagicLinkSubmitting: boolean;
+  isPasswordSubmitting: boolean;
+};

frontend/lib/hooks/useAuthModes.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useAuthModes = () => {
+  const authModes = process.env.NEXT_PUBLIC_AUTH_MODES?.split(",") ?? [
+    "password",
+  ];
+
+  return {
+    magicLink: authModes.includes("magic_link"),
+    password: authModes.includes("password"),
+    googleSso: authModes.includes("google_sso"),
+  };
+};

frontend/public/locales/en/login.json

@@ -1,5 +1,7 @@
 {
+    "password": "Password",
     "googleLogin": "Continue with Google",
+    "errorPasswordMissed": "Please enter your password",
     "magicLink": "Continue with email",
     "errorMailMissed": "Please enter your email address",
     "talk_to": "Talk to",
@@ -11,5 +13,6 @@
         "part1":"We just sent you a ",
         "magic_link":"Magic link",
         "part2":", check your emails and follow the steps."
-    }
+    },
+    "login": "Login"
 }

frontend/public/locales/es/login.json

@@ -1,15 +1,19 @@
 {
-    "googleLogin": "Continuar con Google",
-    "magicLink": "Continuar con correo electrónico",
-    "errorMailMissed": "Por favor, ingrese su dirección de correo electrónico",
-    "talk_to": "Hablar con",
-    "restriction_message": "Los usuarios no pagos tienen acceso a una demostración gratuita y limitada de Quivr",
-    "email":"Dirección de correo electrónico",
-    "cant_find":"¿No lo encuentras?", 
-    "try_again":"Inténtalo de nuevo", 
+    "password": "Contraseña", 
+    "googleLogin": "Continuar con Google", 
+    "errorPasswordMissed": "Por favor ingrese su contraseña", 
+    "magicLink": "Continuar con correo electrónico", 
+    "errorMailMissed": "Por favor ingrese su dirección de correo electrónico", 
+    "talk_to": "Hablar con", 
+    "restriction_message": "Los usuarios no pagos tienen acceso a una demostración gratuita y limitada de Quivr", 
+    "email":"Dirección de correo electrónico", 
+    "cant_find":"¿No puedes encontrarlo?", 
+    "try_again":"Inténtalo de nuevo" ,
     "check_your_email": { 
         "part1":"Acabamos de enviarte un ", 
         "magic_link":"enlace mágico", 
         "part2":". Revisa tus correos electrónicos y sigue los pasos." 
-    }
-}
+    },
+    "login": "Iniciar sesión"
+}
+

frontend/public/locales/fr/login.json

@@ -1,5 +1,7 @@
 {
+    "password": "Mot de passe",
     "googleLogin": "Continuer avec Google",
+    "errorPasswordMissed": "Veuillez entrer votre mot de passe",
     "magicLink": "Continuer avec e-mail",
     "errorMailMissed": "Veuillez saisir votre adresse e-mail",
     "talk_to": "Parler à",
@@ -11,5 +13,6 @@
         "part1":"Nous venons de vous envoyer un ", 
         "magic_link":"lien magique", 
         "part2":". Vérifiez vos e-mails et suivez les étapes." 
-    }
+    },
+    "login": "Se connecter"
 }

frontend/public/locales/pt-br/login.json

@@ -1,15 +1,18 @@
 {
+    "password": "Senha",
     "googleLogin": "Continuar com o Google",
-    "magicLink": "Continuar com o e-mail",
-    "errorMailMissed": "Por favor, insira seu endereço de e-mail",
-    "talk_to": "Converse com",
+    "errorPasswordMissed": "Por favor, digite sua senha",
+    "magicLink": "Continuar com e-mail",
+    "errorMailMissed": "Por favor, digite seu endereço de e-mail",
+    "talk_to": "Conversar com",
     "restriction_message": "Usuários não pagos têm acesso a uma demonstração gratuita e limitada do Quivr",
-    "email":"Email address",
-    "cant_find":"Não consegue encontrar?", 
-    "try_again":"Tente novamente", 
-    "check_your_email":{ 
-        "part1":"Acabamos de enviar um ", 
-        "magic_link":"link mágico", 
-        "part2":" para você, verifique seus emails e siga as instruções."
-    }
+    "email":"Endereço de e-mail",
+    "cant_find":"Não consegue encontrar?",
+    "try_again":"Tente novamente",
+    "check_your_email":{
+        "part1":"Acabamos de enviar um ",
+        "magic_link":"link mágico",
+        "part2":", verifique seus e-mails e siga as etapas."
+    },
+    "login":"Entrar"
 }

frontend/public/locales/ru/login.json

@@ -1,4 +1,6 @@
 {
+    "password": "Пароль",
+    "errorPasswordMissed": "Пожалуйста, введите свой пароль",
     "googleLogin": "Продолжить с Google",
     "magicLink": "Продолжить с электронной почтой",
     "errorMailMissed": "Пожалуйста, введите ваш адрес электронной почты",
@@ -11,5 +13,6 @@
         "part1":"Мы только что отправили вам ", 
         "magic_link":"волшебную ссылку", 
         "part2":". Проверьте свою электронную почту и следуйте инструкциям."
-    }
+    },
+    "login": "Войти"
 }

frontend/public/locales/zh-cn/login.json

@@ -1,15 +1,18 @@
 {
-  "googleLogin": "使用 Google 继续",
-  "magicLink": "使用电子邮件继续",
-  "errorMailMissed": "请输入您的电子邮件地址",
-  "talk_to": "与之交谈",
-  "restriction_message": "未付费用户可以访问 Quivr 的免费和有限演示",
-  "email": "电子邮件地址",
-  "cant_find": "找不到吗？",
-  "try_again": "再试一次",
-  "check_your_email": {
-    "part1": "我们刚刚发送了一个",
-    "magic_link": "魔法链接",
-    "part2": "，请查收您的电子邮件并按照步骤进行操作。"
-  }
+    "password": "密码",
+    "googleLogin": "使用Google登录",
+    "errorPasswordMissed": "请输入密码",
+    "magicLink": "使用电子邮件继续",
+    "errorMailMissed": "请输入您的电子邮件地址",
+    "talk_to": "与之交谈",
+    "restriction_message": "未付费用户可以访问Quivr的免费和有限演示",
+    "email":"电子邮件地址",
+    "cant_find":"找不到？",
+    "try_again":"重试",
+    "check_your_email":{
+        "part1":"我们刚刚发送了一个",
+        "magic_link":"魔法链接",
+        "part2":"，请检查您的电子邮件并按照步骤操作。"
+    },
+    "login":"登录"
 }