Authentication App

A full-stack authentication system built with Next.js 14, TypeScript, and MongoDB. This application provides secure user registration, login, and password recovery functionality with email-based OTP verification.

Features

• User Registration: Secure account creation with form validation
• User Login: JWT-based authentication with persistent sessions
• Password Recovery: Email-based OTP system for password reset
• Protected Routes: Middleware-based route protection
• Responsive Design: Mobile-first UI built with Tailwind CSS
• Type Safety: Full TypeScript implementation
• Real-time Notifications: Toast notifications for user feedback
• Loading States: Smooth loading indicators with React Spinners

Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• React Context - Global state management
• React Toastify - Toast notifications
• FontAwesome - Icon library
• Lora Font - Google Fonts integration

Backend

• Next.js API Routes - Serverless API endpoints
• MongoDB - NoSQL database with Mongoose ODM
• JWT - JSON Web Tokens for authentication
• bcryptjs - Password hashing
• Nodemailer - Email service for OTP delivery
• Joi - Data validation

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── login/         # Login endpoint
│   │   ├── register/      # Registration endpoint
│   │   └── forgot-password/
│   │       ├── sendotp/   # OTP generation
│   │       └── setpassword/ # Password reset
│   ├── login/             # Login page
│   ├── register/          # Registration page
│   └── forgot-password/   # Password recovery page
├── components/            # Reusable UI components
│   ├── formElements/      # Form input components
│   ├── loader/           # Loading components
│   ├── Navbar.tsx        # Navigation component
│   └── Notification.tsx  # Toast notification wrapper
├── context/              # React Context providers
├── database/             # MongoDB connection
├── middleware/           # Authentication middleware
├── models/               # Mongoose schemas
│   ├── user.model.tsx    # User schema
│   └── otp.model.tsx     # OTP schema
├── service/              # API service functions
├── types/                # TypeScript type definitions
└── utils/                # Utility functions

Getting Started

Prerequisites

• Node.js 18+
• MongoDB database
• SMTP email service (Gmail, SendGrid, etc.)

Installation

1. Clone the repository:

git clone <repository-url>
cd authentication

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.sample .env.local

4. Configure your .env.local file:

MONGODB_URI=mongodb://localhost:27017/authentication
# or MongoDB Atlas connection string

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_MAIL=your-email@gmail.com
SMTP_PASSWORD=your-app-password

Development

Run the development server:

npm run dev

Open http://localhost:3000 to view the application.

Build for Production

npm run build
npm start

API Endpoints

Authentication

• POST /api/register - User registration
• POST /api/login - User login

Password Recovery

• POST /api/forgot-password/sendotp - Send OTP to email
• POST /api/forgot-password/setpassword - Reset password with OTP

Environment Variables

Variable	Description	Required
MONGODB_URI	MongoDB connection string	Yes
SMTP_HOST	SMTP server hostname	Yes
SMTP_PORT	SMTP server port	Yes
SMTP_MAIL	Email address for sending OTPs	Yes
SMTP_PASSWORD	Email password or app password	Yes

Database Schema

User Model

{
  name: String,
  userName: String,
  password: String, // bcrypt hashed
  role: String,
  timestamps: true
}

OTP Model

{
  // OTP verification schema
  timestamps: true
}

Security Features

• Password hashing with bcryptjs
• JWT token-based authentication
• Input validation with Joi
• Protected API routes
• CORS configuration
• Environment variable protection

Contributing

We welcome contributions to improve this authentication system! Here's how you can help:

How to Contribute

1. Fork the repository and clone it locally
2. Create a feature branch from main:

   git checkout -b feature/your-feature-name

3. Make your changes and test thoroughly
4. Commit your changes with clear, descriptive messages:

   git commit -m "feat: add email verification for registration"

5. Push to your fork and submit a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Maintain consistent code formatting
• Add appropriate error handling
• Update documentation for new features
• Test your changes locally before submitting

Reporting Issues

Found a bug or have a feature request? Please open an issue with:

• Bug Reports: Include steps to reproduce, expected vs actual behavior, and environment details
• Feature Requests: Describe the feature, use case, and potential implementation approach
• Security Issues: Please report security vulnerabilities privately

Areas for Contribution

• 🔐 Enhanced security features (2FA, rate limiting)
• 📧 Email template improvements
• 🎨 UI/UX enhancements
• 📱 Mobile responsiveness improvements
• 🧪 Test coverage expansion
• 📚 Documentation improvements
• 🌐 Internationalization support

Code of Conduct

Please be respectful and constructive in all interactions. We're here to build something great together!

Support

• 📖 Check the documentation above
• 🐛 Open an issue for bugs
• 💡 Request features with enhancement label
• 💬 Join discussions in the Issues section

License

This project is private and not licensed for public use.