NotesLocker is a lightweight, secure, and open-source cloud notepad application built with React and Firebase. It enables users to create, update, and sync notes securely without storing any personal information or raw passwords.
The application utilizes a Zero-Knowledge End-to-End Encryption (E2EE) model powered by the browser's native Web Crypto API. The server/database has absolutely zero access to your notes, locker passwords, or cryptographic keys.
NotesLocker ensures absolute privacy by performing all encryption and decryption operations locally inside the user's browser. Plaintext notes and passwords are never transmitted over the network.
When you register or log in, your browser takes your password and derives a 256-bit symmetric key using PBKDF2 (Password-Based Key Derivation Function 2):
- Algorithm: HMAC-SHA-256
- Iterations: 100,000 rounds
- Salt: A cryptographically random salt generated per locker (
passwordSalt) This derived key is used solely in-memory to decrypt your locker's Master Key.
To support seamless password changes without re-encrypting all notes, NotesLocker uses a two-tier key hierarchy:
- Master Key: A random 256-bit key generated locally using
window.crypto.getRandomValues(). Your notes are encrypted with this Master Key. - Encrypted Master Key: The Master Key is encrypted using your derived password key (AES-GCM) and stored in Firestore (
encryptedMasterKeyUser). - Password Change: When changing your password, the browser simply decrypts the Master Key, derives a new key from your new password, re-encrypts the Master Key, and saves the new encrypted Master Key to Firestore. Your encrypted notes remain untouched.
All notes are serialized to a JSON string and encrypted using AES-GCM (Advanced Encryption Standard in Galois/Counter Mode) with 256-bit keys:
- Authentication: AES-GCM provides authenticated encryption, guaranteeing data integrity and preventing unauthorized modification.
- Initialization Vector (IV): A unique, cryptographically secure 12-byte IV is generated for every save operation. This ensures that identical notes text never yields the same ciphertext.
To authenticate you without saving your password on the server:
- On registration, your browser encrypts the validator string
"locker_unlocked"with your derived password key to createvalidatorCiphertext. - On login, the browser attempts to decrypt
validatorCiphertextusing the derived key. If decryption succeeds and resolves to"locker_unlocked", authentication is successful. The database never stores or receives a password hash.
Since we cannot reset your password, we offer a Zero-Knowledge recovery mechanism:
- Setup: The browser generates a random Recovery Key, encrypts the Master Key with it (
encryptedMasterKeyRecovery), and sends the plain Recovery Key to a serverless function (/api/verify-otp) alongside an email OTP. - Escrow: The server verifies the OTP, encrypts the Recovery Key using a private server-side key (
RECOVERY_ENCRYPTION_KEYvia AES-256-GCM), and stores it in Firestore (serverRecoveryKey). - Recovery: Upon entering the correct OTP during forgot password recovery, the server decrypts
serverRecoveryKeyand sends the plain Recovery Key to the browser. The browser decryptsencryptedMasterKeyRecoveryto retrieve the Master Key, letting the user set a new password.
=== CLIENT BROWSER === === FIRESTORE ===
Locker Password ──► PBKDF2 (100k rounds, Salt) ──► Password Key
│
"locker_unlocked" ────────────► AES-GCM ────────────┼────────► validatorCiphertext
│
Master Key (Random 256-bit) ──► AES-GCM ────────────┼────────► encryptedMasterKeyUser
│
▼
Plain Notes (JSON) ───────────► AES-GCM ────────────┼────────► encryptedNotes
│
Recovery Key (Random) ────────► AES-GCM (Master) ───┼────────► encryptedMasterKeyRecovery
│
▼
Plain Recovery Key ──► [Server Encrypts (ENV Key)] ──┼────────► serverRecoveryKey
- 🔒 Zero-Knowledge Security (E2EE): Complete client-side encryption using the native Web Crypto API (AES-GCM 256-bit + PBKDF2 key derivation). Passwords are never sent or stored.
- 🔑 Recovery Key Escrow: Password recovery utilizing a secure server-side escrow mechanism, verified via email OTP sent through a secure Vercel Serverless Function.
- ⚡ Typing Lag Elimination: Extracted and memoized individual note elements (
NoteItem) and search queries to optimize editor performance. - 🎨 Premium UI Overhaul: Upgraded colors to brand orange, replaced browser alerts with custom modals, implemented event-driven toast notifications, and adjusted mobile viewports.
- 🛠️ Hover Tooltip Fix: Disabled browser-native tooltips on truncated notes inside the sidebar.
- 🌙 Dark Mode Support: Sleek, eye-friendly dark theme that toggles dynamically.
Live Preview Link 🚀
- Check Out: You can checkout the live preview from here.
- Hosting: This website is hosted on Vercel.
- Database: We use Cloud Firestore for secure, encrypted document storage.
- Clone the repository:
git clone https://github.com/senapati484/NotesLocker cd NotesLocker - Install dependencies:
npm install # or yarn install - Set up environment variables in a
.envfile:VITE_API_KEY=your_api_key VITE_APP_DOMAIN=your_app_domain VITE_PROJECT_ID=your_project_id VITE_STORAGE_BUCKET=your_storage_bucket VITE_MESSAGING_SENDER_ID=your_messaging_sender_id VITE_APP_ID=your_app_id VITE_MEASUREMENT_ID=your_measurement_id
- Start the development server:
npm run dev # or yarn dev
Contributions are welcome! Please fork the repository, make your changes, and create a pull request. Ensure that your changes align with the project's goals and adhere to best practices.
This project is licensed under the MIT License.