🧑‍💻 Add keycloak auth provider (#1533)

#1529

apps/builder/src/features/auth/components/SocialLoginButtons.tsx

@@ -16,6 +16,7 @@ import { AzureAdLogo } from '@/components/logos/AzureAdLogo'
 import { FacebookLogo } from '@/components/logos/FacebookLogo'
 import { GitlabLogo } from '@/components/logos/GitlabLogo'
 import { useTranslate } from '@tolgee/react'
+import { KeycloackLogo } from '@/components/logos/KeycloakLogo'
 
 type Props = {
   providers:
@@ -52,6 +53,8 @@ export const SocialLoginButtons = ({ providers }: Props) => {
 
   const handleCustomOAuthClick = () => handleSignIn('custom-oauth')
 
+  const handleKeyCloackClick = () => handleSignIn('keycloak')
+
   return (
     <Stack>
       {providers?.github && (
@@ -142,6 +145,20 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           })}
         </Button>
       )}
+      {providers?.keycloak && (
+        <Button
+          leftIcon={<KeycloackLogo />}
+          onClick={handleKeyCloackClick}
+          data-testid="keycloak"
+          isLoading={
+            ['loading', 'authenticated'].includes(status) ||
+            authLoading === 'keycloak'
+          }
+          variant="outline"
+        >
+          {t('auth.socialLogin.keycloakButton.label')}
+        </Button>
+      )}
     </Stack>
   )
 }