Skip to content

AUTH_SETUP.md

Latest commit

 

History

History
224 lines (169 loc) · 5.3 KB

AUTH_SETUP.md

File metadata and controls

224 lines (169 loc) · 5.3 KB

🔐 Authentication System with Hashed Passwords

Overview

Complete authentication system with secure password hashing using bcryptjs and JWT tokens.

Components Updated

1. Login Page (/app/login/page.jsx)

✅ Enhanced UI with icons and better UX ✅ Email and password validation ✅ Show/hide password toggle ✅ Error messages with visual feedback ✅ Loading state during login ✅ Redirects to dashboard on success ✅ Forgot password link (placeholder)

Features:

  • Icon-based input fields
  • Responsive design
  • Toast notifications
  • Form validation

2. Register Page (/app/register/page.jsx)

✅ Complete form with all fields ✅ Username, Email, Password, Confirm Password ✅ Password strength validation (min 6 chars) ✅ Username validation (min 3 chars) ✅ Password match validation ✅ Enhanced UI with icons ✅ Automatic redirect to login after registration

Features:

  • Email uniqueness validation (backend)
  • Password hashing on registration
  • Show/hide password toggles
  • Form validation
  • Error handling

3. Change Password Page (/app/change-password/page.jsx)

✅ All password fields with show/hide toggle ✅ Current password verification ✅ New password confirmation ✅ Enhanced UI with icons ✅ Error handling and validation ✅ Redirects to login after successful change

Features:

  • Current password validation using bcrypt
  • New password requirements
  • Confirmation password check
  • Clear error messages
  • Loading states

Backend API Routes

Login API (/api/login)

// Now uses bcrypt.compare() for secure password verification
const match = await bcrypt.compare(password, user.password);
  • ✅ Validates email exists
  • ✅ Uses bcrypt to compare plain text with hashed password
  • ✅ Generates JWT token on success
  • ✅ Sets secure HTTP-only cookie

Register API (/api/register)

const hashed = await bcrypt.hash(password, 10);
  • ✅ Validates all fields
  • ✅ Checks email uniqueness
  • ✅ Hashes password with bcrypt (10 salt rounds)
  • ✅ Stores hashed password in database

Change Password API (/api/change-password)

const match = await bcrypt.compare(currentPassword, user.password);
const hashed = await bcrypt.hash(newPassword, 10);
  • ✅ Authenticates via JWT token or email
  • ✅ Verifies current password with bcrypt
  • ✅ Hashes new password
  • ✅ Updates user record

Database Schema

User Model includes:

  • username - String, required, unique, trimmed
  • email - String, required, unique, lowercase, trimmed
  • password - String, required (stored as hash)
  • timestamps - createdAt, updatedAt

Security Features

✅ Password Hashing: bcryptjs with 10 salt rounds ✅ JWT Authentication: Token-based session management ✅ HTTP-only Cookies: Prevents XSS attacks ✅ Input Validation: Server-side and client-side ✅ Email Verification: Unique email constraint ✅ Password Requirements: Minimum 6 characters ✅ Error Messages: Generic messages for security

Password Flow

Registration

  1. User enters username, email, password, confirm password
  2. Client validates form
  3. Server validates all fields
  4. Server checks email uniqueness
  5. Server hashes password with bcrypt (10 rounds)
  6. Server stores user with hashed password
  7. User redirected to login

Login

  1. User enters email and password
  2. Server finds user by email
  3. Server compares plain text password with hashed password using bcrypt
  4. JWT token generated on success
  5. Token stored in HTTP-only cookie
  6. User redirected to dashboard

Change Password

  1. User enters email, current password, new password
  2. Server finds user by email or JWT token
  3. Server verifies current password with bcrypt
  4. Server hashes new password
  5. Server updates password in database
  6. User redirected to login (must re-login)

Testing the System

Register New User

1. Go to /register
2. Fill in: username, email, password, confirm password
3. Click "Create Account"
4. Should redirect to login with success message

Login

1. Go to /login
2. Enter email and password
3. Click "Login"
4. Should redirect to dashboard

Change Password

1. Go to /change-password (requires login)
2. Enter email, current password, new password
3. Click "Change Password"
4. Should redirect to login
5. Login with new password to verify

Environment Variables Required

JWT_SECRET=your_jwt_secret_key_here
MONGO_URI=your_mongodb_uri_here

Dependencies

  • bcryptjs - Password hashing
  • jsonwebtoken - JWT token creation
  • mongoose - MongoDB connection
  • react-toastify - Notifications
  • react-icons - UI Icons

Error Handling

All pages handle:

  • ✅ Network errors
  • ✅ Validation errors
  • ✅ Server errors
  • ✅ User not found
  • ✅ Invalid credentials
  • ✅ Password mismatch
  • ✅ Duplicate email

UI/UX Features

✅ Icons for input fields ✅ Show/hide password toggles ✅ Loading states ✅ Error message display ✅ Form validation feedback ✅ Responsive design ✅ Theme support (dark/light) ✅ Toast notifications ✅ Smooth transitions

Future Enhancements

  • Email verification on registration
  • Password reset via email link
  • Two-factor authentication
  • Login history
  • Account recovery
  • Rate limiting on auth endpoints
  • Audit logging