forked from baron/baron-sso
112 lines
4.2 KiB
TypeScript
112 lines
4.2 KiB
TypeScript
import { ArrowRight, Fingerprint, Smartphone, Sparkles } from "lucide-react";
|
|
|
|
const flows = [
|
|
{
|
|
title: "Admin login",
|
|
description:
|
|
"Enforce short TTL and step-up MFA. Keep admin session separate from app session.",
|
|
pill: "15m TTL",
|
|
},
|
|
{
|
|
title: "Tenant pick",
|
|
description:
|
|
"Admin chooses target tenant before hitting APIs. Propagate X-Tenant-ID on every call.",
|
|
pill: "Header-ready",
|
|
},
|
|
{
|
|
title: "Device approval",
|
|
description:
|
|
"If app session exists and user opts in, use push/deeplink approval as MFA replacement.",
|
|
pill: "App session",
|
|
},
|
|
];
|
|
|
|
function AuthPage() {
|
|
return (
|
|
<div className="space-y-8">
|
|
<section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6 shadow-[var(--shadow-card)]">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
|
|
Admin auth
|
|
</p>
|
|
<h2 className="text-2xl font-semibold">Admin auth guardrails</h2>
|
|
<p className="text-sm text-[var(--color-muted)]">
|
|
Build the admin-only login flow first, keeping app login separate.
|
|
Respect the “fallback only when user chooses” rule for SMS/email
|
|
vs app approval.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="rounded-full border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-muted)]">
|
|
IDP session placeholder
|
|
</span>
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center gap-2 rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-black"
|
|
>
|
|
<Sparkles size={14} />
|
|
Connect auth layer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-4 md:grid-cols-3">
|
|
{flows.map((flow) => (
|
|
<div
|
|
key={flow.title}
|
|
className="rounded-xl border border-[var(--color-border)] bg-[var(--color-panel)] p-5"
|
|
>
|
|
<div className="flex items-center justify-between text-xs uppercase tracking-[0.16em] text-[var(--color-muted)]">
|
|
<span>{flow.pill}</span>
|
|
<Fingerprint size={14} />
|
|
</div>
|
|
<h3 className="mt-3 text-lg font-semibold">{flow.title}</h3>
|
|
<p className="text-sm text-[var(--color-muted)]">
|
|
{flow.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
<section className="grid gap-6 md:grid-cols-[1fr,0.9fr]">
|
|
<div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
|
|
<div className="flex items-center gap-2 text-[var(--color-muted)]">
|
|
<Smartphone size={16} />
|
|
<span className="text-xs uppercase tracking-[0.18em]">
|
|
App-based approvals
|
|
</span>
|
|
</div>
|
|
<h3 className="mt-2 text-xl font-semibold">
|
|
App session as MFA replacement
|
|
</h3>
|
|
<p className="text-sm text-[var(--color-muted)]">
|
|
If the admin keeps the mobile app signed in and opts in, use
|
|
push/deeplink approval instead of OTP. Otherwise fall back to
|
|
SMS/email based on user choice.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
|
|
<div className="flex items-center gap-2 text-[var(--color-muted)]">
|
|
<ArrowRight size={16} />
|
|
<span className="text-xs uppercase tracking-[0.18em]">
|
|
TTL discipline
|
|
</span>
|
|
</div>
|
|
<h3 className="mt-2 text-xl font-semibold">
|
|
Keep admin sessions short
|
|
</h3>
|
|
<p className="text-sm text-[var(--color-muted)]">
|
|
Default admin TTL is 15 minutes. Show countdown and nudge re-auth
|
|
with step-up MFA when critical actions (rotate secret, export logs)
|
|
happen.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AuthPage;
|