🚀 Secure-Creds_GSSoC-2025

Your Personalized Credential Manager

📊 Project Insights

🌟 Stars	🍴 Forks	🐛 Issues	🔔 Open PRs	🔕 Closed PRs	🛠️ Languages	👥 Contributors

---

🎯 Open Source Programmes ⭐

This project is now OFFICIALLY accepted for:

🌟 Exciting News...

🚀 This project is now an official part of GirlScript Summer of Code – GSSoC 2025! 💃🎉💻 We’re thrilled to welcome contributors from all over India and beyond to collaborate, build, and grow .

👩‍💻 GSSoC is one of India’s largest 3-month-long open-source programs that encourages developers of all levels to contribute to real-world projects 🌍 while learning, collaborating, and growing together. 🌱

🌈 With mentorship, community support, and collaborative coding, it's the perfect platform for developers to:

✨ Improve their skills 🤝 Contribute to impactful projects 🏆 Get recognized for their work 📜 Receive certificates and swag!

🎉 I can’t wait to welcome new contributors from GSSoC 2025 to this Secure-Creds project family! Let’s build, learn, and grow together — one commit at a time. 🔥👨‍💻👩‍💻

🔐 Secure Credential Manager

Make sure to star the repo before working on

A Secure Credential Manager built using the MERN stack (MongoDB, Express, React, Node.js) with advanced cryptographic features to ensure maximum security. It uses CryptoJS and bcrypt for encryption and hashing, and JWT for session management.

---

🚀 Features

• 🔐 User Authentication using hashed passwords (bcrypt)
• 🔐 JWT-based Session Management (expires after 15 minutes)
• 🔐 Multi-Factor Authentication (MFA) - TOTP, Email, SMS
• 🔐 Protected Routes: Only authenticated users can access sensitive routes
• 🔐 Password Verification required to perform sensitive operations (even with valid session)
• 🔐 Credential Encryption using a unique key per credential
• 🔐 QR Code Generation for TOTP authenticator setup
• 🔐 Backup Codes for emergency MFA access
• 🔐 Encryption Keys are never stored in the database or backend memory
• 🔐 Sensitive data is cleared from memory immediately after use
• 🔐 Add / View / Delete credentials securely
• ⚠️ Mitigates session hijacking via enforced re-verification using password
• 📱 Responsive Design - Works on desktop and mobile devices
• 🎨 Modern UI/UX with intuitive navigation
• Dark Mode available

---

🧠 Tech Stack

• Frontend: React, Axios
• Backend: Node.js, Express.js
• Database: MongoDB with Mongoose
• Encryption/Hashing: CryptoJS, bcrypt
• Auth & Session: JSON Web Tokens (JWT)
• Security Principles: Zero knowledge encryption, protected routes, memory safety

---

🧰 How It Works

1. 🔐 User Registration & Login

• Passwords are hashed using bcrypt before storing in DB.
• On successful login, a JWT token is issued, valid for 15 minutes.

2. 🛡️ Protected Routes

• All sensitive backend routes require a valid JWT token.
• Unauthorized users are blocked.

3. 🧾 Add / View / Delete Credentials

• Each operation requires password confirmation, even if JWT is valid.
• This ensures protection in case the session token is hijacked.

4. 🔑 Encryption Logic

• Each credential is encrypted with a unique key:

  key = SHA256(salt + credentialUID + userPassword)
  

• The key is never stored.
• The encrypted data is stored, but key is derived on-the-fly during decryption.

5. 🧹 Memory Safety

• Sensitive keys, raw passwords, and decrypted data are immediately removed from memory after use.

---

📸 Screenshots

Landing Page

🖥️ Registration Page

🖥️ Login Page

🏠 Dashboard

🔐 Add Credential

• After adding creds

🗂️ View Credentials

🧰 Delete Credentials

• After Deleting

🛠️ Setup Instructions for development

⚙️ Prerequisites

• Node.js (v18 or higher)
• npm (v8 or higher)
• MongoDB (Local installation or MongoDB Atlas)
• Git

📦 Installation

1. Clone the Repository

git clone https://github.com/Abhishek-Verma0/PETV83L-Abhishek-Verma-Secure-Credential-Manager-With-Key-Encryption.git
cd PETV83L-Abhishek-Verma-Secure-Credential-Manager-With-Key-Encryption

2. Install backend dependencies

cd server
npm install

🔧 Environment Configuration

Server Environment Variables

Create a .env file in the server directory:

# ================================
# REQUIRED CONFIGURATION
# ================================

# Database Configuration
MONGODB_URL=mongodb://localhost:27017/credentialmanager
# For MongoDB Atlas: mongodb+srv://username:password@cluster.mongodb.net/credentialmanager

# JWT Secret (Use a strong, random string)
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production-min-32-chars

# Server Port
PORT=5000

# ================================
# OPTIONAL - EMAIL MFA CONFIGURATION
# ================================

# Gmail Configuration (Recommended)
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-gmail-app-password  # NOT your regular password - use App Password
EMAIL_FROM=noreply@credentialmanager.com

# Alternative Email Providers
# EMAIL_HOST=smtp.your-provider.com
# EMAIL_PORT=587
# EMAIL_SECURE=false

# ================================
# OPTIONAL - SMS MFA CONFIGURATION (Twilio)
# ================================

TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_AUTH_TOKEN=your-twilio-auth-token
TWILIO_PHONE_NUMBER=+1234567890

# ================================
# DEVELOPMENT SETTINGS
# ================================

NODE_ENV=development

# start backend server
npm start

Client Environment Variables For development

Create a .env file in the client directory:

env
# API Configuration
VITE_API_URL=http://localhost:5000
VITE_PORT=5173

# Start frontend server

 npm run dev

3. Access the Application
   • Open your browser and go to http://localhost:5000
   • Register a new account or login with existing credentials

📧 Email MFA Setup (Optional)

Gmail Configuration (Recommended)

1. Enable 2-Factor Authentication on your Gmail account
2. Generate App Password:
   • Go to Google Account Settings
   • Security → 2-Step Verification → App passwords
   • Select "Mail" and generate a 16-character password
3. Update .env file:

   EMAIL_USER=youremail@gmail.com
   EMAIL_PASS=abcd-efgh-ijkl-mnop  # 16-character app password

Other Email Providers

For other email services, modify the configuration in server/services/emailService.js:

// Outlook/Hotmail
service: 'hotmail'

// Yahoo
service: 'yahoo'

// Custom SMTP
host: 'smtp.your-provider.com'
port: 587
secure: false

📱 SMS MFA Setup (Optional)

1. Sign up for Twilio: https://www.twilio.com/
2. Get a phone number from Twilio Console
3. Find your credentials:
   • Account SID (starts with AC...)
   • Auth Token
   • Phone Number (format: +1234567890)
4. Update .env file:

   TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   TWILIO_AUTH_TOKEN=your-auth-token-here
   TWILIO_PHONE_NUMBER=+1234567890

🗄️ Database Setup

Local MongoDB

1. Install MongoDB on your system
2. Start MongoDB service:

   # macOS (with Homebrew)
   brew services start mongodb-community
   
   # Linux (Ubuntu)
   sudo systemctl start mongod
   
   # Windows
   # Start MongoDB service from Services panel

3. Use connection string:

   MONGODB_URL=mongodb://localhost:27017/credentialmanager

MongoDB Atlas (Cloud)

1. Create account at MongoDB Atlas
2. Create a cluster
3. Get connection string and replace <username>, <password>, and <cluster-url>
4. Use connection string:

   MONGODB_URL=mongodb+srv://username:password@cluster.mongodb.net/credentialmanager

🔐 Dependencies Breakdown

Backend Dependencies

{
  "bcrypt": "^6.0.0",           // Password hashing
  "bcryptjs": "^3.0.2",         // Alternative password hashing
  "cors": "^2.8.5",             // Cross-origin resource sharing
  "dotenv": "^17.0.0",          // Environment variables
  "express": "^5.1.0",          // Web framework
  "jsonwebtoken": "^9.0.2",     // JWT authentication
  "mongoose": "^8.16.1",        // MongoDB object modeling
  "nodemailer": "^6.10.1",      // Email sending
  "qrcode": "^1.5.4",           // QR code generation for MFA
  "speakeasy": "^2.0.0",        // TOTP implementation
  "twilio": "^4.23.0"           // SMS sending
}

Frontend Dependencies

{
  "axios": "^1.10.0",           // HTTP client
  "react": "^19.1.0",           // UI library
  "react-dom": "^19.1.0",       // React DOM rendering
  "react-qr-code": "^2.0.18",   // QR code display component
  "react-router-dom": "^7.6.3"  // Client-side routing
}

🛡️ Security Features

• 🔐 Password Hashing: bcrypt with salt rounds
• 🔑 JWT Authentication: 15-minute token expiration
• 🛡️ Multi-Factor Authentication: TOTP, Email, SMS
• 🔒 Credential Encryption: AES-256 with unique keys per credential
• 🚫 Memory Safety: Sensitive data cleared immediately after use
• 🔐 Protected Routes: Authentication required for sensitive operations
• 🎫 Backup Codes: Emergency access codes for MFA

📱 MFA Features

• 📱 TOTP (Time-based One-Time Password): Works with Google Authenticator, Authy, 1Password
• 📧 Email MFA: Verification codes sent to registered email
• 📲 SMS MFA: Verification codes sent via text message
• 🎫 Backup Codes: 10 single-use emergency codes
• 🔄 Easy Management: Enable/disable, regenerate codes

🎯 Development vs Production

Development Mode

• Email: Uses Ethereal test service (no real emails sent)
• SMS: Mock mode (codes logged to console)
• Database: Local MongoDB recommended
• Hot Reload: Both client and server support hot reload

Production Deployment

• Environment: Set NODE_ENV=production
• Email: Configure real email service
• SMS: Configure Twilio for real SMS
• Database: Use MongoDB Atlas or secure MongoDB instance
• SSL/HTTPS: Required for production
• Environment Variables: Use secure secret management

🐛 Troubleshooting

Common Issues

1. MongoDB Connection Failed

   Solution: Check if MongoDB is running and connection string is correct
   

2. JWT Token Expired

   Solution: Login again - tokens expire after 15 minutes for security
   

3. Email MFA Not Working

   Solution: Use Gmail App Password, not regular password
   

4. SMS MFA Not Working

   Solution: Verify Twilio credentials and phone number format
   

5. Port Already in Use

   # Check what's using the port
   lsof -i :5000
   # Kill the process
   kill -9 [PID]

Debug Mode

Enable verbose logging:

DEBUG=true
LOG_LEVEL=debug

📁 Project Structure

PETV83L-Abhishek-Verma-Secure-Credential-Manager-With-Key-Encryption/
├── 📂 client/                          # Frontend React application
│   ├── 📂 public/                      # Static assets
│   │   └── lock-icon.svg
│   ├── 📂 src/
│   │   ├── 📂 auth/                    # Authentication context
│   │   │   └── AuthContext.jsx
│   │   ├── 📂 components/              # Reusable UI components
│   │   │   ├── Button.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── FormInput.jsx
│   │   │   ├── MFASettings.jsx         # MFA setup and management
│   │   │   ├── MFAVerification.jsx     # MFA login verification
│   │   │   ├── Navbar.jsx
│   │   │   ├── PasswordPrompt.jsx
│   │   │   ├── ProtectedRoute.jsx
│   │   │   └── ScreenshotPrevention.jsx
│   │   ├── 📂 pages/                   # Main application pages
│   │   │   ├── Dashboard.jsx
│   │   │   ├── ForgotPassword.jsx
│   │   │   ├── Landing.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── MFAPage.jsx
│   │   │   ├── Register.jsx
│   │   │   └── ResetPassword.jsx
│   │   ├── 📂 service/                 # API service layer
│   │   │   ├── auth.js
│   │   │   ├── credentials.js
│   │   │   └── mfa.js                  # MFA API calls
│   │   ├── 📂 styles/                  # Component styles
│   │   │   ├── dashboard.css
│   │   │   ├── mfaSettings.css
│   │   │   ├── mfaVerification.css
│   │   │   ├── responsive.css
│   │   │   └── ...
│   │   ├── App.jsx                     # Main app component
│   │   └── main.jsx                    # App entry point
│   ├── package.json
│   └── vite.config.js
├── 📂 server/                          # Backend Node.js application
│   ├── 📂 middleware/                  # Express middleware
│   │   ├── auth.js                     # JWT authentication
│   │   └── mfa.js                      # MFA verification
│   ├── 📂 models/                      # MongoDB models
│   │   ├── Credential.js
│   │   └── User.js                     # Enhanced with MFA fields
│   ├── 📂 routes/                      # API routes
│   │   ├── auth.js                     # Authentication routes
│   │   ├── credentials.js              # Credential CRUD operations
│   │   ├── mfa.js                      # MFA setup and verification
│   │   └── passwordReset.js
│   ├── 📂 services/                    # External service integrations
│   │   ├── emailService.js             # Email OTP and notifications
│   │   └── smsService.js               # SMS OTP via Twilio
│   ├── index.js                        # Server entry point
│   └── package.json
├── 📂 screenshots/                     # Application screenshots
├── 📄 MFA_SETUP_GUIDE.md              # Detailed MFA setup guide
└── 📄 README.md                       # This file