Generator controls
Tune the password recipe
Length: 18
A cleaner SecurePass built for shipping and showing your work.
SecurePass is now structured like a polished product page with a live studio at the center. It still stays fully client-side, but the interface now explains the value and the security model more clearly.
Generate locally
Passwords are created in the browser with cryptographically secure randomness.
Encrypt before storage
Saved entries are wrapped with AES-GCM using a key derived from your passphrase.
Move safely
Backup export and import carry encrypted vault data between devices.
SecurePass studioPortfolio MVP
Current focus
Local-first password security with a cleaner product narrative.
No account requirement
Encrypted vault with passphrase unlock
Exportable encrypted backups
Static deploy ready for Netlify
Interactive studio
Generate, encrypt, and move passwords without leaving the browser.
This section is the working demo. It keeps the local vault behavior from the original project, but presents it with a structure that is easier to explore and explain.
Local vault
Encrypt entries before you keep them
Unlocking derives a key from your passphrase in browser memory only. Nothing about this flow requires an account or a backend session.
Vault locked
Current output
Active password
Generate a password to preview it here before copying or saving it.
Password strength
Heuristic signal for usability, not a formal entropy model.
Demo notes
- Generated passwords come from browser cryptography, not pseudo-random helpers.
- Stored entries are encrypted before being written to localStorage.
- Backup export and import move encrypted vault data between devices.
Status
Generate a password, then unlock the local vault only if you want to store it on this device.
Security story
The product design and the security model now explain each other.
This rebuild keeps the local vault mechanics but packages them in a structure that is easier for technical and non-technical visitors to understand quickly.
Highlight
Browser-only trust boundary
The active app path has no login, no cloud vault, and no server-side persistence layer. That keeps the threat boundary simple and easy to explain.
Highlight
Passphrase-derived encryption
SecurePass derives an AES-GCM key from a passphrase using PBKDF2 with SHA-256, 310000 iterations, and a random salt.
Highlight
Portable encrypted backups
The exported backup is encrypted vault data, not plaintext secrets. Import restores the encrypted record and still requires the original passphrase.
Entry lifecycle
- 01
Generate a password with secure browser randomness.
- 02
Unlock the vault by deriving a key from the passphrase.
- 03
Encrypt the entry with AES-GCM and a fresh IV.
- 04
Store only ciphertext, salt, IV, and metadata in localStorage.
Trust boundary snapshot
Stored in browser
- Salt
- Ciphertext
- IV per entry
- Entry label
- Created timestamp
Never stored by the app
- Plaintext passphrase
- Derived AES key
- Plaintext vault entries
- Remote database session
FAQs
Common questions from both product and security angles.
This version is meant to feel like a polished product page while still making the implementation choices easy to talk through.
Does SecurePass require an account now?
No. This version is intentionally local-first. You can generate passwords immediately and only use a passphrase if you want to unlock the local vault.
Where are saved passwords stored?
In browser localStorage as encrypted vault entries. The app stores ciphertext, IVs, salt, and metadata, not plaintext secrets.
Why keep the vault local for an MVP?
It simplifies the trust boundary, removes backend overhead, and makes the security design easier to explain in a portfolio context.
What happens if I forget the passphrase?
There is no recovery flow in this design. The key is derived from the passphrase, so losing it means the encrypted entries cannot be decrypted.