✦ Preact Auth Passkey Center

A practical passkey and trusted-device dashboard with WebAuthn capability checks, mock ceremonies, inventory, and security activity.

---

✨ Highlights

• Credential Inventory: Lists synced and device-bound passkeys with usage, location, creation, and review state.
• WebAuthn Detection: Uses @simplewebauthn/browser to detect browser and platform-authenticator support.
• Registration Dialog: Models platform and hardware-key registration with a reusable service boundary.
• Test Sign-in: Simulates assertion verification and refreshes credential usage metadata.
• Credential Revocation: Removes a selected passkey after confirmation and records the event.
• Local Persistence: Keeps the evolving demo credential inventory in IndexedDB.
• Security Score: Summarizes passkey health and calls out inactive hardware credentials.
• Activity Timeline: Tracks registration, test authentication, and revocation events.
• Responsive Inventory: Converts the desktop table-like rows into readable stacked mobile records.
• Compatibility States: Clearly distinguishes WebAuthn readiness, platform support, and fallback behavior.
• Accessible Dialog: Supports backdrop dismissal, modal semantics, labels, and explicit action controls.

🧱 Project Structure

public/
`-- favicon.svg
src/
|-- app.tsx
|-- main.tsx
|-- index.css
|-- components/
|   |-- add-passkey-dialog.tsx
|   `-- passkey-row.tsx
|-- domain/
|   `-- passkeys.ts
`-- services/
    `-- mock-passkey-api.ts

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• Prettier 3
• @simplewebauthn/browser
• Zod
• idb-keyval
• lucide-preact

📦 Included Demo Data

• Three passkeys cover synced platform, mobile, and device-bound hardware credentials.
• The YubiKey begins in a review state and becomes healthy after a successful test.
• New credentials and removals persist locally until browser storage is cleared.

All identities, challenges, devices, and responses are synthetic and remain in the browser.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• The project intentionally simulates ceremony completion because registration and authentication options must be generated and verified by a backend.
• Use startRegistration and startAuthentication only with server-issued challenges and verify origin, RP ID, counter, and user binding on the server.
• WebAuthn requires a secure context; localhost is accepted for development.
• Credential names and device labels are account metadata, not proof of authenticator identity.
• The interface is responsive, while its denser inventory layout remains optimized for account-settings use on desktop.
• Mock calls include visible latency so loading, disabled, success, and failure states can be tested before connecting a real API.
• Replace functions in src/services/ with your HTTP client while preserving the domain contracts used by the UI.
• Authentication templates are reference implementations, not a substitute for a security review, threat model, and server enforcement.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview
npm audit --omit=dev

🌐 Vercel Deployment

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

📄 License

MIT License. See LICENSE.