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>
2026-03-21 12:57:07 +00:00
parent f3e90df2a0
commit dd108b9ab4
16 changed files with 724 additions and 176 deletions
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/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">
--- a/apps/web/src/app/(dashboard)/settings/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/page.tsx
@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { api } from '@/lib/api';
 import { authClient, useSession } from '@/lib/auth-client';
+import type { SsoProviderDiscovery } from '@/lib/sso';
+import { SsoProviderSection } from '@/components/settings/sso-provider-section';

 // ─── Types ────────────────────────────────────────────────────────────────────

@@ -424,7 +426,9 @@ function NotificationsTab(): React.ReactElement {

 function ProvidersTab(): React.ReactElement {
  const [providers, setProviders] = useState<ProviderInfo[]>([]);
+  const [ssoProviders, setSsoProviders] = useState<SsoProviderDiscovery[]>([]);
  const [loading, setLoading] = useState(true);
+  const [ssoLoading, setSsoLoading] = useState(true);
  const [testStatuses, setTestStatuses] = useState<Record<string, ProviderTestStatus>>({});

  useEffect(() => {
@@ -434,6 +438,13 @@ function ProvidersTab(): React.ReactElement {
      .finally(() => setLoading(false));
  }, []);

+  useEffect(() => {
+    api<SsoProviderDiscovery[]>('/api/sso/providers')
+      .catch(() => [] as SsoProviderDiscovery[])
+      .then((providers) => setSsoProviders(providers))
+      .finally(() => setSsoLoading(false));
+  }, []);
+
  const testConnection = useCallback(async (providerId: string): Promise<void> => {
    setTestStatuses((prev) => ({
      ...prev,
@@ -464,35 +475,44 @@ function ProvidersTab(): React.ReactElement {
    .find((m) => providers.find((p) => p.id === m.provider)?.available);

  return (
-    <section className="space-y-4">
-      <h2 className="text-lg font-medium text-text-secondary">LLM Providers</h2>
-      {loading ? (
-        <p className="text-sm text-text-muted">Loading providers...</p>
-      ) : providers.length === 0 ? (
-        <div className="rounded-lg border border-surface-border bg-surface-card p-4">
-          <p className="text-sm text-text-muted">
-            No providers configured. Set{' '}
-            <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">OLLAMA_BASE_URL</code>{' '}
-            or{' '}
-            <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
-              MOSAIC_CUSTOM_PROVIDERS
-            </code>{' '}
-            to add providers.
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {providers.map((provider) => (
-            <ProviderCard
-              key={provider.id}
-              provider={provider}
-              defaultModel={defaultModel}
-              testStatus={testStatuses[provider.id] ?? { state: 'idle' }}
-              onTest={() => void testConnection(provider.id)}
-            />
-          ))}
-        </div>
-      )}
+    <section className="space-y-6">
+      <div className="space-y-4">
+        <h2 className="text-lg font-medium text-text-secondary">SSO Providers</h2>
+        <SsoProviderSection providers={ssoProviders} loading={ssoLoading} />
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-lg font-medium text-text-secondary">LLM Providers</h2>
+        {loading ? (
+          <p className="text-sm text-text-muted">Loading providers...</p>
+        ) : providers.length === 0 ? (
+          <div className="rounded-lg border border-surface-border bg-surface-card p-4">
+            <p className="text-sm text-text-muted">
+              No providers configured. Set{' '}
+              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
+                OLLAMA_BASE_URL
+              </code>{' '}
+              or{' '}
+              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
+                MOSAIC_CUSTOM_PROVIDERS
+              </code>{' '}
+              to add providers.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {providers.map((provider) => (
+              <ProviderCard
+                key={provider.id}
+                provider={provider}
+                defaultModel={defaultModel}
+                testStatus={testStatuses[provider.id] ?? { state: 'idle' }}
+                onTest={() => void testConnection(provider.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
    </section>
  );
 }