Project 12: Password Vault (Frontend Only)
40 min read
Web Crypto APIAES-GCMPBKDF2EntropyZero-KnowledgeClipboard API
📋 Project Brief
Build a client-side password manager that encrypts all data before storing it locally. This project uses the Web Crypto API for AES-GCM encryption, implements entropy-based password strength measurement, and follows a "zero-knowledge" architecture where the master password is never stored anywhere.
✅ Feature Requirements
Feature 1: Web Crypto API Encryption
Acceptance Criteria:
- All passwords are encrypted with AES-GCM before saving to localStorage
- The encryption key is derived from the master password using PBKDF2 (100,000 iterations minimum)
- Each entry uses a unique Initialization Vector (IV)
- Decryption only happens in-memory; decrypted data is never written to storage
- If the wrong master password is entered, decryption fails gracefully with a clear error
Feature 2: Entropy-Based Strength Meter
Acceptance Criteria:
- Measure password strength in bits of entropy, not just character rules
- Formula: entropy = log2(pool_size ^ password_length)
- Display: < 28 bits = Weak (red), 28-35 = Fair (orange), 36-59 = Strong (yellow), 60+ = Very Strong (green)
- Show estimated crack time: "Would take ~X years to brute-force"
Feature 3: Auto-Clear Clipboard
Acceptance Criteria:
- When a user copies a password, start a 30-second countdown
- After 30 seconds, automatically clear the clipboard
- Show a visual countdown timer next to the "Copied!" notification
- User can manually clear earlier by clicking "Clear Now"
Feature 4: Breach Check (Simulated)
Acceptance Criteria:
- Compare passwords against a local list of 1,000 common compromised passwords
- If a match is found, show a warning: "This password appears in known data breaches"
- The check must happen locally — no passwords sent over the network
- Run the check on save and on demand via a "Check All" button
Feature 5: Zero-Knowledge Architecture
Acceptance Criteria:
- The master password is NEVER stored — not in localStorage, not in memory after use
- Instead, store a "verification hash" (hash of a known string encrypted with the master key)
- On unlock, attempt to decrypt the verification hash — if it succeeds, the password is correct
- After 5 minutes of inactivity, automatically lock the vault (clear the derived key from memory)
🔐 Security Architecture
| Component | What's Stored | Where |
|---|---|---|
| Master Password | NEVER stored | N/A |
| Derived Key | In-memory only, cleared on lock/timeout | JavaScript variable |
| Salt | Random bytes per vault | localStorage (plaintext) |
| IV per entry | Random bytes per encryption | localStorage (plaintext) |
| Encrypted passwords | AES-GCM ciphertext | localStorage |
| Verification hash | Encrypted known string | localStorage |
🧪 Testing Checklist
- Unit test entropy calculation with known inputs
- Unit test encryption/decryption round-trip
- Test wrong master password rejection
- Test auto-lock timeout behavior
- Test clipboard auto-clear timing
🚀 Stretch Goals
- Add a password generator with customizable rules
- Implement categories/folders for organizing entries
- Add biometric unlock using the Web Authentication API
- Export encrypted vault as a backup file