feat(auth): add WorkOS and Keycloak SSO providers

apps/web/src/app/(auth)/login/page.tsx

@@ -1,18 +1,17 @@
 'use client';
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { signIn } from '@/lib/auth-client';
-
-const workosEnabled = process.env['NEXT_PUBLIC_WORKOS_ENABLED'] === 'true';
-const keycloakEnabled = process.env['NEXT_PUBLIC_KEYCLOAK_ENABLED'] === 'true';
-const hasSsoProviders = workosEnabled || keycloakEnabled;
+import { getEnabledSsoProviders } from '@/lib/sso-providers';
 
 export default function LoginPage(): React.ReactElement {
   const router = useRouter();
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const ssoProviders = getEnabledSsoProviders();
+  const hasSsoProviders = ssoProviders.length > 0;
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
     e.preventDefault();
@@ -34,16 +33,6 @@ export default function LoginPage(): React.ReactElement {
     router.push('/chat');
   }
 
-  async function handleSsoSignIn(providerId: string): Promise<void> {
-    setError(null);
-    setLoading(true);
-    const result = await signIn.oauth2({ providerId, callbackURL: '/chat' });
-    if (result?.error) {
-      setError(result.error.message ?? 'SSO sign in failed');
-      setLoading(false);
-    }
-  }
-
   return (
     <div>
       <h1 className="text-2xl font-semibold">Sign in</h1>
@@ -60,26 +49,15 @@ export default function LoginPage(): React.ReactElement {
 
       {hasSsoProviders && (
         <div className="mt-6 space-y-3">
-          {workosEnabled && (
-            <button
-              type="button"
-              disabled={loading}
-              onClick={() => handleSsoSignIn('workos')}
-              className="flex w-full items-center justify-center gap-2 rounded-lg border border-surface-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-surface-card disabled:opacity-50"
+          {ssoProviders.map((provider) => (
+            <Link
+              key={provider.id}
+              href={provider.href}
+              className="flex w-full items-center justify-center gap-2 rounded-lg border border-surface-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-surface-card"
             >
-              Continue with WorkOS
-            </button>
-          )}
-          {keycloakEnabled && (
-            <button
-              type="button"
-              disabled={loading}
-              onClick={() => handleSsoSignIn('keycloak')}
-              className="flex w-full items-center justify-center gap-2 rounded-lg border border-surface-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-surface-card disabled:opacity-50"
-            >
-              Continue with Keycloak
-            </button>
-          )}
+              {provider.buttonLabel}
+            </Link>
+          ))}
           <div className="relative flex items-center">
             <div className="flex-1 border-t border-surface-border" />
             <span className="mx-3 text-xs text-text-muted">or</span>