A production-inspired authentication system implementing secure user registration, login, email verification, password recovery, JWT authentication and protected routes using modern web technologies.
Authentication is the backbone of almost every modern web application.
This project demonstrates how a complete authentication workflow can be implemented using the latest Next.js App Router, MongoDB, and TypeScript while following secure authentication practices.
Instead of stopping at basic login/signup, this application implements the entire authentication lifecycle including email verification, password recovery, protected routes and secure JWT cookie-based sessions.
- User Registration
- Secure Login
- Secure Logout
- JWT Authentication
- HTTP-only Authentication Cookies
- Protected Routes
- User Session Handling
- Email Verification
- Verification Token Generation
- Forgot Password Workflow
- Password Reset via Email
- Secure Reset Tokens
- Token Expiration Support
- Password Hashing using bcrypt
- JWT Token Authentication
- HTTP-only Cookies
- Protected API Routes
- Authentication Middleware
- Environment Variable Configuration
- Secure Password Storage
- Next.js 16 App Router
- API Route Handlers
- MongoDB Database
- Mongoose ODM
- Nodemailer Integration
- TypeScript
- Modular Project Structure
- Responsive UI
- Modern Forms
- Toast Notifications
- Client-side Validation
- Clean Authentication Pages
| Technology | Usage |
|---|---|
| Next.js 16 | Full Stack Framework |
| React 19 | UI |
| TypeScript | Type Safety |
| MongoDB | Database |
| Mongoose | ODM |
| JWT | Authentication |
| bcryptjs | Password Hashing |
| Nodemailer | Email Service |
| Axios | HTTP Requests |
| Tailwind CSS | Styling |
src
│
├── app
│ ├── api
│ │ └── users
│ │ ├── signup
│ │ ├── login
│ │ ├── logout
│ │ ├── me
│ │ ├── verifyemail
│ │ ├── forgotpassword
│ │ └── resetpassword
│ │
│ ├── login
│ ├── signup
│ ├── profile
│ ├── forgotpassword
│ ├── resetpassword
│ └── verifyemail
│
├── dbConfig
├── helpers
├── models
└── proxy.ts
User Signup
│
▼
Password Hashing (bcrypt)
│
▼
Store User in MongoDB
│
▼
Send Verification Email
│
▼
Verify Account
│
▼
Login
│
▼
Generate JWT
│
▼
Store JWT in HTTP-only Cookie
│
▼
Access Protected Routes
Forgot Password
│
▼
Generate Reset Token
│
▼
Send Reset Email
│
▼
User Opens Link
│
▼
Enter New Password
│
▼
Password Re-hashed
│
▼
Database Updated
Clone the repository
git clone https://github.com/othzer/Authentication-system-fullstack-nextjs.gitInstall dependencies
npm installCreate an environment file
MONGO_URI=TOKEN_SECRET=DOMAIN=MAIL_HOST=MAIL_PORT=MAIL_USER=MAIL_PASS=Run the development server
npm run devOpen
http://localhost:3000
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/users/signup | Register User |
| POST | /api/users/login | Login User |
| GET | /api/users/logout | Logout User |
| GET | /api/users/me | Get Logged-in User |
| POST | /api/users/verifyemail | Verify Email |
| POST | /api/users/forgotpassword | Send Password Reset Email |
| POST | /api/users/resetpassword | Reset Password |
This project helped strengthen my understanding of:
- Authentication Architecture
- JWT Authentication
- HTTP-only Cookies
- Password Hashing
- Secure API Development
- MongoDB with Mongoose
- Next.js App Router
- Email Verification Workflows
- Password Recovery Systems
- TypeScript Backend Development
- Google OAuth
- GitHub OAuth
- Refresh Tokens
- Role-Based Access Control (RBAC)
- Two-Factor Authentication (2FA)
- Rate Limiting
- Docker Support
- Unit & Integration Tests
- Account Management Dashboard
- User Activity Logs
Contributions are welcome.
- Fork the repository
- Create your feature branch
git checkout -b feature/new-feature- Commit your changes
git commit -m "Add new feature"- Push your branch
git push origin feature/new-feature- Open a Pull Request
Proprietary — © OtzrLabs. All rights reserved.