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"),
  };
 };