A full-stack web application demonstrating secure authentication practices and common security vulnerabilities for educational purposes.

This project implements a secure authentication system with both secure and vulnerable implementations for educational comparison. It consists of:

• Frontend: Next.js/React application with login and registration forms
• Backend: Django REST Framework API for user authentication

The project was created as part of the BSC2420 Computer Security course's Blue Team Challenge, demonstrating intentional security vulnerabilities in authentication systems and their proper remediation.

• Server-side rate limiting using Django Axes
• JWT-based authentication with proper expiration
• Argon2 password hashing (one of the strongest algorithms available)
• Generic error messages to prevent information disclosure
• CSRF protection for form submissions
• Secure HTTP-only cookies
• Backend verification of all security-critical operations

• Client-side login attempt limiting (vulnerable to bypass)
• Account enumeration through specific error messages
• Debug information exposure in the UI
• Hardcoded credentials in the frontend
• Client-only CAPTCHA verification
• Insecure data storage in localStorage
• Hidden admin registration functionality
• Excessive password feedback information
• Password analysis logging in console

.
├── backend/             # Django backend application
│   ├── auth_app/        # Django app for authentication logic
│   ├── backend/         # Django project settings
│   ├── manage.py        # Django management script
│   └── requirements.txt # Backend dependencies
├── frontend/            # Next.js frontend application
│   ├── public/          # Static assets
│   ├── src/             # Source code (components, pages, etc.)
│   │   ├── components/  # Reusable React components
│   │   │   ├── login/   # Login form components (secure and vulnerable versions)
│   │   │   ├── signup/  # Registration form components
│   │   │   └── common/  # Shared UI components
│   │   ├── pages/       # Next.js pages
│   │   └── utils/       # Helper functions and utilities
│   ├── next.config.js   # Next.js configuration
│   ├── package.json     # Frontend dependencies and scripts
│   └── tsconfig.json    # TypeScript configuration
├── .gitignore           # Git ignore rules
└── README.md            # This file

• Next.js (React Framework)
• React
• TypeScript
• Tailwind CSS
• Framer Motion (for animations)
• Lucide React (for icons)
• react-google-recaptcha
• zxcvbn (for password strength estimation)

• Django 5.0
• Django REST Framework
• Simple JWT (for JWT authentication)
• django-cors-headers
• Django Axes (for brute-force protection)
• Argon2 (for secure password hashing)

• Python 3.10+ with pip
• Node.js 18+ with npm or yarn
• Git

1. Clone the repository:

   git clone https://github.com/yourusername/secure-authentication-system.git
   cd secure-authentication-system

2. Set up the Backend:

   cd backend
   
   # Create and activate a virtual environment
   python -m venv venv
   source venv/bin/activate  # On Windows use: venv\Scripts\activate
   
   # Install dependencies
   pip install -r requirements.txt
   
   # Create .env file (example values)
   cat > .env << EOL
   SECRET_KEY=your_django_secret_key
   DEBUG=True
   ALLOWED_HOSTS=localhost,127.0.0.1
   CORS_ALLOWED_ORIGINS=http://localhost:3000
   EOL
   
   # Apply database migrations
   python manage.py migrate

3. Set up the Frontend:

   cd frontend
   
   # Install dependencies
   npm install
   
   # Create .env.local file (example values)
   cat > .env.local << EOL
   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_recaptcha_site_key
   NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
   EOL

1. Start the Backend Server:

   cd backend
   source venv/bin/activate  # If not already activated
   python manage.py runserver

2. Start the Frontend Development Server:

   cd frontend
   npm run dev

3. Access the application at:

   • Frontend: http://localhost:3000
   • Backend API: http://127.0.0.1:8000

To deploy this application on a Raspberry Pi, follow these steps:

1. Set up the Raspberry Pi:

   sudo apt update && sudo apt upgrade -y
   sudo apt install python3-pip python3-venv nodejs npm

2. Deploy the Backend:

   cd backend
   python3 -m venv venv
   source venv/bin/activate
   pip install -r requirements.txt
   python manage.py migrate
   python manage.py runserver 0.0.0.0:8000

3. Deploy the Frontend:

   cd frontend
   npm install
   npm run build
   npm install -g serve
   serve -s build -l 3000

For production deployment, consider using Gunicorn with Nginx for the backend and PM2 for the frontend.

This project demonstrates several security best practices:

1. Never rely on client-side validation alone - All security checks must be performed on the server
2. Use strong password hashing algorithms (Argon2, bcrypt, or PBKDF2)
3. Implement rate limiting to prevent brute-force attacks
4. Use generic error messages to prevent account enumeration
5. Avoid storing sensitive information in client-accessible storage
6. Properly secure tokens and sessions with appropriate expiration times
7. Use HTTPS for all communications between client and server

This project was created for educational purposes to demonstrate common security vulnerabilities in web authentication systems and their proper remediation. The vulnerable implementations should not be used in production environments.

This project is provided as-is under the MIT License. See the LICENSE file for details.

• BSC2420 Computer Security course instructors and classmates
• OWASP for security best practices and guidelines