A modern, privacy-first password generator and vault application with client-side AES-256 encryption, built with Next.js 15, TypeScript, and MongoDB.
with2fa.1.mp4
without2fa.mp4
- Customizable Length: 4-64 characters with slider control
- Character Types: Uppercase, lowercase, numbers, symbols
- Exclude Ambiguous: Option to exclude 0/O, 1/l/I characters
- Real-time Strength: Visual password strength indicator (Weak/Medium/Strong)
- One-Click Copy: Copy to clipboard with visual feedback
- Auto-Clear: Clipboard automatically clears after 15 seconds for security
- Quick Save: Direct "Save to Vault" button
- Client-Side Encryption: AES-256-CBC encryption before data leaves browser
- Zero-Knowledge: Server never sees plaintext passwords
- Full CRUD: Create, Read, Update, Delete vault items
- Rich Fields: Title, username, password, URL, notes
- Tags System: Organize items with multiple tags
- Search & Filter: Real-time search across all fields
- Show/Hide Passwords: Toggle password visibility
- Copy Protection: Auto-clear clipboard after 15 seconds
- Encryption Key Validation: Verifies correct key before decryption
- Email/Password Auth: Secure user registration and login
- Password Hashing: bcrypt with salt rounds for password storage
- JWT Tokens: httpOnly cookies with secure token management
- 2FA (TOTP): Time-based One-Time Password with QR code
- Vault Access Control: Requires password + 2FA verification to access vault
- Session Management: Encryption key stored only in memory (cleared on logout)
- Protection: CSRF protection, XSS prevention, secure headers
- Theme Toggle: Beautiful dark/light mode with smooth transitions
- Animations: Framer Motion for smooth, professional animations
- Responsive Design: Mobile-first, works on all screen sizes
- Loading States: Skeleton loaders and spinners
- Error Handling: User-friendly error messages
- Accessibility: ARIA labels, keyboard navigation
- Custom Modals: Beautiful confirmation dialogs for delete/2FA
password-generator/
├── app/
│ ├── api/ # API Routes
│ │ ├── auth/ # Authentication endpoints
│ │ │ ├── signin/route.ts # User login
│ │ │ ├── signup/route.ts # User registration
│ │ │ ├── logout/route.ts # User logout
│ │ │ ├── enable-2fa/route.ts # Generate 2FA secret
│ │ │ ├── verify-enable-2fa/ # Verify and enable 2FA
│ │ │ ├── disable-2fa/route.ts # Disable 2FA
│ │ │ └── verify-2fa/route.ts # Verify 2FA token
│ │ ├── generator/route.ts # Password generation API
│ │ ├── vault/ # Vault CRUD operations
│ │ │ ├── route.ts # GET (all items), POST (create)
│ │ │ ├── [id]/route.ts # GET, PUT, DELETE by ID
│ │ │ ├── count/route.ts # Get item count
│ │ │ └── verify-access/route.ts # Verify vault access
│ │ └── TestAPI/ # Development test endpoints
│ │ ├── JwtTest/route.ts # Test JWT verification
│ │ └── MongoTest/route.ts # Test MongoDB connection
│ │
│ ├── auth/ # Authentication pages
│ │ ├── signin/page.tsx # Login page with 2FA
│ │ └── signup/page.tsx # Registration with optional 2FA
│ │
│ ├── components/ # Reusable components
│ │ ├── Header.tsx # Navigation with user menu
│ │ ├── TwoFactorEnableModal.tsx # 2FA setup modal
│ │ ├── TwoFactorDisableModal.tsx # 2FA disable modal
│ │ └── VaultAccessModal.tsx # Vault password/2FA verification
│ │
│ ├── contexts/ # React Context providers
│ │ ├── UserContext.tsx # User authentication state
│ │ ├── VaultContext.tsx # Vault items & encryption key
│ │ └── GeneratorContext.tsx # Generated password state
│ │
│ ├── dashboard/page.tsx # Dashboard with stats
│ ├── generator/page.tsx # Password generator page
│ ├── vault/page.tsx # Vault management page
│ ├── profile/page.tsx # User profile & 2FA settings
│ │
│ ├── lib/ # Utility libraries
│ │ ├── mongodb.ts # MongoDB connection
│ │ ├── jwt.ts # JWT token generation/verification
│ │ ├── encryption.ts # AES-256 encryption/decryption
│ │ ├── passwordGenerator.ts # Password generation logic
│ │ └── twoFactorAuth.ts # 2FA (TOTP) utilities
│ │
│ ├── models/ # MongoDB schemas
│ │ ├── user.ts # User model with 2FA support
│ │ └── vaultItem.ts # Vault item model (encrypted)
│ │
│ ├── types/ # TypeScript types
│ │ └── auth.ts # Authentication types
│ │
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Landing page
│ ├── globals.css # Global styles with CSS variables
│ └── favicon.ico # App favicon
│
├── public/ # Static assets
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
│
├── .env.local # Environment variables (not in repo)
├── .env.example # Environment template
├── .gitignore # Git ignore rules
├── eslint.config.mjs # ESLint configuration
├── next.config.ts # Next.js configuration
├── package.json # Dependencies
├── postcss.config.mjs # PostCSS configuration
├── tsconfig.json # TypeScript configuration
└── README.md # This file
This application implements true zero-knowledge architecture using AES-256-CBC encryption via crypto-js.
| Feature | Description |
|---|---|
| Industry Standard | NSA-approved for classified information up to TOP SECRET |
| Symmetric Encryption | Same key encrypts and decrypts (fast, efficient) |
| 256-bit Key | 2^256 possible keys = computationally infeasible to brute force |
| Browser Compatible | Pure JavaScript implementation, no native crypto needed |
| Battle-Tested | Used by millions of applications worldwide |
- Lightweight: ~80KB minified, perfect for browser environments
- No Dependencies: Works without Node.js crypto module
- Wide Adoption: 8M+ weekly downloads on npm
- Regular Updates: Active maintenance and security patches
- PBKDF2 Support: Built-in key derivation (10,000 iterations)
┌─────────────────────────────────────────────────────────────┐
│ USER AUTHENTICATION │
│ 1. User logs in → JWT token issued │
│ 2. User navigates to Vault → Password/2FA verification │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ ENCRYPTION KEY SETUP │
│ 3. User provides encryption key (never sent to server) │
│ 4. Key stored ONLY in React Context (memory) │
│ 5. Key validated against existing encrypted data │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ SAVING TO VAULT │
│ 6. User enters password data in browser │
│ 7. Client-side: AES.encrypt(data, key) → Base64 blob │
│ 8. Send encrypted blob to server via HTTPS │
│ 9. Server stores encrypted blob in MongoDB │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ RETRIEVING FROM VAULT │
│ 10. Server sends encrypted blobs to client │
│ 11. Client-side: AES.decrypt(blob, key) → plaintext │
│ 12. Display decrypted data in browser │
│ 13. On logout: Clear encryption key from memory │
└─────────────────────────────────────────────────────────────┘
| Server CAN See | Server CANNOT See |
|---|---|
| ✅ User email (for login) | ❌ User password (bcrypt hash only) |
| ✅ Encrypted blobs (Base64) | ❌ Plaintext passwords |
| ✅ Tags (for filtering) | ❌ Titles, usernames, URLs, notes |
| ✅ Timestamps | ❌ Encryption key (never transmitted) |
| ✅ Item count | ❌ Actual vault content |
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 15.5.4 | React framework with App Router |
| React | 18.3.1 | UI library |
| TypeScript | 5.7.2 | Type safety |
| Tailwind CSS | 4.0 | Utility-first styling |
| Framer Motion | 11.15.0 | Animations |
| Lucide React | 0.468.0 | Icon library |
| next-themes | 0.4.4 | Theme management |
| Technology | Version | Purpose |
|---|---|---|
| Next.js API Routes | 15.5.4 | RESTful API |
| MongoDB | Latest | NoSQL database |
| Mongoose | 8.9.4 | MongoDB ODM |
| JWT | 9.0.2 | Authentication tokens |
| bcryptjs | 2.4.3 | Password hashing |
| Technology | Version | Purpose |
|---|---|---|
| crypto-js | 4.2.0 | AES-256 encryption |
| Speakeasy | 2.0.0 | TOTP 2FA |
| qrcode | 1.5.4 | QR code generation |
Before you begin, ensure you have the following installed:
- Node.js: v18.0.0 or higher
- npm/yarn/pnpm: Latest version
- MongoDB: Local installation or MongoDB Atlas account
- Git: For cloning the repository
git clone https://github.com/Ananta2545/password-generator.git
cd password-generatornpm install
# or
yarn install
# or
pnpm installCreate a .env.local file in the root directory (or rename .env.example):
# MongoDB Connection String
MONGODB_URI=mongodb://localhost:27017/password-vault
# For MongoDB Atlas (recommended for production):
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/password-vault?retryWrites=true&w=majority
# JWT Secret Key (generate a strong random string)
# Generate using: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
JWT_SECRET=your-super-secret-jwt-key-min-32-characters-long
# Application URL (optional, defaults to localhost:3000)
NEXT_PUBLIC_APP_URL=http://localhost:3000MongoDB Atlas (Cloud)
- Create account at mongodb.com/cloud/atlas
- Create a free cluster
- Get connection string from "Connect" → "Connect your application"
- Add connection string to
.env.local
npm run dev
# or
yarn dev
# or
pnpm devNavigate to http://localhost:3000
-
Sign Up
- Navigate to
/auth/signup - Enter email and password (min 8 characters)
- Optionally enable 2FA during registration
- Scan QR code with authenticator app (Google Authenticator, Authy, etc.)
- Navigate to
-
Dashboard
- View total vault items
- Quick access to Generator and Vault
- See account statistics
-
Generate Strong Password
- Go to
/generator - Customize length (4-64 characters)
- Select character types (uppercase, lowercase, numbers, symbols)
- Click "Generate New" until satisfied
- Copy to clipboard (auto-clears after 15 seconds)
- Go to
-
Save to Vault
- Click "Save to Vault" button
- Verify identity with password (and 2FA if enabled)
- Enter encryption key (remember this!)
- Fill in item details (title, username, URL, notes)
- Add tags for organization
- Click "Save Item"
-
Manage Vault
- Search items by title, username, or tags
- Toggle password visibility with eye icon
- Copy passwords with auto-clear protection
- Edit items with pencil icon
- Delete items with custom confirmation modal
Choose your security level based on your needs:
Best for: Personal use, less sensitive data, quick access needs
Setup Steps:
- ✅ Create account (email + password)
- ✅ Start using vault immediately
- ✅ Access requires: Password only
Vault Access Flow:
Click "Vault" → Enter Password → Enter Encryption Key → ✅ Access Granted
Security Level: 🔒 Medium
- Protected by account password
- Encrypted with your personal encryption key
- Faster access (1 verification step)
When to use:
- ✅ You want quick access to your vault
- ✅ You're the only one using your device
- ✅ Your passwords are not highly sensitive
- ✅ You prefer convenience over maximum security
Best for: Sensitive data, shared devices, maximum protection
Setup Steps:
- ✅ Create account (email + password)
- ✅ Go to Profile → Click "Enable Two-Factor Authentication"
- ✅ Scan QR code with authenticator app (Google Authenticator, Authy, etc.)
- ✅ Enter 6-digit code to confirm
- ✅ 2FA is now active! 🎉
Vault Access Flow:
Click "Vault" → Enter Password + 2FA Code → Enter Encryption Key → ✅ Access Granted
Security Level: 🔒🔒 High
- Protected by account password + time-based code
- Even if password is stolen, attacker needs your phone
- Encrypted with your personal encryption key
- Industry-standard TOTP authentication
When to use:
- ✅ You store highly sensitive passwords
- ✅ You use shared or public computers
- ✅ You want maximum protection
- ✅ You have an authenticator app on your phone
Supported Authenticator Apps:
- Google Authenticator (iOS/Android)
- Microsoft Authenticator (iOS/Android)
- Authy (iOS/Android/Desktop)
- 1Password (iOS/Android/Desktop)
- Any TOTP-compatible app
| Feature | Without 2FA 🔒 | With 2FA 🔒🔒 |
|---|---|---|
| Setup Time | Instant | 2 minutes |
| Vault Access | Password only | Password + 6-digit code |
| Access Speed | ~10 seconds | ~15 seconds |
| Protection | Password breach vulnerable | Protected even if password stolen |
| Best For | Quick access, personal use | Maximum security, sensitive data |
| Required | Account password | Account password + phone with authenticator |
Enable 2FA Later (Upgrade Security):
- Go to Profile page
- Click "Enable Two-Factor Authentication"
- Scan QR code with authenticator app
- Enter verification code
- ✅ 2FA now protects your vault
Disable 2FA (Downgrade Security):
- Go to Profile page
- Click "Disable Two-Factor Authentication"
- Enter your password + current 2FA code
- ✅ 2FA removed, back to password-only
💡 Pro Tip: You can enable/disable 2FA anytime without losing your vault data!
- Go to Profile (
/profile) - Click "Enable Two-Factor Authentication"
- Scan QR code with authenticator app:
- Google Authenticator (iOS/Android)
- Authy (iOS/Android/Desktop)
- Microsoft Authenticator
- 1Password
- Enter 6-digit verification code
- ✅ 2FA now active - required for vault access
- Go to Profile
- Click "Disable Two-Factor Authentication"
- Enter password and current 2FA code
- ✅ 2FA removed from account
The vault has a two-layer security system: Identity Verification + Encryption Key.
Step 1: Navigate to Vault
┌──────────────────────────────────────────┐
│ User clicks "Vault" in navigation │
└──────────────────────────────────────────┘
↓
Step 2: Vault Access Verification Modal Appears
┌──────────────────────────────────────────┐
│ Modal Title: "Verify Your Identity" │
│ │
│ [Password Input Field] │
│ ● Enter your account password │
│ │
│ [Verify Access Button] │
└──────────────────────────────────────────┘
↓
Step 3: Password Verification
┌──────────────────────────────────────────┐
│ System checks: │
│ ✓ Password matches bcrypt hash │
│ ✓ User is authenticated │
└──────────────────────────────────────────┘
↓
Step 4: Encryption Key Prompt Appears
┌──────────────────────────────────────────┐
│ Modal Title: "Enter Encryption Key" │
│ │
│ "Your encryption key is required to │
│ decrypt your vault items. This key │
│ is never sent to the server." │
│ │
│ [Encryption Key Input Field] │
│ ● Enter the key you used when saving │
│ │
│ [Unlock Vault Button] │
└──────────────────────────────────────────┘
↓
Step 5: Key Validation (Client-Side)
┌──────────────────────────────────────────┐
│ System validates key by: │
│ 1. Fetching encrypted items from server │
│ 2. Attempting to decrypt first item │
│ 3. If successful → Key is correct ✓ │
│ 4. If fails → "Invalid key" error ✗ │
└──────────────────────────────────────────┘
↓
Step 6: Vault Unlocked! 🎉
┌──────────────────────────────────────────┐
│ ✓ All items decrypted client-side │
│ ✓ View, edit, delete, search enabled │
│ ✓ Encryption key stored in memory │
│ ✓ Key cleared when leaving vault │
└──────────────────────────────────────────┘
User Experience:
- Click "Vault" → Enter password → Enter encryption key → Access granted
- Total steps: 2 prompts (password, then encryption key)
- Time: ~10 seconds
Step 1: Navigate to Vault
┌──────────────────────────────────────────┐
│ User clicks "Vault" in navigation │
└──────────────────────────────────────────┘
↓
Step 2: Vault Access Verification Modal Appears (with 2FA)
┌──────────────────────────────────────────┐
│ Modal Title: "Verify Your Identity" │
│ │
│ [Password Input Field] │
│ ● Enter your account password │
│ │
│ [2FA Code Input Field] │
│ ● Enter 6-digit code from your │
│ authenticator app (Google Auth, │
│ Authy, etc.) │
│ │
│ ⏱️ Code expires every 30 seconds │
│ │
│ [Verify Access Button] │
└──────────────────────────────────────────┘
↓
Step 3: Password + 2FA Verification
┌──────────────────────────────────────────┐
│ System checks: │
│ ✓ Password matches bcrypt hash │
│ ✓ 2FA token is valid (TOTP) │
│ ✓ Token is within 30-sec window │
│ ✓ User is authenticated │
└──────────────────────────────────────────┘
↓
Step 4: Encryption Key Prompt Appears
┌──────────────────────────────────────────┐
│ Modal Title: "Enter Encryption Key" │
│ │
│ "Your encryption key is required to │
│ decrypt your vault items. This key │
│ is never sent to the server." │
│ │
│ [Encryption Key Input Field] │
│ ● Enter the key you used when saving │
│ │
│ [Unlock Vault Button] │
└──────────────────────────────────────────┘
↓
Step 5: Key Validation (Client-Side)
┌──────────────────────────────────────────┐
│ System validates key by: │
│ 1. Fetching encrypted items from server │
│ 2. Attempting to decrypt first item │
│ 3. If successful → Key is correct ✓ │
│ 4. If fails → "Invalid key" error ✗ │
└──────────────────────────────────────────┘
↓
Step 6: Vault Unlocked! 🎉
┌──────────────────────────────────────────┐
│ ✓ All items decrypted client-side │
│ ✓ View, edit, delete, search enabled │
│ ✓ Encryption key stored in memory │
│ ✓ Key cleared when leaving vault │
└──────────────────────────────────────────┘
User Experience:
- Click "Vault" → Enter password + 2FA code → Enter encryption key → Access granted
- Total steps: 2 prompts (password+2FA, then encryption key)
- Time: ~15 seconds
- Click moon/sun icon in header
- Dark mode reduces eye strain
- Preference saved in browser
{
_id: ObjectId,
email: string, // Unique user email
password: string, // bcrypt hash (not plaintext)
twoFactorSecret?: string, // Encrypted TOTP secret (optional)
twoFactorEnabled: boolean, // 2FA status
createdAt: Date,
lastLogin?: Date
}{
_id: ObjectId,
userId: ObjectId, // Reference to User
encryptedData: string, // Base64 AES-256 encrypted blob containing:
// { title, username, password, url, notes }
tags: string[], // Searchable tags (not encrypted)
createdAt: Date,
lastModified: Date
}| Command | Description |
|---|---|
npm run dev |
Start development server (localhost:3000) |
npm run build |
Build production bundle |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run type-check |
Run TypeScript compiler check |
# Run linter
npm run lint
# Type checking
npx tsc --noEmit
# Format code (if Prettier configured)
npx prettier --write .| Variable | Required | Description |
|---|---|---|
MONGODB_URI |
✅ Yes | MongoDB connection string |
JWT_SECRET |
✅ Yes | Secret key for JWT tokens (32+ chars) |
NEXT_PUBLIC_APP_URL |
❌ No | App URL (defaults to localhost:3000) |
Ananta Chatterjee
- 🌐 GitHub: @Anata2545
- 📧 Email: chatterjeeanata091@gmail.com
- 💼 LinkedIn: Ananta Chattapadhyay
Madquick Digital Agency
- 🏢 Company: Web Development Company Top
- 👔 Founder: Setu Agrawal
Built with ❤️ by Ananta