feat: Add Azure login support (#3071)

This commit adds support for Azure login by implementing the AzureLoginButton component and the useAzureLogin hook. It also updates the login.json file to include the "Continue with Azure" text. This feature enhances the authentication options for users and improves the overall user experience.
2024-12-15 01:21:48 +03:00 · 2024-08-22 21:57:43 +02:00 · 2024-08-22 21:57:43 +02:00 · 0b33c3f193
commit 0b33c3f193
parent 78355eda6a
10 changed files with 165 additions and 11 deletions
--- a/frontend/app/(auth)/login/components/AzureLogin/hooks/useAzureLogin.ts
+++ b/frontend/app/(auth)/login/components/AzureLogin/hooks/useAzureLogin.ts
@ -0,0 +1,35 @@
+import { useState } from "react";
+
+import { useSupabase } from "@/lib/context/SupabaseProvider";
+import { useToast } from "@/lib/hooks/useToast";
+
+export const useAzureLogin = (): {
+  signInWithAzure: () => Promise<void>;
+  isPending: boolean;
+} => {
+  const { supabase } = useSupabase();
+  const { publish } = useToast();
+  const [isPending, setIsPending] = useState(false);
+
+  const signInWithAzure = async () => {
+    setIsPending(true);
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'azure',
+      options: {
+        scopes: 'email',
+      },
+    });
+    setIsPending(false);
+    if (error) {
+      publish({
+        variant: "danger",
+        text: "An error occurred during Azure login",
+      });
+    }
+  };
+
+  return {
+    signInWithAzure,
+    isPending,
+  };
+};
--- a/frontend/app/(auth)/login/components/AzureLogin/index.tsx
+++ b/frontend/app/(auth)/login/components/AzureLogin/index.tsx
@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next";
+import { SiMicrosoftazure } from "react-icons/si";
+
+import Button from "@/lib/components/ui/Button";
+
+import { useAzureLogin } from "./hooks/useAzureLogin";
+
+export const AzureLoginButton = (): JSX.Element => {
+  const { isPending, signInWithAzure } = useAzureLogin();
+  const { t } = useTranslation(["login"]);
+
+  return (
+    <Button
+      onClick={() => void signInWithAzure()}
+      isLoading={isPending}
+      type="button"
+      data-testid="azure-login-button"
+      className="font-normal bg-white text-black py-2 hover:text-white"
+    >
+      <SiMicrosoftazure />
+      {t("azureLogin", { ns: "login" })}
+    </Button>
+  );
+};
--- a/frontend/app/(auth)/login/page.tsx
+++ b/frontend/app/(auth)/login/page.tsx
@ -8,15 +8,18 @@ import { QuivrLogo } from "@/lib/assets/QuivrLogo";
 import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 import { useAuthModes } from "@/lib/hooks/useAuthModes";

+import { AzureLoginButton } from "./components/AzureLogin";
 import { EmailLogin } from "./components/EmailLogin";
 import { GoogleLoginButton } from "./components/GoogleLogin";
 import { useLogin } from "./hooks/useLogin";
 import styles from "./page.module.scss";
 import { EmailAuthContextType } from "./types";

+const projectName = process.env.NEXT_PUBLIC_PROJECT_NAME;
+
 const Main = (): JSX.Element => {
  useLogin();
-  const { googleSso } = useAuthModes();
+  const { googleSso, azureSso } = useAuthModes();
  const { isDarkMode } = useUserSettingsContext();

  const methods = useForm<EmailAuthContextType>({
@ -35,7 +38,9 @@ const Main = (): JSX.Element => {
        </Link>
        <p className={styles.title}>
          {t("talk_to", { ns: "login" })}{" "}
-          <span className={styles.primary_text}>Quivr</span>
+          <span className={styles.primary_text}>
+            {projectName ? projectName : "Quivr"}
+          </span>
        </p>
        <div className={styles.form_container}>
          <FormProvider {...methods}>
@ -43,10 +48,8 @@ const Main = (): JSX.Element => {
          </FormProvider>

          {googleSso && <GoogleLoginButton />}
+          {azureSso && <AzureLoginButton />}
        </div>
-        <p className={styles.restriction_message}>
-          {t("restriction_message", { ns: "login" })}
-        </p>
      </section>
    </div>
  );
--- a/frontend/lib/hooks/useAuthModes.ts
+++ b/frontend/lib/hooks/useAuthModes.ts
@ -8,5 +8,6 @@ export const useAuthModes = () => {
    magicLink: authModes.includes("magic_link"),
    password: authModes.includes("password"),
    googleSso: authModes.includes("google_sso"),
+    azureSso: authModes.includes("azure_sso"),
  };
 };
--- a/frontend/public/locales/en/login.json
+++ b/frontend/public/locales/en/login.json
@ -1,6 +1,7 @@
 {
  "password": "Password",
  "googleLogin": "Continue with Google",
+  "azureLogin": "Continue with Azure",
  "errorPasswordMissed": "Please enter your password",
  "magicLink": "Continue with email",
  "errorMailMissed": "Please enter your email address",
@ -15,4 +16,4 @@
    "part2": ", check your emails and follow the steps."
  },
  "login": "Login"
-}
+}
--- a/frontend/public/locales/es/login.json
+++ b/frontend/public/locales/es/login.json
@ -1 +1,19 @@
-{"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"}
+{
+    "password": "Contraseña",
+    "googleLogin": "Continuar con Google",
+    "azureLogin": "Continuar con Azure",
+    "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"
+}
--- a/frontend/public/locales/fr/login.json
+++ b/frontend/public/locales/fr/login.json
@ -1 +1,19 @@
-{"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 à","restriction_message":"Les utilisateurs non payants ont accès à une démonstration gratuite et limitée de Quivr","email":"Adresse e-mail","cant_find":"Vous ne le trouvez pas ?","try_again":"Réessayez","check_your_email":{"part1":"Nous venons de vous envoyer un ","magic_link":"lien magique","part2":". Vérifiez vos e-mails et suivez les étapes."},"login":"Se connecter"}
+{
+    "password": "Mot de passe",
+    "googleLogin": "Continuer avec Google",
+    "azureLogin": "Continuer avec Azure",
+    "errorPasswordMissed": "Veuillez entrer votre mot de passe",
+    "magicLink": "Continuer avec e-mail",
+    "errorMailMissed": "Veuillez saisir votre adresse e-mail",
+    "talk_to": "Parler à",
+    "restriction_message": "Les utilisateurs non payants ont accès à une démonstration gratuite et limitée de Quivr",
+    "email": "Adresse e-mail",
+    "cant_find": "Vous ne le trouvez pas ?",
+    "try_again": "Réessayez",
+    "check_your_email": {
+        "part1": "Nous venons de vous envoyer un ",
+        "magic_link": "lien magique",
+        "part2": ". Vérifiez vos e-mails et suivez les étapes."
+    },
+    "login": "Se connecter"
+}
--- a/frontend/public/locales/pt-br/login.json
+++ b/frontend/public/locales/pt-br/login.json
@ -1 +1,19 @@
-{"password":"Senha","googleLogin":"Continuar com o Google","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":"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"}
+{
+    "password": "Senha",
+    "googleLogin": "Continuar com o Google",
+    "azureLogin": "Continuar com o Azure",
+    "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": "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"
+}
--- a/frontend/public/locales/ru/login.json
+++ b/frontend/public/locales/ru/login.json
@ -1 +1,19 @@
-{"password":"Пароль","googleLogin":"Продолжить с Google","errorPasswordMissed":"Пожалуйста, введите свой пароль","magicLink":"Продолжить с электронной почтой","errorMailMissed":"Пожалуйста, введите ваш адрес электронной почты","talk_to":"Общение с","restriction_message":"Неоплаченным пользователям доступен бесплатный и ограниченный демонстрационный доступ к Quivr","email":"Адрес электронной почты","cant_find":"Не можете найти?","try_again":"Попробуйте еще раз","check_your_email":{"part1":"Мы только что отправили вам ","magic_link":"волшебную ссылку","part2":". Проверьте свою электронную почту и следуйте инструкциям."},"login":"Войти"}
+{
+    "password": "Пароль",
+    "googleLogin": "Продолжить с Google",
+    "azureLogin": "Продолжить с Azure",
+    "errorPasswordMissed": "Пожалуйста, введите свой пароль",
+    "magicLink": "Продолжить с электронной почтой",
+    "errorMailMissed": "Пожалуйста, введите ваш адрес электронной почты",
+    "talk_to": "Общение с",
+    "restriction_message": "Неоплаченным пользователям доступен бесплатный и ограниченный демонстрационный доступ к Quivr",
+    "email": "Адрес электронной почты",
+    "cant_find": "Не можете найти?",
+    "try_again": "Попробуйте еще раз",
+    "check_your_email": {
+        "part1": "Мы только что отправили вам ",
+        "magic_link": "волшебную ссылку",
+        "part2": ". Проверьте свою электронную почту и следуйте инструкциям."
+    },
+    "login": "Войти"
+}
--- a/frontend/public/locales/zh-cn/login.json
+++ b/frontend/public/locales/zh-cn/login.json
@ -1 +1,19 @@
-{"password":"密码","googleLogin":"使用Google登录","errorPasswordMissed":"请输入密码","magicLink":"使用电子邮件继续","errorMailMissed":"请输入您的电子邮件地址","talk_to":"与之交谈","restriction_message":"未付费用户可以访问Quivr的免费和有限演示","email":"电子邮件地址","cant_find":"找不到？","try_again":"重试","check_your_email":{"part1":"我们刚刚发送了一个","magic_link":"魔法链接","part2":"，请检查您的电子邮件并按照步骤操作。"},"login":"登录"}
+{
+    "password": "密码",
+    "googleLogin": "使用Google登录",
+    "azureLogin": "使用Azure登录",
+    "errorPasswordMissed": "请输入密码",
+    "magicLink": "使用电子邮件继续",
+    "errorMailMissed": "请输入您的电子邮件地址",
+    "talk_to": "与之交谈",
+    "restriction_message": "未付费用户可以访问Quivr的免费和有限演示",
+    "email": "电子邮件地址",
+    "cant_find": "找不到？",
+    "try_again": "重试",
+    "check_your_email": {
+        "part1": "我们刚刚发送了一个",
+        "magic_link": "魔法链接",
+        "part2": "，请检查您的电子邮件并按照步骤操作。"
+    },
+    "login": "登录"
+}