feat: always enable WebAuthn in MFA factors and add passkey registration

- Sync vendor auth policy to Logto sign-in experience on save and on
  startup. Always include WebAuthn + TOTP + BackupCode in MFA factors
  when MFA is enabled — no reason to gate passkeys behind a toggle.
- Enable Logto Account Center on startup for user-facing MFA management.
- Add passkey registration to account settings via Logto Account API.
  Frontend calls Logto directly (same domain) for the WebAuthn ceremony:
  generate options, browser credential creation, verify, and bind.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/api/logto-account-api.ts

@@ -0,0 +1,61 @@
+import { startRegistration } from '@simplewebauthn/browser';
+
+/**
+ * Logto Account API client for WebAuthn passkey registration.
+ * Calls Logto's Account API endpoints directly (same domain).
+ */
+
+async function accountApi(
+  method: string,
+  path: string,
+  token: string,
+  body?: unknown,
+): Promise<Response> {
+  return fetch(`/api${path}`, {
+    method,
+    headers: {
+      Authorization: `Bearer ${token}`,
+      ...(body ? { 'Content-Type': 'application/json' } : {}),
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+}
+
+export async function registerPasskey(getAccountToken: () => Promise<string>): Promise<void> {
+  const token = await getAccountToken();
+
+  // Step 1: Get registration options from Logto Account API
+  const optionsRes = await accountApi('POST', '/verifications/web-authn/registration', token);
+  if (!optionsRes.ok) {
+    const err = await optionsRes.json().catch(() => ({}));
+    throw new Error(err.message || `Failed to start passkey registration (${optionsRes.status})`);
+  }
+  const { registrationOptions, verificationRecordId } = await optionsRes.json();
+
+  // Step 2: Browser WebAuthn ceremony
+  const credential = await startRegistration({ optionsJSON: registrationOptions });
+
+  // Step 3: Verify the registration with Logto
+  const verifyRes = await accountApi(
+    'POST',
+    '/verifications/web-authn/registration/verify',
+    token,
+    { verificationRecordId, payload: credential },
+  );
+  if (!verifyRes.ok) {
+    const err = await verifyRes.json().catch(() => ({}));
+    throw new Error(err.message || `Passkey verification failed (${verifyRes.status})`);
+  }
+  const verifyData = await verifyRes.json();
+  const verifiedRecordId = verifyData.verificationRecordId;
+
+  // Step 4: Bind the passkey to the user's account
+  const bindRes = await accountApi('POST', '/my-account/mfa-verifications', token, {
+    type: 'WebAuthn',
+    newIdentifierVerificationRecordId: verifiedRecordId,
+  });
+  if (!bindRes.ok) {
+    const err = await bindRes.json().catch(() => ({}));
+    throw new Error(err.message || `Failed to bind passkey (${bindRes.status})`);
+  }
+}

ui/src/components/account/PasskeySection.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useLogto } from '@logto/react';
 import { errorMessage } from '../../api/client';
 import {
   Alert,
@@ -13,6 +14,7 @@ import {
   useAccountRenamePasskey,
   useAccountDeletePasskey,
 } from '../../api/account-hooks';
+import { registerPasskey } from '../../api/logto-account-api';
 import styles from '../../styles/platform.module.css';
 
 export function PasskeyNudgeBanner() {
@@ -41,12 +43,14 @@ export function PasskeyNudgeBanner() {
 
 export function PasskeySection() {
   const { toast } = useToast();
-  const { data: passkeys, isLoading } = useAccountPasskeyList();
+  const { getAccessToken } = useLogto();
+  const { data: passkeys, isLoading, refetch } = useAccountPasskeyList();
   const renamePasskey = useAccountRenamePasskey();
   const deletePasskey = useAccountDeletePasskey();
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editName, setEditName] = useState('');
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+  const [registering, setRegistering] = useState(false);
 
   function parseAgent(agent: string | null): string {
     if (!agent) return 'Unknown device';
@@ -72,6 +76,25 @@ export function PasskeySection() {
     }
   }
 
+  async function handleRegister() {
+    setRegistering(true);
+    try {
+      await registerPasskey(async () => {
+        const token = await getAccessToken();
+        if (!token) throw new Error('Not authenticated');
+        return token;
+      });
+      await refetch();
+      toast({ title: 'Passkey registered', variant: 'success' });
+    } catch (err) {
+      // User cancelled the WebAuthn prompt — not an error
+      if (err instanceof Error && err.name === 'NotAllowedError') return;
+      toast({ title: 'Passkey registration failed', description: errorMessage(err), variant: 'error' });
+    } finally {
+      setRegistering(false);
+    }
+  }
+
   async function handleDelete(id: string) {
     try {
       await deletePasskey.mutateAsync(id);
@@ -90,9 +113,14 @@ export function PasskeySection() {
       <p className={styles.description} style={{ marginTop: 0 }}>
         Use your fingerprint, face, or security key to sign in faster.
       </p>
+      <div style={{ marginBottom: 12 }}>
+        <Button variant="primary" onClick={handleRegister} loading={registering}>
+          Register passkey
+        </Button>
+      </div>
       {credentials.length === 0 ? (
         <p style={{ color: 'var(--text-muted)', fontSize: '0.875rem' }}>
-          No passkeys registered. Passkeys can be registered during sign-in when prompted.
+          No passkeys registered yet.
         </p>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>