✦ Preact Auth Recovery Center

A guided account-recovery flow with masked channels, one-time verification, password strength, and active-session revocation.

---

✨ Highlights

• Account Lookup: Validates account email and models delayed recovery discovery.
• Masked Channels: Offers email, phone, and offline recovery-code methods without exposing complete destinations.
• One-time Verification: Supports six-digit challenges and a formatted offline recovery code.
• Password Strength: Uses Zod and @zxcvbn-ts/core before accepting replacement credentials.
• Requirement Feedback: Updates length and predictability guidance as the password changes.
• Session Review: Lists current and historical devices with independent revocation selection.
• Current-device Protection: Keeps the recovery session active while other selected sessions are invalidated.
• Security Completion: Summarizes password replacement and revoked-session counts.
• Local Continuity: Remembers the last recovery email without persisting the new password.
• Failure States: Includes unknown-account, malformed code, invalid code, mismatch, and weak-password branches.
• Responsive Security UI: Compresses the progress rail for mobile and preserves session readability.

🧱 Project Structure

public/
`-- favicon.svg
src/
|-- app.tsx
|-- main.tsx
|-- index.css
|-- components/
|   |-- recovery-progress.tsx
|   `-- session-list.tsx
|-- domain/
|   `-- recovery.ts
`-- services/
    `-- mock-recovery-api.ts

🛠️ Tech Stack

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

📦 Included Demo Data

• alex@atlas.dev follows the successful flow.
• missing@atlas.dev demonstrates an account-not-found response.
• 739164 is the valid channel code; SAFE-2026 is the valid offline recovery code.

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

• Production recovery endpoints should avoid account enumeration with generic messages, stable timing, and aggressive rate limits.
• Recovery tokens must be random, short-lived, single-use, and stored only as server-side hashes.
• Password history, breached-password checks, session revocation, and security notifications belong on the server.
• The new password is never written to IndexedDB by this template.
• For high-risk accounts, add recent-device checks, support escalation, and delayed changes to critical settings.
• 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.