mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-09-08 08:26:57 +00:00
Anso
c6d9fb98e5
SSO configuration is control-plane state and must not follow the active remote node. Add /api/sso/ to hub-only prefixes with case-insensitive matching, hide the Settings section on remotes, and use localOnly on every SSOSection fetch as defense in depth.
742 lines
34 KiB
TypeScript
742 lines
34 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { TogglePill } from '@/components/ui/toggle-pill';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Combobox } from '@/components/ui/combobox';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { SegmentedControl } from '@/components/ui/segmented-control';
|
|
import { toast } from '@/components/ui/toast-store';
|
|
import { apiFetch } from '@/lib/api';
|
|
import { CapabilityGate } from './CapabilityGate';
|
|
import { PaidGate } from './PaidGate';
|
|
import { Loader2, CheckCircle, XCircle } from 'lucide-react';
|
|
import { SettingsPrimaryButton } from './settings/SettingsActions';
|
|
import { useMastheadStats } from './settings/MastheadStatsContext';
|
|
|
|
const ROLE_OPTIONS = [
|
|
{ value: 'viewer', label: 'Viewer' },
|
|
{ value: 'admin', label: 'Admin' },
|
|
];
|
|
|
|
interface SSOProviderConfig {
|
|
provider: string;
|
|
enabled: boolean;
|
|
displayName: string;
|
|
// LDAP
|
|
ldapUrl?: string;
|
|
ldapBindDn?: string;
|
|
ldapBindPassword?: string;
|
|
ldapSearchBase?: string;
|
|
ldapSearchFilter?: string;
|
|
ldapAdminGroupDn?: string;
|
|
ldapDefaultRole?: string;
|
|
ldapTlsRejectUnauthorized?: boolean;
|
|
// OIDC
|
|
oidcIssuerUrl?: string;
|
|
oidcClientId?: string;
|
|
oidcClientSecret?: string;
|
|
oidcScopes?: string;
|
|
oidcAdminClaim?: string;
|
|
oidcAdminClaimValue?: string;
|
|
oidcDefaultRole?: string;
|
|
// Custom OIDC claim mapping
|
|
oidcIdClaim?: string;
|
|
oidcUsernameClaim?: string;
|
|
oidcEmailClaim?: string;
|
|
}
|
|
|
|
// Ordered by tier: free OIDC (Custom + presets) first, then LDAP/AD (paid).
|
|
// The ordering reinforces the free → paid progression in the UI.
|
|
const PROVIDERS = [
|
|
{ id: 'oidc_custom', label: 'Custom OIDC', type: 'oidc' as const },
|
|
{ id: 'oidc_google', label: 'Google', type: 'oidc' as const },
|
|
{ id: 'oidc_github', label: 'GitHub', type: 'oidc' as const },
|
|
{ id: 'oidc_okta', label: 'Okta', type: 'oidc' as const },
|
|
{ id: 'ldap', label: 'LDAP / Active Directory', type: 'ldap' as const },
|
|
];
|
|
|
|
function ProviderCard({ providerId, type, label, initialConfig, onSave }: {
|
|
providerId: string;
|
|
type: 'ldap' | 'oidc';
|
|
label: string;
|
|
initialConfig: SSOProviderConfig | null;
|
|
onSave: () => void;
|
|
}) {
|
|
const [config, setConfig] = useState<Partial<SSOProviderConfig>>(initialConfig || { enabled: false });
|
|
const [saving, setSaving] = useState(false);
|
|
const [testing, setTesting] = useState(false);
|
|
const [testResult, setTestResult] = useState<{ success: boolean; error?: string } | null>(null);
|
|
const [expanded, setExpanded] = useState(!!initialConfig?.enabled);
|
|
|
|
// Keep local draft aligned with the saved config once it loads (or refreshes
|
|
// after save). Without this, cards mount with enabled:false before fetch
|
|
// completes and the Active badge (from initialConfig) disagrees with the OFF toggle.
|
|
useEffect(() => {
|
|
setConfig(initialConfig || { enabled: false });
|
|
}, [initialConfig]);
|
|
|
|
const update = (field: string, value: string | boolean) => {
|
|
setConfig(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const body = {
|
|
...config,
|
|
provider: providerId,
|
|
displayName: config.displayName || label,
|
|
};
|
|
const res = await apiFetch(`/sso/config/${providerId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
localOnly: true,
|
|
});
|
|
if (res.ok) {
|
|
toast.success('SSO configuration saved');
|
|
onSave();
|
|
} else {
|
|
const data = await res.json();
|
|
toast.error(data?.error || data?.message || 'Failed to save');
|
|
}
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to save SSO configuration');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleTest = async () => {
|
|
setTesting(true);
|
|
setTestResult(null);
|
|
try {
|
|
const res = await apiFetch(`/sso/config/${providerId}/test`, { method: 'POST', localOnly: true });
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok) {
|
|
const message = data?.error || data?.message || 'Connection test failed';
|
|
setTestResult({ success: false, error: message });
|
|
toast.error(message);
|
|
return;
|
|
}
|
|
setTestResult(data);
|
|
if (data?.success) {
|
|
toast.success('Connection successful');
|
|
} else {
|
|
toast.error(data?.error || 'Connection failed');
|
|
}
|
|
} catch (error: unknown) {
|
|
const message = (error as Error)?.message || 'Connection test failed';
|
|
setTestResult({ success: false, error: message });
|
|
toast.error(message);
|
|
} finally {
|
|
setTesting(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
try {
|
|
const res = await apiFetch(`/sso/config/${providerId}`, { method: 'DELETE', localOnly: true });
|
|
if (res.ok) {
|
|
toast.success('SSO provider removed');
|
|
setConfig({ enabled: false });
|
|
setExpanded(false);
|
|
onSave();
|
|
} else {
|
|
const data = await res.json().catch(() => null);
|
|
toast.error(data?.error || data?.message || 'Failed to remove provider');
|
|
}
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to remove provider');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel transition-colors hover:border-t-card-border-hover">
|
|
<div
|
|
className="flex items-center justify-between p-4 cursor-pointer hover:bg-muted/30 transition-colors"
|
|
onClick={() => setExpanded(!expanded)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="font-medium text-sm">{label}</span>
|
|
{config.enabled && (
|
|
<Badge variant="secondary" className="text-xs bg-success-muted text-success border-success/20">
|
|
Active
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<TogglePill
|
|
checked={!!config.enabled}
|
|
onChange={(checked) => update('enabled', checked)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{expanded && (
|
|
<div className="border-t border-border p-4 space-y-4">
|
|
{type === 'ldap' ? (
|
|
<>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Server URL</Label>
|
|
<Input
|
|
placeholder="ldap://ldap.example.com:389"
|
|
value={config.ldapUrl || ''}
|
|
onChange={e => update('ldapUrl', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Bind DN</Label>
|
|
<Input
|
|
placeholder="cn=readonly,dc=example,dc=com"
|
|
value={config.ldapBindDn || ''}
|
|
onChange={e => update('ldapBindDn', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Bind Password</Label>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter to update"
|
|
value={config.ldapBindPassword || ''}
|
|
onChange={e => update('ldapBindPassword', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Search Base</Label>
|
|
<Input
|
|
placeholder="ou=users,dc=example,dc=com"
|
|
value={config.ldapSearchBase || ''}
|
|
onChange={e => update('ldapSearchBase', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Search Filter</Label>
|
|
<Input
|
|
placeholder="(uid={{username}})"
|
|
value={config.ldapSearchFilter || ''}
|
|
onChange={e => update('ldapSearchFilter', e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Use <code className="bg-muted px-1 rounded">{'{{username}}'}</code> as placeholder.
|
|
For Active Directory: <code className="bg-muted px-1 rounded">{'(sAMAccountName={{username}})'}</code>
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Admin Group DN</Label>
|
|
<Input
|
|
placeholder="cn=sencho-admins,ou=groups,dc=..."
|
|
value={config.ldapAdminGroupDn || ''}
|
|
onChange={e => update('ldapAdminGroupDn', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Default Role</Label>
|
|
<Combobox
|
|
options={ROLE_OPTIONS}
|
|
value={config.ldapDefaultRole || 'viewer'}
|
|
onValueChange={v => update('ldapDefaultRole', v)}
|
|
placeholder="Select role"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<TogglePill
|
|
checked={config.ldapTlsRejectUnauthorized !== false}
|
|
onChange={checked => update('ldapTlsRejectUnauthorized', checked)}
|
|
/>
|
|
<Label className="text-xs text-muted-foreground">Verify TLS certificate</Label>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
{providerId === 'oidc_custom' && (
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Display Name</Label>
|
|
<Input
|
|
placeholder="My Identity Provider"
|
|
value={config.displayName || ''}
|
|
onChange={e => update('displayName', e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Name shown on the login button (e.g., "Corporate SSO").
|
|
</p>
|
|
</div>
|
|
)}
|
|
{(providerId === 'oidc_okta' || providerId === 'oidc_custom') && (
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Issuer URL</Label>
|
|
<Input
|
|
placeholder={providerId === 'oidc_okta' ? 'https://dev-123456.okta.com' : 'https://auth.example.com/realms/myrealm'}
|
|
value={config.oidcIssuerUrl || ''}
|
|
onChange={e => update('oidcIssuerUrl', e.target.value)}
|
|
/>
|
|
{providerId === 'oidc_custom' && (
|
|
<p className="text-xs text-muted-foreground">
|
|
Base URL of the OIDC discovery endpoint (without <code className="bg-muted px-1 rounded">/.well-known/openid-configuration</code>).
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Client ID</Label>
|
|
<Input
|
|
placeholder="Client ID"
|
|
value={config.oidcClientId || ''}
|
|
onChange={e => update('oidcClientId', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Client Secret</Label>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter to update"
|
|
value={config.oidcClientSecret || ''}
|
|
onChange={e => update('oidcClientSecret', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Admin Claim</Label>
|
|
<Input
|
|
placeholder="groups"
|
|
value={config.oidcAdminClaim || ''}
|
|
onChange={e => update('oidcAdminClaim', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Admin Claim Value</Label>
|
|
<Input
|
|
placeholder="sencho-admins"
|
|
value={config.oidcAdminClaimValue || ''}
|
|
onChange={e => update('oidcAdminClaimValue', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3 items-start">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Scopes</Label>
|
|
<Input
|
|
placeholder="openid email profile"
|
|
value={config.oidcScopes || ''}
|
|
onChange={e => update('oidcScopes', e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Space-separated list of OAuth scopes. Leave blank for default.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Default Role</Label>
|
|
<Combobox
|
|
options={ROLE_OPTIONS}
|
|
value={config.oidcDefaultRole || 'viewer'}
|
|
onValueChange={v => update('oidcDefaultRole', v)}
|
|
placeholder="Select role"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{providerId === 'oidc_custom' && (
|
|
<>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">User ID Claim</Label>
|
|
<Input
|
|
placeholder="sub"
|
|
value={config.oidcIdClaim || ''}
|
|
onChange={e => update('oidcIdClaim', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Username Claim</Label>
|
|
<Input
|
|
placeholder="preferred_username"
|
|
value={config.oidcUsernameClaim || ''}
|
|
onChange={e => update('oidcUsernameClaim', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Email Claim</Label>
|
|
<Input
|
|
placeholder="email"
|
|
value={config.oidcEmailClaim || ''}
|
|
onChange={e => update('oidcEmailClaim', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Map claims from your provider's token to Sencho user fields. Leave blank for standard OIDC defaults.
|
|
</p>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between pt-2">
|
|
<div className="flex items-center gap-2">
|
|
<SettingsPrimaryButton size="sm" onClick={handleSave} disabled={saving}>
|
|
{saving ? <><Loader2 className="w-3 h-3 animate-spin" /> Saving</> : 'Save'}
|
|
</SettingsPrimaryButton>
|
|
<Button size="sm" variant="outline" onClick={handleTest} disabled={testing}>
|
|
{testing ? <><Loader2 className="w-3 h-3 mr-1 animate-spin" /> Testing...</> : 'Test Connection'}
|
|
</Button>
|
|
{testResult && (
|
|
testResult.success
|
|
? <CheckCircle className="w-4 h-4 text-success" />
|
|
: <XCircle className="w-4 h-4 text-destructive" />
|
|
)}
|
|
</div>
|
|
{initialConfig && (
|
|
<Button size="sm" variant="ghost" className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground" onClick={handleDelete}>
|
|
Remove
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Mirrors the backend tier split in ssoConfig.ts requireTierForProvider: Custom OIDC
|
|
// and preset OIDC (Google/GitHub/Okta) are free, LDAP/AD requires the paid plan.
|
|
function ProviderCardWithGate(props: {
|
|
providerId: string;
|
|
type: 'ldap' | 'oidc';
|
|
label: string;
|
|
initialConfig: SSOProviderConfig | null;
|
|
onSave: () => void;
|
|
}) {
|
|
const card = <ProviderCard {...props} />;
|
|
if (props.providerId === 'ldap') {
|
|
return <PaidGate>{card}</PaidGate>;
|
|
}
|
|
return card;
|
|
}
|
|
|
|
type AuthMode = 'local_and_sso' | 'sso_only';
|
|
|
|
function RoleSyncToggle() {
|
|
// null = loading/unknown/unconfirmed; never present "off" as a confirmed
|
|
// state during loading or error.
|
|
const [enabled, setEnabled] = useState<boolean | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
void (async () => {
|
|
try {
|
|
const res = await apiFetch('/sso/config/role-sync', { localOnly: true });
|
|
if (!res.ok) {
|
|
if (!cancelled) {
|
|
const data = await res.json().catch(() => null);
|
|
toast.error(data?.error || data?.message || 'Failed to load role sync setting');
|
|
}
|
|
return;
|
|
}
|
|
const data = await res.json() as { enabled: boolean };
|
|
if (!cancelled) setEnabled(data.enabled);
|
|
} catch (error: unknown) {
|
|
if (!cancelled) {
|
|
setEnabled(null);
|
|
toast.error((error as Error)?.message || 'Failed to load role sync setting');
|
|
}
|
|
}
|
|
})();
|
|
return () => { cancelled = true; };
|
|
}, []);
|
|
|
|
const handleToggle = async (next: boolean) => {
|
|
if (saving) return;
|
|
setSaving(true);
|
|
try {
|
|
const res = await apiFetch('/sso/config/role-sync', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled: next }),
|
|
localOnly: true,
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => null);
|
|
toast.error(data?.error || data?.message || 'Failed to update role sync');
|
|
return;
|
|
}
|
|
setEnabled(next);
|
|
toast.success(next ? 'IdP role synchronization enabled' : 'IdP role synchronization disabled');
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to update role sync');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 rounded-md border border-card-border bg-card/40 p-4">
|
|
<div className="flex flex-col flex-1 min-w-0">
|
|
<Label className="font-mono text-[10px] uppercase tracking-[0.14em] text-stat-subtitle">
|
|
IdP role synchronization
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
When enabled, SSO sign-in syncs the provider's role group mapping over any role an admin assigns in Settings → Users. Disable to keep manual role edits persistent across logins.
|
|
</p>
|
|
</div>
|
|
{enabled === null ? (
|
|
<div className="flex items-center justify-center w-[60px]">
|
|
<Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : (
|
|
<TogglePill
|
|
checked={enabled}
|
|
onChange={handleToggle}
|
|
disabled={saving}
|
|
aria-label="IdP role synchronization"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const AUTH_MODE_OPTIONS: Array<{ value: AuthMode; label: string }> = [
|
|
{ value: 'local_and_sso', label: 'Local and SSO' },
|
|
{ value: 'sso_only', label: 'SSO only' },
|
|
];
|
|
|
|
const ENABLE_LOCAL_LOGIN_CLI = 'node dist/cli/enableLocalLogin.js';
|
|
|
|
function AuthenticationModePanel({
|
|
enabledProviderNames,
|
|
}: {
|
|
enabledProviderNames: string[];
|
|
}) {
|
|
const [mode, setMode] = useState<AuthMode>('local_and_sso');
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [confirmRisk, setConfirmRisk] = useState(false);
|
|
const [pendingMode, setPendingMode] = useState<AuthMode | null>(null);
|
|
|
|
const loadMode = async () => {
|
|
try {
|
|
const res = await apiFetch('/sso/auth-mode', { localOnly: true });
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => null);
|
|
toast.error(data?.error || 'Failed to load authentication mode');
|
|
return;
|
|
}
|
|
const data = await res.json() as { authenticationMode?: AuthMode };
|
|
if (data.authenticationMode === 'sso_only' || data.authenticationMode === 'local_and_sso') {
|
|
setMode(data.authenticationMode);
|
|
}
|
|
setLoaded(true);
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to load authentication mode');
|
|
}
|
|
};
|
|
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
useEffect(() => { void loadMode(); }, []);
|
|
|
|
const saveMode = async (next: AuthMode, confirm: boolean) => {
|
|
setSaving(true);
|
|
try {
|
|
const body =
|
|
next === 'sso_only'
|
|
? { mode: next, confirm }
|
|
: { mode: next };
|
|
const res = await apiFetch('/sso/auth-mode', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
localOnly: true,
|
|
});
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok) {
|
|
toast.error(data?.error || 'Failed to update authentication mode');
|
|
return;
|
|
}
|
|
setMode(next);
|
|
setPendingMode(null);
|
|
setConfirmRisk(false);
|
|
toast.success(
|
|
next === 'sso_only'
|
|
? 'SSO-only mode enabled. Local password login is disabled.'
|
|
: 'Local and SSO mode enabled.',
|
|
);
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to update authentication mode');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleModeChange = (next: AuthMode) => {
|
|
if (next === mode) return;
|
|
if (next === 'sso_only') {
|
|
setPendingMode('sso_only');
|
|
setConfirmRisk(false);
|
|
return;
|
|
}
|
|
void saveMode('local_and_sso', false);
|
|
};
|
|
|
|
if (!loaded) {
|
|
return (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Loader2 className="h-4 w-4 animate-spin" strokeWidth={1.5} />
|
|
Loading authentication mode
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3 rounded-md border border-card-border bg-card/40 p-4">
|
|
<div className="space-y-1">
|
|
<Label className="font-mono text-[10px] uppercase tracking-[0.14em] text-stat-subtitle">
|
|
Authentication mode
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Choose whether local password login remains available alongside SSO.
|
|
</p>
|
|
</div>
|
|
|
|
<SegmentedControl
|
|
value={pendingMode ?? mode}
|
|
options={AUTH_MODE_OPTIONS}
|
|
onChange={handleModeChange}
|
|
ariaLabel="Authentication mode"
|
|
disabled={saving}
|
|
/>
|
|
|
|
{mode === 'sso_only' && (
|
|
<p className="text-xs text-muted-foreground">
|
|
Local password login is disabled. Emergency recovery:{' '}
|
|
<code className="bg-muted px-1 rounded">{ENABLE_LOCAL_LOGIN_CLI}</code>
|
|
{' '}(no restart required).
|
|
</p>
|
|
)}
|
|
|
|
{pendingMode === 'sso_only' && (
|
|
<div className="space-y-3 rounded-md border border-warning/40 bg-warning/5 p-3">
|
|
<p className="text-sm text-stat-value">
|
|
Local password login will be disabled. Verify that SSO works and that your
|
|
account receives the Admin role before continuing.
|
|
</p>
|
|
{enabledProviderNames.length > 0 ? (
|
|
<p className="text-xs text-muted-foreground">
|
|
Providers that will remain available: {enabledProviderNames.join(', ')}.
|
|
</p>
|
|
) : (
|
|
<p className="text-xs text-destructive">
|
|
Enable and test at least one SSO provider before continuing.
|
|
</p>
|
|
)}
|
|
<p className="text-xs text-muted-foreground">
|
|
If the identity provider is unavailable, recover with{' '}
|
|
<code className="bg-muted px-1 rounded">{ENABLE_LOCAL_LOGIN_CLI}</code>
|
|
{' '}(no restart required).
|
|
</p>
|
|
<label className="flex items-start gap-2 text-sm">
|
|
<Checkbox
|
|
checked={confirmRisk}
|
|
onCheckedChange={(v) => setConfirmRisk(v === true)}
|
|
disabled={saving}
|
|
/>
|
|
<span>I understand local password login will stop working until re-enabled.</span>
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<SettingsPrimaryButton
|
|
disabled={saving || !confirmRisk || enabledProviderNames.length === 0}
|
|
onClick={() => void saveMode('sso_only', true)}
|
|
>
|
|
{saving ? 'Saving…' : 'Enable SSO only'}
|
|
</SettingsPrimaryButton>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
disabled={saving}
|
|
onClick={() => {
|
|
setPendingMode(null);
|
|
setConfirmRisk(false);
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SSOSection() {
|
|
const [configs, setConfigs] = useState<SSOProviderConfig[]>([]);
|
|
|
|
const fetchConfigs = async () => {
|
|
try {
|
|
const res = await apiFetch('/sso/config', { localOnly: true });
|
|
if (res.ok) {
|
|
setConfigs(await res.json());
|
|
} else {
|
|
const data = await res.json().catch(() => null);
|
|
toast.error(data?.error || data?.message || 'Failed to load SSO configuration');
|
|
}
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to load SSO configuration');
|
|
}
|
|
};
|
|
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
useEffect(() => { fetchConfigs(); }, []);
|
|
|
|
const enabledProviders = configs.filter(c => c.enabled).length;
|
|
useMastheadStats([
|
|
{ label: 'PROVIDERS', value: `${configs.length}` },
|
|
{
|
|
label: 'ENABLED',
|
|
value: `${enabledProviders}`,
|
|
tone: enabledProviders > 0 ? 'value' : 'subtitle',
|
|
},
|
|
]);
|
|
|
|
const getConfig = (provider: string) => configs.find(c => c.provider === provider) || null;
|
|
const enabledProviderNames = configs
|
|
.filter(c => c.enabled)
|
|
.map(c => c.displayName || c.provider);
|
|
|
|
return (
|
|
<CapabilityGate capability="sso" featureName="SSO Authentication">
|
|
<div className="space-y-6">
|
|
<CapabilityGate capability="authentication-mode" featureName="Authentication mode">
|
|
<AuthenticationModePanel enabledProviderNames={enabledProviderNames} />
|
|
</CapabilityGate>
|
|
|
|
<div className="space-y-3">
|
|
{PROVIDERS.map(p => (
|
|
<ProviderCardWithGate
|
|
key={p.id}
|
|
providerId={p.id}
|
|
type={p.type}
|
|
label={p.label}
|
|
initialConfig={getConfig(p.id)}
|
|
onSave={fetchConfigs}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<RoleSyncToggle />
|
|
|
|
<div className="text-xs text-muted-foreground space-y-1">
|
|
<p>SSO users are automatically provisioned on first login and assigned a role based on your identity provider's group membership.</p>
|
|
<p>For OIDC providers, set the OAuth callback URL to: <code className="bg-muted px-1 rounded">{'https://<your-sencho-url>/api/auth/sso/oidc/<provider>/callback'}</code></p>
|
|
</div>
|
|
</div>
|
|
</CapabilityGate>
|
|
);
|
|
}
|