From 60a800f757557bcc2a0ee8b00ef1386661f41a1c Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 27 Apr 2026 08:55:24 +0200
Subject: [PATCH] feat: add passkey offer step to onboarding wizard

After tenant creation, checks vendor auth policy and conditionally
shows a passkey enrollment offer screen before redirecting. User
can skip and set up later.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/pages/OnboardingPage.tsx | 40 +++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/ui/src/pages/OnboardingPage.tsx b/ui/src/pages/OnboardingPage.tsx
index f78b16d..5f2ecd7 100644
--- a/ui/src/pages/OnboardingPage.tsx
+++ b/ui/src/pages/OnboardingPage.tsx
@@ -20,6 +20,7 @@ export function OnboardingPage() {
   const [error, setError] = useState<string | null>(null);
   const [slugAvailable, setSlugAvailable] = useState<boolean | null>(null);
   const [checkingSlug, setCheckingSlug] = useState(false);
+  const [showPasskeyOffer, setShowPasskeyOffer] = useState(false);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const slug = toSlug(name);
@@ -50,6 +51,17 @@ export function OnboardingPage() {
     setLoading(true);
     try {
       await api.post<TenantResponse>('/onboarding/tenant', { name, slug });
+      // Check if passkeys are enabled in vendor policy
+      try {
+        const config = await fetch('/platform/api/config').then(r => r.json());
+        if (config.vendorAuthPolicy?.passkeyEnabled) {
+          setShowPasskeyOffer(true);
+          setLoading(false);
+          return; // Don't redirect yet
+        }
+      } catch {
+        // Ignore — proceed without passkey offer
+      }
       // Tenant created — force a fresh OIDC sign-in so the Logto SDK gets
       // new tokens that include the org membership just created. The existing
       // Logto session cookie means the user won't see a login form — Logto
@@ -66,6 +78,34 @@ export function OnboardingPage() {
     }
   }
 
+  async function handleSkipPasskey() {
+    await signIn(`${window.location.origin}/platform/callback`);
+  }
+
+  if (showPasskeyOffer) {
+    return (
+      <div className={styles.page}>
+        <div className={styles.wrapper}>
+          <Card className={styles.card}>
+            <div className={styles.inner}>
+              <div style={{ textAlign: 'center' }}>
+                <h2 style={{ margin: '16px 0 8px' }}>Secure your account</h2>
+                <p style={{ color: 'var(--text-muted)', marginBottom: 24 }}>
+                  Add a passkey to sign in faster with your fingerprint, face, or security key.
+                </p>
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                <Button variant="secondary" onClick={handleSkipPasskey}>
+                  Set up later
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.page}>
       <div className={styles.wrapper}>