fix(auth): handle optional icon class names for providers in login co…

…mponents - Updated the LoginModalContent and Login components to safely access provider icon class names using optional chaining. - Excluded the "credential" provider from the list of displayed auth providers to streamline the login options. Signed-off-by: Innei <tukon479@gmail.com>
ChrisYue888 · Dec 16, 2024 · de8d337 · de8d337
1 parent e0661ff
commit de8d337
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/apps/renderer/src/modules/auth/LoginModalContent.tsx b/apps/renderer/src/modules/auth/LoginModalContent.tsx
@@ -79,7 +79,7 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
   const extraProviders = useMemo(() => {
     if (!authProviders) return []
     return Object.entries(authProviders)
-      .filter(([key]) => !defaultProviders[key])
+      .filter(([key]) => !defaultProviders[key] && key !== "credential")
       .map(([_, provider]) => provider)
   }, [authProviders])
 
@@ -116,7 +116,9 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
             }}
           >
             <LoginButtonContent isLoading={loadingLockSet === provider.id}>
-              <i className={clsx("mr-2 text-xl", authProvidersConfig[provider.id].iconClassName)} />{" "}
+              <i
+                className={clsx("mr-2 text-xl", authProvidersConfig[provider.id]?.iconClassName)}
+              />{" "}
               {t("signin.continue_with", { provider: provider.name })}
             </LoginButtonContent>
           </MotionButtonBase>

diff --git a/apps/server/client/modules/login/index.tsx b/apps/server/client/modules/login/index.tsx
@@ -138,7 +138,7 @@ export function Login() {
                       loginHandler(key)
                     }}
                   >
-                    <i className={cn("mr-2 text-xl", authProvidersConfig[key].iconClassName)} />{" "}
+                    <i className={cn("mr-2 text-xl", authProvidersConfig[key]?.iconClassName)} />{" "}
                     {t("login.continueWith", { provider: provider.name })}
                   </Button>
                 ))}