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>

apps/web/src/app/auth/provider/[provider]/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useParams, useSearchParams } from 'next/navigation';
+import { signIn } from '@/lib/auth-client';
+import { getSsoProvider } from '@/lib/sso-providers';
+
+export default function AuthProviderRedirectPage(): React.ReactElement {
+  const params = useParams<{ provider: string }>();
+  const searchParams = useSearchParams();
+  const providerId = typeof params.provider === 'string' ? params.provider : '';
+  const provider = getSsoProvider(providerId);
+  const callbackURL = searchParams.get('callbackURL') ?? '/chat';
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const currentProvider = provider;
+
+    if (!currentProvider) {
+      setError('Unknown SSO provider.');
+      return;
+    }
+
+    if (!currentProvider.enabled) {
+      setError(`${currentProvider.buttonLabel} is not enabled in this deployment.`);
+      return;
+    }
+
+    const activeProvider = currentProvider;
+    let cancelled = false;
+
+    async function redirectToProvider(): Promise<void> {
+      const result = await signIn.oauth2({
+        providerId: activeProvider.id,
+        callbackURL,
+      });
+
+      if (!cancelled && result?.error) {
+        setError(result.error.message ?? `${activeProvider.buttonLabel} sign in failed.`);
+      }
+    }
+
+    void redirectToProvider();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [callbackURL, provider]);
+
+  return (
+    <div className="mx-auto flex min-h-[50vh] max-w-md flex-col justify-center">
+      <h1 className="text-2xl font-semibold text-text-primary">Single sign-on</h1>
+      <p className="mt-2 text-sm text-text-secondary">
+        {provider
+          ? `Redirecting you to ${provider.buttonLabel.replace('Continue with ', '')}...`
+          : 'Preparing your sign-in request...'}
+      </p>
+
+      {error ? (
+        <div className="mt-6 rounded-lg border border-error/30 bg-error/10 px-4 py-3 text-sm text-error">
+          <p>{error}</p>
+          <Link
+            href="/login"
+            className="mt-3 inline-block font-medium text-blue-400 hover:text-blue-300"
+          >
+            Return to login
+          </Link>
+        </div>
+      ) : (
+        <div className="mt-6 rounded-lg border border-surface-border bg-surface-elevated px-4 py-3 text-sm text-text-secondary">
+          If the redirect does not start automatically, return to the login page and try again.
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/lib/sso-providers.test.ts

@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { getEnabledSsoProviders, getSsoProvider } from './sso-providers';
+
+describe('sso-providers', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+  });
+
+  it('returns the enabled providers in login button order', () => {
+    vi.stubEnv('NEXT_PUBLIC_WORKOS_ENABLED', 'true');
+    vi.stubEnv('NEXT_PUBLIC_KEYCLOAK_ENABLED', 'true');
+
+    expect(getEnabledSsoProviders()).toEqual([
+      {
+        id: 'workos',
+        buttonLabel: 'Continue with WorkOS',
+        description: 'Enterprise SSO via WorkOS',
+        enabled: true,
+        href: '/auth/provider/workos',
+      },
+      {
+        id: 'keycloak',
+        buttonLabel: 'Continue with Keycloak',
+        description: 'Enterprise SSO via Keycloak',
+        enabled: true,
+        href: '/auth/provider/keycloak',
+      },
+    ]);
+  });
+
+  it('marks disabled providers without exposing them in the enabled list', () => {
+    vi.stubEnv('NEXT_PUBLIC_WORKOS_ENABLED', 'true');
+    vi.stubEnv('NEXT_PUBLIC_KEYCLOAK_ENABLED', 'false');
+
+    expect(getEnabledSsoProviders().map((provider) => provider.id)).toEqual(['workos']);
+    expect(getSsoProvider('keycloak')).toEqual({
+      id: 'keycloak',
+      buttonLabel: 'Continue with Keycloak',
+      description: 'Enterprise SSO via Keycloak',
+      enabled: false,
+      href: '/auth/provider/keycloak',
+    });
+  });
+
+  it('returns null for unknown providers', () => {
+    expect(getSsoProvider('authentik')).toBeNull();
+  });
+});

apps/web/src/lib/sso-providers.ts

@@ -0,0 +1,53 @@
+export type SsoProviderId = 'workos' | 'keycloak';
+
+export interface SsoProvider {
+  id: SsoProviderId;
+  buttonLabel: string;
+  description: string;
+  enabled: boolean;
+  href: string;
+}
+
+const PROVIDER_METADATA: Record<SsoProviderId, Omit<SsoProvider, 'enabled' | 'href'>> = {
+  workos: {
+    id: 'workos',
+    buttonLabel: 'Continue with WorkOS',
+    description: 'Enterprise SSO via WorkOS',
+  },
+  keycloak: {
+    id: 'keycloak',
+    buttonLabel: 'Continue with Keycloak',
+    description: 'Enterprise SSO via Keycloak',
+  },
+};
+
+export function getEnabledSsoProviders(): SsoProvider[] {
+  return (Object.keys(PROVIDER_METADATA) as SsoProviderId[])
+    .map((providerId) => getSsoProvider(providerId))
+    .filter((provider): provider is SsoProvider => provider?.enabled === true);
+}
+
+export function getSsoProvider(providerId: string): SsoProvider | null {
+  if (!isSsoProviderId(providerId)) {
+    return null;
+  }
+
+  return {
+    ...PROVIDER_METADATA[providerId],
+    enabled: isSsoProviderEnabled(providerId),
+    href: `/auth/provider/${providerId}`,
+  };
+}
+
+function isSsoProviderId(value: string): value is SsoProviderId {
+  return value === 'workos' || value === 'keycloak';
+}
+
+function isSsoProviderEnabled(providerId: SsoProviderId): boolean {
+  switch (providerId) {
+    case 'workos':
+      return process.env['NEXT_PUBLIC_WORKOS_ENABLED'] === 'true';
+    case 'keycloak':
+      return process.env['NEXT_PUBLIC_KEYCLOAK_ENABLED'] === 'true';
+  }
+}