feat(frontend): login with github sso

docs/configuring/authentication.mdx

@@ -3,7 +3,6 @@ title: Authentication Method
 description: Learn how to configure authentication in Quivr.
 ---
 
-
 # Authentication Methods
 
 Quivr offers three authentication methods when self-hosting. You can choose which authentication methods you want to offer to your users from these three options:
@@ -16,9 +15,9 @@ To enable one or more of these methods, you need to configure the following envi
 
 ```bash
 # Authentication Configuration
-NEXT_PUBLIC_AUTH_MODES=magic_link,google_sso,password
+NEXT_PUBLIC_AUTH_MODES=magic_link,google_sso,password,github_sso
 ```
+
 Since each of these methods uses Supabase, you should configure your Supabase instance to support the chosen methods.
 
 Please refer to the [Supabase documentation](https://supabase.com/docs/guides/auth) for more information on how to configure each authentication method.
-

docs/configuring/environment-variables.mdx

@@ -2,6 +2,7 @@
 title: Environment Variables
 description: Learn how to configure the environment variables for Quivr.
 ---
+
 # Environment variables
 
 You have two environment files in the root of the project:
@@ -44,7 +45,7 @@ The frontend environment file is used to configure the frontend application. It
 
 - `NEXT_PUBLIC_BACKEND_URL`: The URL where the backend of the application is running, used to make server-side requests.
 
-- `NEXT_PUBLIC_FRONTEND_URL`: The URL where the frontend of the application is accessible. The asterisk (*) may indicate that any port can be used when running locally.
+- `NEXT_PUBLIC_FRONTEND_URL`: The URL where the frontend of the application is accessible. The asterisk (\*) may indicate that any port can be used when running locally.
 
 - `NEXT_PUBLIC_SUPABASE_URL`: The connection string to the project's Supabase application for the frontend to interact with Supabase services.
 
@@ -58,7 +59,7 @@ The frontend environment file is used to configure the frontend application. It
 
 - `NEXT_PUBLIC_STRIPE_MANAGE_PLAN_URL`: The URL for managing Stripe subscription plans.
 
-- `NEXT_PUBLIC_AUTH_MODES`: The authentication modes supported by the application, such as magic link, password-based authentication, and Google Single Sign-On (SSO).
+- `NEXT_PUBLIC_AUTH_MODES`: The authentication modes supported by the application, such as magic link, password-based authentication, and Google & Github Single Sign-On (SSO).
 
 ### Configuring BRAVE_SEARCH_API_KEY
 

frontend/app/(auth)/login/components/GithubLogin/hooks/useGithubLogin.ts

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+import { useSupabase } from "@/lib/context/SupabaseProvider";
+import { useToast } from "@/lib/hooks/useToast";
+
+export const useGithubLogin = (): {
+  signInWithGithub: () => Promise<void>;
+  isPending: boolean;
+} => {
+  const { supabase } = useSupabase();
+
+  const { publish } = useToast();
+
+  const [isPending, setIsPending] = useState(false);
+
+  const signInWithGithub = async () => {
+    setIsPending(true);
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: "github",
+    });
+    setIsPending(false);
+    if (error) {
+      publish({
+        variant: "danger",
+        text: "An error occurred ",
+      });
+    }
+  };
+
+  return {
+    signInWithGithub,
+    isPending,
+  };
+};

frontend/app/(auth)/login/components/GithubLogin/index.module.scss

@@ -0,0 +1,12 @@
+@use "@/styles/Spacings.module.scss";
+
+.button {
+  font-weight: 400;
+  color: var(--black-0);
+  background-color: var(--white-0);
+  height: calc(2.5rem - #{Spacings.$spacing01});
+
+  &:hover {
+    color: var(--white-0);
+  }
+}

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

@@ -0,0 +1,21 @@
+import Button from "@/lib/components/ui/Button";
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import { useGithubLogin } from "./hooks/useGithubLogin";
+import styles from "./index.module.scss";
+
+export const GithubLoginButton = (): JSX.Element => {
+  const { isPending, signInWithGithub } = useGithubLogin();
+
+  return (
+    <Button
+      onClick={() => void signInWithGithub()}
+      isLoading={isPending}
+      type="button"
+      className={styles.button}
+    >
+      <Icon name="github" size="small" color="primary" />
+      <span>Continue with Github</span>
+    </Button>
+  );
+};

frontend/app/(auth)/login/components/GoogleLogin/index.module.scss

@@ -0,0 +1,12 @@
+@use "@/styles/Spacings.module.scss";
+
+.button {
+  font-weight: 400;
+  color: var(--black-0);
+  background-color: var(--white-0);
+  height: calc(2.5rem - #{Spacings.$spacing01});
+
+  &:hover {
+    color: var(--white-0);
+  }
+}

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

@@ -4,6 +4,7 @@ import { FcGoogle } from "react-icons/fc";
 import Button from "@/lib/components/ui/Button";
 
 import { useGoogleLogin } from "./hooks/useGoogleLogin";
+import styles from "./index.module.scss";
 
 export const GoogleLoginButton = (): JSX.Element => {
   const { isPending, signInWithGoogle } = useGoogleLogin();
@@ -14,8 +15,7 @@ export const GoogleLoginButton = (): JSX.Element => {
       onClick={() => void signInWithGoogle()}
       isLoading={isPending}
       type="button"
-      data-testid="google-login-button"
-      className="font-normal bg-white text-black py-2 hover:text-white"
+      className={styles.button}
     >
       <FcGoogle />
       {t("googleLogin", { ns: "login" })}

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

@@ -9,14 +9,15 @@ import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks
 import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
 import { EmailLogin } from "./components/EmailLogin";
+import { GithubLoginButton } from "./components/GithubLogin";
 import { GoogleLoginButton } from "./components/GoogleLogin";
 import { useLogin } from "./hooks/useLogin";
 import styles from "./page.module.scss";
 import { EmailAuthContextType } from "./types";
 
 const Main = (): JSX.Element => {
   useLogin();
-  const { googleSso } = useAuthModes();
+  const { googleSso, githubSso } = useAuthModes();
   const { isDarkMode } = useUserSettingsContext();
 
   const methods = useForm<EmailAuthContextType>({
@@ -43,6 +44,7 @@ const Main = (): JSX.Element => {
           </FormProvider>
 
           {googleSso && <GoogleLoginButton />}
+          {githubSso && <GithubLoginButton />}
         </div>
         <p className={styles.restriction_message}>
           {t("restriction_message", { ns: "login" })}

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"),
+    githubSso: authModes.includes("github_sso"),
   };
 };