preact-auth-passkey-center — Vite Admin dashboard Template

SHA-256: 6d16b4f1d252885f4707c8836d2d2f649ab12d8c5cc0fe4b5a5b69c4ac272153

2026-10-17T22:12:03.936Z

<div align="center">

# ✦ Preact Auth Passkey Center

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

![Preact](https://img.shields.io/badge/Preact-10-673ab8?style=for-the-badge&logo=preact&logoColor=ffffff)
![TypeScript](https://img.shields.io/badge/TypeScript-6-3178c6?style=for-the-badge&logo=typescript&logoColor=ffffff)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=ffffff)
![WebAuthn](https://img.shields.io/badge/WebAuthn-Template-347D68?style=for-the-badge)
![Vite](https://img.shields.io/badge/Vite-8-646CFF?style=for-the-badge&logo=vite&logoColor=ffffff)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new)

</div>

---

## ✨ 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

```text
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

```bash
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

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

## 🌐 Vercel Deployment

```json
{
  "$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](./LICENSE).