feat: implement multiple oauth providers in the frontend

frontend/src/components/icons/oauth.tsx

@@ -1,6 +1,6 @@
 import type { SVGProps } from "react";
 
-export function GenericIcon(props: SVGProps<SVGSVGElement>) {
+export function OAuthIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

frontend/src/pages/login-page.tsx

@@ -1,7 +1,5 @@
 import { LoginForm } from "@/components/auth/login-form";
-import { GenericIcon } from "@/components/icons/generic";
-import { GithubIcon } from "@/components/icons/github";
-import { GoogleIcon } from "@/components/icons/google";
+import { OAuthIcon } from "@/components/icons/oauth";
 import {
   Card,
   CardHeader,
@@ -24,8 +22,7 @@ import { toast } from "sonner";
 
 export const LoginPage = () => {
   const { isLoggedIn } = useUserContext();
-  const { configuredProviders, title, oauthAutoRedirect, genericName } =
-    useAppContext();
+  const { providers, title, oauthAutoRedirect } = useAppContext();
   const { search } = useLocation();
   const { t } = useTranslation();
   const isMounted = useIsMounted();
@@ -35,10 +32,11 @@ export const LoginPage = () => {
   const searchParams = new URLSearchParams(search);
   const redirectUri = searchParams.get("redirect_uri");
 
-  const oauthConfigured =
-    configuredProviders.filter((provider) => provider !== "username").length >
-    0;
-  const userAuthConfigured = configuredProviders.includes("username");
+  const oauthProviders = providers.filter(
+    (provider) => provider.id !== "username",
+  );
+  const userAuthConfigured =
+    providers.find((provider) => provider.id === "username") !== undefined;
 
   const oauthMutation = useMutation({
     mutationFn: (provider: string) =>
@@ -96,8 +94,8 @@ export const LoginPage = () => {
   useEffect(() => {
     if (isMounted()) {
       if (
-        oauthConfigured &&
-        configuredProviders.includes(oauthAutoRedirect) &&
+        oauthProviders.length !== 0 &&
+        providers.find((provider) => provider.id === oauthAutoRedirect) &&
         !isLoggedIn &&
         redirectUri
       ) {
@@ -130,57 +128,33 @@ export const LoginPage = () => {
     <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
         <CardTitle className="text-center text-3xl">{title}</CardTitle>
-        {configuredProviders.length > 0 && (
+        {providers.length > 0 && (
           <CardDescription className="text-center">
-            {oauthConfigured ? t("loginTitle") : t("loginTitleSimple")}
+            {oauthProviders.length !== 0
+              ? t("loginTitle")
+              : t("loginTitleSimple")}
           </CardDescription>
         )}
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        {oauthConfigured && (
+        {oauthProviders.length !== 0 && (
           <div className="flex flex-col gap-2 items-center justify-center">
-            {configuredProviders.includes("google") && (
+            {oauthProviders.map((provider) => (
               <OAuthButton
-                title="Google"
-                icon={<GoogleIcon />}
+                title={provider.name}
+                icon={<OAuthIcon />}
                 className="w-full"
-                onClick={() => oauthMutation.mutate("google")}
+                onClick={() => oauthMutation.mutate(provider.id)}
                 loading={
                   oauthMutation.isPending &&
-                  oauthMutation.variables === "google"
+                  oauthMutation.variables === provider.id
                 }
                 disabled={oauthMutation.isPending || loginMutation.isPending}
               />
-            )}
-            {configuredProviders.includes("github") && (
-              <OAuthButton
-                title="Github"
-                icon={<GithubIcon />}
-                className="w-full"
-                onClick={() => oauthMutation.mutate("github")}
-                loading={
-                  oauthMutation.isPending &&
-                  oauthMutation.variables === "github"
-                }
-                disabled={oauthMutation.isPending || loginMutation.isPending}
-              />
-            )}
-            {configuredProviders.includes("generic") && (
-              <OAuthButton
-                title={genericName}
-                icon={<GenericIcon />}
-                className="w-full"
-                onClick={() => oauthMutation.mutate("generic")}
-                loading={
-                  oauthMutation.isPending &&
-                  oauthMutation.variables === "generic"
-                }
-                disabled={oauthMutation.isPending || loginMutation.isPending}
-              />
-            )}
+            ))}
           </div>
         )}
-        {userAuthConfigured && oauthConfigured && (
+        {userAuthConfigured && oauthProviders.length !== 0 && (
           <SeperatorWithChildren>{t("loginDivider")}</SeperatorWithChildren>
         )}
         {userAuthConfigured && (
@@ -189,7 +163,7 @@ export const LoginPage = () => {
             loading={loginMutation.isPending || oauthMutation.isPending}
           />
         )}
-        {configuredProviders.length == 0 && (
+        {providers.length == 0 && (
           <p className="text-center text-red-600 max-w-sm">
             {t("failedToFetchProvidersTitle")}
           </p>

frontend/src/pages/logout-page.tsx

@@ -6,9 +6,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { useAppContext } from "@/context/app-context";
 import { useUserContext } from "@/context/user-context";
-import { capitalize } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
 import { useEffect, useRef } from "react";
@@ -17,8 +15,7 @@ import { Navigate } from "react-router";
 import { toast } from "sonner";
 
 export const LogoutPage = () => {
-  const { provider, username, isLoggedIn, email } = useUserContext();
-  const { genericName } = useAppContext();
+  const { provider, username, isLoggedIn, email, oauthName } = useUserContext();
   const { t } = useTranslation();
 
   const redirectTimer = useRef<number | null>(null);
@@ -67,8 +64,7 @@ export const LogoutPage = () => {
               }}
               values={{
                 username: email,
-                provider:
-                  provider === "generic" ? genericName : capitalize(provider),
+                provider: oauthName,
               }}
             />
           ) : (

frontend/src/schemas/app-context-schema.ts

@@ -1,14 +1,19 @@
 import { z } from "zod";
 
+export const providerSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  oauth: z.boolean(),
+});
+
 export const appContextSchema = z.object({
-  configuredProviders: z.array(z.string()),
+  providers: z.array(providerSchema),
   title: z.string(),
-  genericName: z.string(),
   appUrl: z.string(),
   cookieDomain: z.string(),
   forgotPasswordMessage: z.string(),
-  oauthAutoRedirect: z.enum(["none", "github", "google", "generic"]),
   backgroundImage: z.string(),
+  oauthAutoRedirect: z.string(),
 });
 
 export type AppContextSchema = z.infer<typeof appContextSchema>;

frontend/src/schemas/user-context-schema.ts

@@ -8,6 +8,7 @@ export const userContextSchema = z.object({
   provider: z.string(),
   oauth: z.boolean(),
   totpPending: z.boolean(),
+  oauthName: z.string(),
 });
 
 export type UserContextSchema = z.infer<typeof userContextSchema>;