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/components/settings/sso-provider-section.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { SsoProviderDiscovery } from '@/lib/sso';
+
+interface SsoProviderSectionProps {
+  providers: SsoProviderDiscovery[];
+  loading: boolean;
+}
+
+export function SsoProviderSection({
+  providers,
+  loading,
+}: SsoProviderSectionProps): React.ReactElement {
+  if (loading) {
+    return <p className="text-sm text-text-muted">Loading SSO providers...</p>;
+  }
+
+  const configuredProviders = providers.filter((provider) => provider.configured);
+
+  if (providers.length === 0 || configuredProviders.length === 0) {
+    return (
+      <div className="rounded-lg border border-surface-border bg-surface-card p-4">
+        <p className="text-sm text-text-muted">
+          No SSO providers configured. Set WorkOS or Keycloak environment variables to enable SSO.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {configuredProviders.map((provider) => (
+        <div
+          key={provider.id}
+          className="rounded-lg border border-surface-border bg-surface-card p-4"
+        >
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <h3 className="text-sm font-medium text-text-primary">{provider.name}</h3>
+              <p className="text-xs text-text-muted">
+                {provider.protocols.join(' + ').toUpperCase()}
+                {provider.loginMode ? ` • primary ${provider.loginMode.toUpperCase()}` : ''}
+              </p>
+            </div>
+            <span className="rounded-full border border-accent/30 bg-accent/10 px-2 py-1 text-xs font-medium text-accent">
+              Enabled
+            </span>
+          </div>
+
+          <div className="mt-3 space-y-2 text-xs text-text-muted">
+            {provider.callbackPath && <p>Callback: {provider.callbackPath}</p>}
+            {provider.teamSync.enabled && provider.teamSync.claim && (
+              <p>Team sync claim: {provider.teamSync.claim}</p>
+            )}
+            {provider.samlFallback.configured && provider.samlFallback.loginUrl && (
+              <p>SAML fallback: {provider.samlFallback.loginUrl}</p>
+            )}
+            {provider.warnings.map((warning) => (
+              <p key={warning} className="text-warning">
+                {warning}
+              </p>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}