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
@@ -176,21 +176,43 @@ def process_callback(db: Session, request_data: dict) -> User:
|
|||||||
# Extract attributes
|
# Extract attributes
|
||||||
attrs = auth.get_attributes()
|
attrs = auth.get_attributes()
|
||||||
name_id = auth.get_nameid()
|
name_id = auth.get_nameid()
|
||||||
email_attr = cfg.attr_email or "email"
|
|
||||||
username_attr = cfg.attr_username or "username"
|
|
||||||
role_attr = cfg.attr_role or "role"
|
|
||||||
|
|
||||||
email = _first_attr(attrs, email_attr) or name_id or ""
|
# Attribute claim URIs — defaults support both plain names and Azure AD full URIs
|
||||||
username = _first_attr(attrs, username_attr) or email.split("@")[0] or name_id
|
email_attr = cfg.attr_email or "email"
|
||||||
role = _first_attr(attrs, role_attr) or cfg.default_role or "viewer"
|
username_attr = cfg.attr_username or "email" # Azure AD: use email as username
|
||||||
|
role_attr = cfg.attr_role or "http://schemas.microsoft.com/ws/2008/06/identity/claims/role"
|
||||||
|
|
||||||
|
# Resolve email: try configured attr → Azure email claim URI → NameID
|
||||||
|
email = (
|
||||||
|
_first_attr(attrs, email_attr)
|
||||||
|
or _first_attr(attrs, "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress")
|
||||||
|
or name_id
|
||||||
|
or ""
|
||||||
|
)
|
||||||
|
|
||||||
|
# Resolve username: keep full email (e.g. user@company.com) to avoid collisions with local accounts
|
||||||
|
raw_username = _first_attr(attrs, username_attr) or email or name_id or ""
|
||||||
|
username = raw_username.strip() or email.split("@")[0] or name_id
|
||||||
|
|
||||||
|
# Resolve role: try configured attr → Azure role claim URI → default
|
||||||
|
role = (
|
||||||
|
_first_attr(attrs, role_attr)
|
||||||
|
or _first_attr(attrs, "http://schemas.microsoft.com/ws/2008/06/identity/claims/role")
|
||||||
|
or cfg.default_role
|
||||||
|
or "viewer"
|
||||||
|
)
|
||||||
|
|
||||||
# Validate role
|
# Validate role
|
||||||
valid_roles = {"admin", "red_lead", "blue_lead", "red_tech", "blue_tech", "viewer"}
|
valid_roles = {"admin", "red_lead", "blue_lead", "red_tech", "blue_tech", "viewer"}
|
||||||
if role not in valid_roles:
|
if role not in valid_roles:
|
||||||
|
log.warning("SSO: unknown role '%s' for user '%s', falling back to default", role, username)
|
||||||
role = cfg.default_role or "viewer"
|
role = cfg.default_role or "viewer"
|
||||||
|
|
||||||
# Look up or provision user
|
# Look up or provision user — try username first, then email (for existing local accounts)
|
||||||
user = db.query(User).filter(User.username == username).first()
|
user = (
|
||||||
|
db.query(User).filter(User.username == username).first()
|
||||||
|
or db.query(User).filter(User.email == email).first()
|
||||||
|
)
|
||||||
if user:
|
if user:
|
||||||
# Refresh role from IdP on every login
|
# Refresh role from IdP on every login
|
||||||
user.role = role
|
user.role = role
|
||||||
|
|||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import client from "./client";
|
||||||
|
|
||||||
|
export interface SsoStatus {
|
||||||
|
enabled: boolean;
|
||||||
|
provider_name: string | null;
|
||||||
|
configured: boolean;
|
||||||
|
login_url: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SsoConfig {
|
||||||
|
id: string;
|
||||||
|
is_enabled: boolean;
|
||||||
|
provider_name: string | null;
|
||||||
|
sp_entity_id: string | null;
|
||||||
|
sp_acs_url: string | null;
|
||||||
|
sp_slo_url: string | null;
|
||||||
|
sp_certificate: string | null;
|
||||||
|
idp_entity_id: string | null;
|
||||||
|
idp_sso_url: string | null;
|
||||||
|
idp_slo_url: string | null;
|
||||||
|
idp_certificate: string | null;
|
||||||
|
attr_email: string | null;
|
||||||
|
attr_username: string | null;
|
||||||
|
attr_role: string | null;
|
||||||
|
default_role: string | null;
|
||||||
|
auto_provision: boolean;
|
||||||
|
created_at: string | null;
|
||||||
|
updated_at: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SsoConfigUpdate {
|
||||||
|
is_enabled: boolean;
|
||||||
|
provider_name?: string | null;
|
||||||
|
sp_entity_id?: string | null;
|
||||||
|
sp_acs_url?: string | null;
|
||||||
|
sp_slo_url?: string | null;
|
||||||
|
sp_certificate?: string | null;
|
||||||
|
sp_private_key?: string | null;
|
||||||
|
idp_entity_id?: string | null;
|
||||||
|
idp_sso_url?: string | null;
|
||||||
|
idp_slo_url?: string | null;
|
||||||
|
idp_certificate?: string | null;
|
||||||
|
attr_email?: string | null;
|
||||||
|
attr_username?: string | null;
|
||||||
|
attr_role?: string | null;
|
||||||
|
default_role?: string | null;
|
||||||
|
auto_provision?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Public — used by LoginPage to decide which login to show. */
|
||||||
|
export async function getSsoStatus(): Promise<SsoStatus> {
|
||||||
|
const { data } = await client.get<SsoStatus>("/sso/status");
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Admin-only — full config. Returns 404 if never configured. */
|
||||||
|
export async function getSsoConfig(): Promise<SsoConfig> {
|
||||||
|
const { data } = await client.get<SsoConfig>("/sso/config");
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Admin-only — create or replace SSO config. */
|
||||||
|
export async function updateSsoConfig(payload: SsoConfigUpdate): Promise<SsoConfig> {
|
||||||
|
const { data } = await client.put<SsoConfig>("/sso/config", payload);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
@@ -1,6 +1,9 @@
|
|||||||
import { useState, type FormEvent } from "react";
|
import { useState, type FormEvent } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { ChevronDown, ChevronUp, ShieldAlert, Building2, Loader2 } from "lucide-react";
|
||||||
import { useAuth } from "../context/AuthContext";
|
import { useAuth } from "../context/AuthContext";
|
||||||
|
import { getSsoStatus } from "../api/sso";
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const { login, isAuthenticated } = useAuth();
|
const { login, isAuthenticated } = useAuth();
|
||||||
@@ -10,6 +13,17 @@ export default function LoginPage() {
|
|||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [emergencyOpen, setEmergencyOpen] = useState(false);
|
||||||
|
|
||||||
|
// Fetch SSO status to determine which login method to show
|
||||||
|
const { data: ssoStatus, isLoading: ssoLoading } = useQuery({
|
||||||
|
queryKey: ["sso-status"],
|
||||||
|
queryFn: getSsoStatus,
|
||||||
|
retry: false,
|
||||||
|
staleTime: 30_000,
|
||||||
|
});
|
||||||
|
|
||||||
|
const ssoActive = ssoStatus?.enabled && ssoStatus?.configured;
|
||||||
|
|
||||||
// If already logged in, redirect immediately
|
// If already logged in, redirect immediately
|
||||||
if (isAuthenticated) {
|
if (isAuthenticated) {
|
||||||
@@ -21,7 +35,6 @@ export default function LoginPage() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setError(null);
|
setError(null);
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await login(username, password);
|
await login(username, password);
|
||||||
navigate("/dashboard", { replace: true });
|
navigate("/dashboard", { replace: true });
|
||||||
@@ -38,67 +51,146 @@ export default function LoginPage() {
|
|||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<div className="flex flex-col items-center gap-3">
|
<div className="flex flex-col items-center gap-3">
|
||||||
<img src="/aegis-logo.png" alt="Aegis" className="h-16 w-16 rounded-full" />
|
<img src="/aegis-logo.png" alt="Aegis" className="h-16 w-16 rounded-full" />
|
||||||
<h1 className="text-2xl font-bold tracking-wide text-white">
|
<h1 className="text-2xl font-bold tracking-wide text-white">Aegis</h1>
|
||||||
Aegis
|
<p className="text-sm text-gray-400">MITRE ATT&CK Coverage Platform</p>
|
||||||
</h1>
|
|
||||||
<p className="text-sm text-gray-400">
|
|
||||||
MITRE ATT&CK Coverage Platform
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Form */}
|
{ssoLoading ? (
|
||||||
<form onSubmit={handleSubmit} className="space-y-5">
|
/* Loading SSO status */
|
||||||
<div>
|
<div className="flex justify-center py-6">
|
||||||
<label
|
<Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
|
||||||
htmlFor="username"
|
|
||||||
className="mb-1.5 block text-sm font-medium text-gray-300"
|
|
||||||
>
|
|
||||||
Username
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="username"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
autoFocus
|
|
||||||
value={username}
|
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
|
|
||||||
placeholder="admin"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
) : ssoActive ? (
|
||||||
<div>
|
/* ── SSO primary login ───────────────────────────────────── */
|
||||||
<label
|
<div className="space-y-5">
|
||||||
htmlFor="password"
|
{/* Primary: Azure SSO button */}
|
||||||
className="mb-1.5 block text-sm font-medium text-gray-300"
|
<a
|
||||||
|
href="/api/v1/sso/login"
|
||||||
|
className="flex w-full items-center justify-center gap-3 rounded-lg bg-[#0078d4] px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-[#106ebe] focus:outline-none focus:ring-2 focus:ring-[#0078d4]/50"
|
||||||
>
|
>
|
||||||
Password
|
<Building2 className="h-5 w-5" />
|
||||||
</label>
|
Sign in with {ssoStatus?.provider_name || "Azure AD"}
|
||||||
<input
|
</a>
|
||||||
id="password"
|
|
||||||
type="password"
|
|
||||||
required
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
|
|
||||||
placeholder="••••••••"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
<p className="text-center text-xs text-gray-500">
|
||||||
<p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-400">
|
Use your corporate credentials — managed by your IT team
|
||||||
{error}
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
{/* Emergency local login (collapsible) */}
|
||||||
type="submit"
|
<div className="rounded-lg border border-gray-800 bg-gray-900/60">
|
||||||
disabled={loading}
|
<button
|
||||||
className="w-full rounded-lg bg-cyan-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-cyan-500 disabled:opacity-50"
|
type="button"
|
||||||
>
|
onClick={() => setEmergencyOpen(!emergencyOpen)}
|
||||||
{loading ? "Signing in…" : "Sign in"}
|
className="flex w-full items-center justify-between rounded-lg px-4 py-3 text-left transition-colors hover:bg-gray-800/40"
|
||||||
</button>
|
>
|
||||||
</form>
|
<div className="flex items-center gap-2">
|
||||||
|
<ShieldAlert className="h-4 w-4 text-yellow-500" />
|
||||||
|
<span className="text-sm font-medium text-yellow-400">
|
||||||
|
Emergency admin access
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{emergencyOpen ? (
|
||||||
|
<ChevronUp className="h-4 w-4 text-gray-500" />
|
||||||
|
) : (
|
||||||
|
<ChevronDown className="h-4 w-4 text-gray-500" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{emergencyOpen && (
|
||||||
|
<div className="border-t border-gray-800 px-4 pb-4 pt-3">
|
||||||
|
<p className="mb-3 text-xs text-gray-500">
|
||||||
|
Local login — only for emergency admin access when SSO is unavailable.
|
||||||
|
</p>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
autoFocus
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
placeholder="Username"
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
required
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
placeholder="Password"
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
|
||||||
|
/>
|
||||||
|
{error && (
|
||||||
|
<p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-400">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full rounded-lg bg-gray-700 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? "Signing in…" : "Sign in locally"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* ── Local login (SSO not configured) ───────────────────── */
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="username"
|
||||||
|
className="mb-1.5 block text-sm font-medium text-gray-300"
|
||||||
|
>
|
||||||
|
Username
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
autoFocus
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
|
||||||
|
placeholder="admin"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="password"
|
||||||
|
className="mb-1.5 block text-sm font-medium text-gray-300"
|
||||||
|
>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
required
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
|
||||||
|
placeholder="••••••••"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-400">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full rounded-lg bg-cyan-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-cyan-500 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? "Signing in…" : "Sign in"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -27,8 +27,17 @@ import {
|
|||||||
ExternalLink,
|
ExternalLink,
|
||||||
CalendarCheck,
|
CalendarCheck,
|
||||||
ShieldCheck,
|
ShieldCheck,
|
||||||
|
KeyRound,
|
||||||
|
Copy,
|
||||||
|
Building2,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import client from "../api/client";
|
import client from "../api/client";
|
||||||
|
import {
|
||||||
|
getSsoConfig,
|
||||||
|
updateSsoConfig,
|
||||||
|
type SsoConfig,
|
||||||
|
type SsoConfigUpdate,
|
||||||
|
} from "../api/sso";
|
||||||
import {
|
import {
|
||||||
triggerMitreSync,
|
triggerMitreSync,
|
||||||
triggerIntelScan,
|
triggerIntelScan,
|
||||||
@@ -1075,6 +1084,9 @@ export default function SystemPage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* SSO / Azure AD Configuration */}
|
||||||
|
<SsoConfigSection />
|
||||||
|
|
||||||
{/* System Information */}
|
{/* System Information */}
|
||||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
<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>
|
<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 ────────────────────────────────── */
|
/* ── Template Detail / Edit Modal ────────────────────────────────── */
|
||||||
|
|
||||||
function TemplateDetailModal({
|
function TemplateDetailModal({
|
||||||
|
|||||||
Reference in New Issue
Block a user