feat(sso): Azure AD / Entra ID SAML 2.0 integration

- sso_service: fix process_callback for Azure AD claim URIs (email, role)
  - Default role_attr to full Azure role claim URI
  - Fallback email resolution via Azure email claim URI + NameID
  - Username defaults to full email (prevents collision with local accounts)
  - User lookup also tries email field for existing local accounts
  - Logs warning when unknown role received from IdP

- frontend/api/sso.ts: new API module with getSsoStatus, getSsoConfig, updateSsoConfig

- LoginPage: redesigned for SSO-first flow
  - Shows Azure SSO button as primary when SSO enabled+configured
  - Local login collapsed under "Emergency admin access" section
  - Falls back to normal local login form when SSO is disabled

- SystemPage: new SsoConfigSection component (guided 5-step wizard)
  - Step 1: Copy SP Entity ID and ACS URL for IT team + metadata XML download
  - Step 2: Azure App Roles reference table (6 roles with exact values)
  - Step 3: Tenant ID field auto-fills idp_entity_id and idp_sso_url
  - Step 4: X.509 certificate paste field
  - Step 5: Attribute mapping pre-filled with Azure AD claim URIs
  - Enable/disable toggle + save
This commit is contained in:
kitos
2026-06-08 13:48:36 +02:00
parent 0c9f3051b4
commit a7725ba519
4 changed files with 701 additions and 63 deletions
+458
View File
@@ -27,8 +27,17 @@ import {
ExternalLink,
CalendarCheck,
ShieldCheck,
KeyRound,
Copy,
Building2,
} from "lucide-react";
import client from "../api/client";
import {
getSsoConfig,
updateSsoConfig,
type SsoConfig,
type SsoConfigUpdate,
} from "../api/sso";
import {
triggerMitreSync,
triggerIntelScan,
@@ -1075,6 +1084,9 @@ export default function SystemPage() {
)}
</div>
{/* SSO / Azure AD Configuration */}
<SsoConfigSection />
{/* System Information */}
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
<h2 className="mb-4 text-lg font-semibold text-white">System Information</h2>
@@ -1768,6 +1780,452 @@ function CreateTemplateForm({
);
}
/* ── SSO / Azure AD Configuration Section ───────────────────────── */
const AZURE_ROLES = [
{ value: "admin", label: "Aegis Admin", desc: "Full platform access including system settings" },
{ value: "red_lead", label: "Aegis Red Lead", desc: "Red team lead — manage tests, campaigns and templates" },
{ value: "blue_lead", label: "Aegis Blue Lead", desc: "Blue team lead — validate tests and manage coverage" },
{ value: "red_tech", label: "Aegis Red Tech", desc: "Red team technician — execute tests" },
{ value: "blue_tech", label: "Aegis Blue Tech", desc: "Blue team technician — review detections" },
{ value: "viewer", label: "Aegis Viewer", desc: "Read-only access to dashboards and reports" },
];
function CopyField({ value, label }: { value: string; label: string }) {
const [copied, setCopied] = useState(false);
const copy = () => {
navigator.clipboard.writeText(value).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
});
};
return (
<div>
<label className="mb-1 block text-xs font-medium text-gray-400">{label}</label>
<div className="flex items-center gap-2">
<code className="flex-1 truncate rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-cyan-300 font-mono">
{value || <span className="text-gray-600 italic">not set</span>}
</code>
<button
type="button"
onClick={copy}
disabled={!value}
className="flex-shrink-0 rounded-lg border border-gray-700 bg-gray-800 p-2 text-gray-400 transition-colors hover:text-white disabled:opacity-40"
title="Copy"
>
{copied ? <CheckCircle className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
</button>
</div>
</div>
);
}
function SsoConfigSection() {
const queryClient = useQueryClient();
// Derive default SP values from the current browser origin
const origin = window.location.origin;
const defaultSpEntityId = `${origin}/api/v1/sso/metadata`;
const defaultSpAcsUrl = `${origin}/api/v1/sso/callback`;
const { data: existingConfig, isLoading: configLoading } = useQuery<SsoConfig | null>({
queryKey: ["sso-config"],
queryFn: async () => {
try {
return await getSsoConfig();
} catch {
return null; // 404 = not configured yet
}
},
});
// Form state — pre-seeded from existing config when loaded
const [tenantId, setTenantId] = useState("");
const [form, setForm] = useState<SsoConfigUpdate>({
is_enabled: false,
provider_name: "Azure AD / Entra ID",
sp_entity_id: defaultSpEntityId,
sp_acs_url: defaultSpAcsUrl,
idp_entity_id: "",
idp_sso_url: "",
idp_certificate: "",
attr_email: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
attr_username: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
attr_role: "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",
default_role: "viewer",
auto_provision: true,
});
const [formLoaded, setFormLoaded] = useState(false);
const [saveSuccess, setSaveSuccess] = useState(false);
// Load existing config into form (once)
if (existingConfig && !formLoaded) {
setForm({
is_enabled: existingConfig.is_enabled,
provider_name: existingConfig.provider_name ?? "Azure AD / Entra ID",
sp_entity_id: existingConfig.sp_entity_id ?? defaultSpEntityId,
sp_acs_url: existingConfig.sp_acs_url ?? defaultSpAcsUrl,
idp_entity_id: existingConfig.idp_entity_id ?? "",
idp_sso_url: existingConfig.idp_sso_url ?? "",
idp_certificate: existingConfig.idp_certificate ?? "",
attr_email: existingConfig.attr_email ?? "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
attr_username: existingConfig.attr_username ?? "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
attr_role: existingConfig.attr_role ?? "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",
default_role: existingConfig.default_role ?? "viewer",
auto_provision: existingConfig.auto_provision ?? true,
});
// Try to extract tenant ID from existing idp_sso_url
if (existingConfig.idp_sso_url) {
const m = existingConfig.idp_sso_url.match(/microsoftonline\.com\/([^/]+)\//);
if (m) setTenantId(m[1]);
}
setFormLoaded(true);
}
// Auto-fill IdP URLs when tenant ID is entered
const handleTenantChange = (val: string) => {
setTenantId(val);
if (val.trim()) {
setForm((f) => ({
...f,
idp_entity_id: `https://sts.windows.net/${val.trim()}/`,
idp_sso_url: `https://login.microsoftonline.com/${val.trim()}/saml2`,
}));
}
};
const saveMutation = useMutation({
mutationFn: (payload: SsoConfigUpdate) => updateSsoConfig(payload),
onSuccess: () => {
setSaveSuccess(true);
setTimeout(() => setSaveSuccess(false), 4000);
queryClient.invalidateQueries({ queryKey: ["sso-config"] });
queryClient.invalidateQueries({ queryKey: ["sso-status"] });
},
});
const handleSave = (e: React.FormEvent) => {
e.preventDefault();
saveMutation.mutate(form);
};
const isConfigured = !!(form.idp_entity_id && form.idp_sso_url && form.idp_certificate);
return (
<div className="rounded-xl border border-indigo-500/30 bg-gray-900 p-6">
{/* Header */}
<div className="flex flex-wrap items-start justify-between gap-4 mb-6">
<div className="flex items-start gap-4">
<div className="rounded-lg bg-indigo-500/10 p-3 mt-0.5">
<KeyRound className="h-6 w-6 text-indigo-400" />
</div>
<div>
<h2 className="text-lg font-semibold text-white">Azure AD / Entra ID SSO</h2>
<p className="mt-1 text-sm text-gray-400 max-w-2xl">
Delegate authentication to Azure Active Directory via SAML 2.0.
Users sign in with their corporate credentials; roles are assigned automatically via Azure App Roles.
</p>
</div>
</div>
{/* Enabled badge */}
<span className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium ${
form.is_enabled && isConfigured
? "border-green-500/40 bg-green-900/20 text-green-400"
: "border-gray-600 bg-gray-800/50 text-gray-400"
}`}>
{form.is_enabled && isConfigured ? (
<><CheckCircle className="h-3 w-3" /> Active</>
) : (
<><XCircle className="h-3 w-3" /> {isConfigured ? "Disabled" : "Not configured"}</>
)}
</span>
</div>
{configLoading ? (
<div className="flex justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-indigo-400" />
</div>
) : (
<form onSubmit={handleSave} className="space-y-8">
{/* ── Step 1: SP values for IT ─────────────────────────── */}
<div>
<div className="mb-3 flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">1</span>
<h3 className="text-sm font-semibold text-white">Give these values to your IT team</h3>
</div>
<p className="mb-4 text-xs text-gray-400">
Your IT team needs to register Aegis as an Enterprise Application in Azure AD.
Provide them with the following SP (Service Provider) values:
</p>
<div className="space-y-3 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
<CopyField
label="Entity ID (Identifier)"
value={form.sp_entity_id ?? defaultSpEntityId}
/>
<CopyField
label="Reply URL (Assertion Consumer Service)"
value={form.sp_acs_url ?? defaultSpAcsUrl}
/>
<div className="pt-1">
<a
href="/api/v1/sso/metadata"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 rounded-lg border border-indigo-500/30 bg-indigo-900/20 px-3 py-1.5 text-xs font-medium text-indigo-400 transition-colors hover:bg-indigo-900/40"
>
<Download className="h-3.5 w-3.5" />
Download SP Metadata XML
</a>
<span className="ml-2 text-xs text-gray-500">
(Alternative to manual entry import this XML directly into Azure AD)
</span>
</div>
</div>
</div>
{/* ── Step 2: Azure App Roles to create ───────────────── */}
<div>
<div className="mb-3 flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">2</span>
<h3 className="text-sm font-semibold text-white">Create App Roles in Azure</h3>
</div>
<p className="mb-3 text-xs text-gray-400">
In your Azure Enterprise App App Roles, create the following roles. The{" "}
<strong className="text-gray-200">Value</strong> field must match exactly (case-sensitive):
</p>
<div className="overflow-x-auto rounded-lg border border-gray-700 bg-gray-800/30">
<table className="w-full text-left text-xs">
<thead>
<tr className="border-b border-gray-700">
<th className="px-4 py-2.5 font-semibold text-gray-400">Display Name</th>
<th className="px-4 py-2.5 font-semibold text-gray-400">Value (exact)</th>
<th className="px-4 py-2.5 font-semibold text-gray-400">Description</th>
</tr>
</thead>
<tbody>
{AZURE_ROLES.map((r) => (
<tr key={r.value} className="border-b border-gray-700/50 hover:bg-gray-700/20">
<td className="px-4 py-2.5 text-gray-200">{r.label}</td>
<td className="px-4 py-2.5">
<code className="rounded bg-gray-800 px-1.5 py-0.5 text-indigo-300 font-mono">
{r.value}
</code>
</td>
<td className="px-4 py-2.5 text-gray-400">{r.desc}</td>
</tr>
))}
</tbody>
</table>
</div>
<p className="mt-2 text-xs text-gray-500">
After creating roles, assign them to users or groups in Azure AD Enterprise Applications Users and groups.
</p>
</div>
{/* ── Step 3: IdP configuration ───────────────────────── */}
<div>
<div className="mb-3 flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">3</span>
<h3 className="text-sm font-semibold text-white">Enter Azure tenant details</h3>
</div>
<div className="space-y-4 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
{/* Tenant ID shortcut */}
<div>
<label className="mb-1 block text-xs font-medium text-gray-300">
Tenant ID <span className="text-gray-500">(auto-fills the fields below)</span>
</label>
<input
type="text"
value={tenantId}
onChange={(e) => handleTenantChange(e.target.value)}
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
/>
<p className="mt-1 text-xs text-gray-500">
Found in Azure AD Overview Tenant ID
</p>
</div>
{/* IdP Entity ID */}
<div>
<label className="mb-1 block text-xs font-medium text-gray-300">
IdP Entity ID <span className="text-red-400">*</span>
</label>
<input
type="text"
value={form.idp_entity_id ?? ""}
onChange={(e) => setForm({ ...form, idp_entity_id: e.target.value })}
placeholder="https://sts.windows.net/{tenant-id}/"
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
/>
</div>
{/* IdP SSO URL */}
<div>
<label className="mb-1 block text-xs font-medium text-gray-300">
SSO URL (Login URL) <span className="text-red-400">*</span>
</label>
<input
type="text"
value={form.idp_sso_url ?? ""}
onChange={(e) => setForm({ ...form, idp_sso_url: e.target.value })}
placeholder="https://login.microsoftonline.com/{tenant-id}/saml2"
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
/>
</div>
{/* Provider display name */}
<div>
<label className="mb-1 block text-xs font-medium text-gray-300">
Display name <span className="text-gray-500">(shown on login page)</span>
</label>
<input
type="text"
value={form.provider_name ?? ""}
onChange={(e) => setForm({ ...form, provider_name: e.target.value })}
placeholder="Azure AD / Entra ID"
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none"
/>
</div>
</div>
</div>
{/* ── Step 4: X.509 Certificate ───────────────────────── */}
<div>
<div className="mb-3 flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">4</span>
<h3 className="text-sm font-semibold text-white">Paste IdP certificate</h3>
</div>
<p className="mb-3 text-xs text-gray-400">
In Azure AD Enterprise App Single sign-on SAML Signing Certificate, download the{" "}
<strong className="text-gray-200">Base64 certificate</strong> and paste its contents below.
</p>
<textarea
value={form.idp_certificate ?? ""}
onChange={(e) => setForm({ ...form, idp_certificate: e.target.value })}
placeholder={"-----BEGIN CERTIFICATE-----\nMIIC...base64...\n-----END CERTIFICATE-----"}
rows={6}
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
/>
<p className="mt-1 text-xs text-gray-500">
Include the header and footer lines, or paste just the base64 block both are accepted.
</p>
</div>
{/* ── Step 5: Attribute mapping ────────────────────────── */}
<div>
<div className="mb-3 flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">5</span>
<h3 className="text-sm font-semibold text-white">Attribute mapping</h3>
<span className="text-xs text-gray-500">(pre-filled with Azure AD defaults)</span>
</div>
<div className="space-y-3 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
<div>
<label className="mb-1 block text-xs font-medium text-gray-300">Email attribute</label>
<input
type="text"
value={form.attr_email ?? ""}
onChange={(e) => setForm({ ...form, attr_email: e.target.value })}
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
/>
</div>
<div>
<label className="mb-1 block text-xs font-medium text-gray-300">Username attribute</label>
<input
type="text"
value={form.attr_username ?? ""}
onChange={(e) => setForm({ ...form, attr_username: e.target.value })}
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
/>
</div>
<div>
<label className="mb-1 block text-xs font-medium text-gray-300">Role attribute</label>
<input
type="text"
value={form.attr_role ?? ""}
onChange={(e) => setForm({ ...form, attr_role: e.target.value })}
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="mb-1 block text-xs font-medium text-gray-300">Default role</label>
<select
value={form.default_role ?? "viewer"}
onChange={(e) => setForm({ ...form, default_role: e.target.value })}
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 focus:border-indigo-500 focus:outline-none"
>
{AZURE_ROLES.map((r) => (
<option key={r.value} value={r.value}>{r.label}</option>
))}
</select>
</div>
<div className="flex items-end gap-3 pb-0.5">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={form.auto_provision ?? true}
onChange={(e) => setForm({ ...form, auto_provision: e.target.checked })}
className="h-4 w-4 rounded accent-indigo-500"
/>
<span className="text-sm text-gray-300">Auto-provision new users</span>
</label>
</div>
</div>
</div>
</div>
{/* ── Enable toggle + Save ─────────────────────────────── */}
<div className="flex flex-wrap items-center justify-between gap-4 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
<label className="flex items-center gap-3 cursor-pointer">
<div
onClick={() => setForm((f) => ({ ...f, is_enabled: !f.is_enabled }))}
className={`relative h-6 w-11 rounded-full transition-colors ${
form.is_enabled ? "bg-indigo-600" : "bg-gray-600"
}`}
>
<span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
form.is_enabled ? "translate-x-5" : "translate-x-0.5"
}`} />
</div>
<span className="text-sm font-medium text-gray-200">
{form.is_enabled ? "SSO enabled — Azure AD is the primary login" : "SSO disabled — local login only"}
</span>
</label>
<div className="flex items-center gap-3">
{saveSuccess && (
<span className="flex items-center gap-1.5 text-sm text-green-400">
<CheckCircle className="h-4 w-4" /> Saved
</span>
)}
{saveMutation.isError && (
<span className="text-sm text-red-400">
{(saveMutation.error as Error)?.message ?? "Save failed"}
</span>
)}
<button
type="submit"
disabled={saveMutation.isPending || !isConfigured}
className="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
title={!isConfigured ? "Fill in IdP Entity ID, SSO URL, and Certificate first" : undefined}
>
{saveMutation.isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Building2 className="h-4 w-4" />
)}
{saveMutation.isPending ? "Saving…" : "Save configuration"}
</button>
</div>
</div>
</form>
)}
</div>
);
}
/* ── Template Detail / Edit Modal ────────────────────────────────── */
function TemplateDetailModal({