feat(auth): add WorkOS and Keycloak SSO providers (rebased) (#220)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

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

@@ -1,17 +1,27 @@
 'use client';
 
-import Link from 'next/link';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { signIn } from '@/lib/auth-client';
-import { getEnabledSsoProviders } from '@/lib/sso-providers';
+import Link from 'next/link';
+import { api } from '@/lib/api';
+import { authClient, signIn } from '@/lib/auth-client';
+import type { SsoProviderDiscovery } from '@/lib/sso';
+import { SsoProviderButtons } from '@/components/auth/sso-provider-buttons';
 
 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;
+  const [ssoProviders, setSsoProviders] = useState<SsoProviderDiscovery[]>([]);
+  const [ssoLoadingProviderId, setSsoLoadingProviderId] = useState<
+    SsoProviderDiscovery['id'] | null
+  >(null);
+
+  useEffect(() => {
+    api<SsoProviderDiscovery[]>('/api/sso/providers')
+      .catch(() => [] as SsoProviderDiscovery[])
+      .then((providers) => setSsoProviders(providers.filter((provider) => provider.configured)));
+  }, []);
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
     e.preventDefault();
@@ -33,6 +43,27 @@ export default function LoginPage(): React.ReactElement {
     router.push('/chat');
   }
 
+  async function handleSsoSignIn(providerId: SsoProviderDiscovery['id']): Promise<void> {
+    setError(null);
+    setSsoLoadingProviderId(providerId);
+
+    try {
+      const result = await authClient.signIn.oauth2({
+        providerId,
+        callbackURL: '/chat',
+        newUserCallbackURL: '/chat',
+      });
+
+      if (result.error) {
+        setError(result.error.message ?? `Sign in with ${providerId} failed`);
+        setSsoLoadingProviderId(null);
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : `Sign in with ${providerId} failed`);
+      setSsoLoadingProviderId(null);
+    }
+  }
+
   return (
     <div>
       <h1 className="text-2xl font-semibold">Sign in</h1>
@@ -47,26 +78,7 @@ export default function LoginPage(): React.ReactElement {
         </div>
       )}
 
-      {hasSsoProviders && (
-        <div className="mt-6 space-y-3">
-          {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"
-            >
-              {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>
-            <div className="flex-1 border-t border-surface-border" />
-          </div>
-        </div>
-      )}
-
-      <form className={hasSsoProviders ? 'space-y-4' : 'mt-6 space-y-4'} onSubmit={handleSubmit}>
+      <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
         <div>
           <label htmlFor="email" className="block text-sm font-medium text-text-secondary">
             Email
@@ -108,6 +120,14 @@ export default function LoginPage(): React.ReactElement {
         </button>
       </form>
 
+      <SsoProviderButtons
+        providers={ssoProviders}
+        loadingProviderId={ssoLoadingProviderId}
+        onOidcSignIn={(providerId) => {
+          void handleSsoSignIn(providerId);
+        }}
+      />
+
       <p className="mt-4 text-center text-sm text-text-muted">
         Don&apos;t have an account?{' '}
         <Link href="/register" className="text-blue-400 hover:text-blue-300">