🔐 AuthFlow — Authentication System

AuthFlow is a robust, full‑stack authentication system built with React (frontend) and Node.js + Express + MongoDB (backend). It provides secure user registration and login using JWTs, bcrypt password hashing, protected and role‑based routes, and easy local or cloud deployment.

A robust full-stack authentication system built with React and Node.js

Features • Tech Stack • Installation • API • Security • Author

✨ Features

• 🔒 User Registration & Login: Secure user authentication with JWT tokens
• 🛡️ Password Encryption: Uses bcrypt for secure password hashing
• 🚫 Protected Routes: Client-side and server-side route protection
• 📱 Responsive Design: Modern UI that works on all devices
• 👥 Role-Based Access: Support for user roles (user, admin)
• 💾 Persistent Sessions: Login state persists across browser sessions

🛠️ Tech Stack

Frontend	Backend
React 18 - Modern React with hooks React Router DOM - Client-side routing Axios - HTTP client for API calls CSS3 - Modern styling with CSS variables	Node.js - JavaScript runtime Express.js - Web application framework MongoDB - NoSQL database Mongoose - MongoDB object modeling JWT - JSON Web Tokens for authentication bcrypt - Password hashing Helmet - Security middleware CORS - Cross-origin resource sharing

📂 Project Structure

/
├── backend/                 # Server-side code
│   ├── middleware/
│   │   └── auth.js          # Authentication middleware
│   ├── models/
│   │   └── User.js          # User model schema
│   ├── routes/
│   │   ├── auth.js          # Authentication routes
│   │   └── protected.js     # Protected routes
│   ├── .env.example         # Environment variables template
│   ├── package.json         # Backend dependencies
│   └── server.js            # Express server setup
├── frontend/                # Client-side code
│   ├── public/
│   │   └── index.html       # HTML template
│   ├── src/
│   │   ├── App.jsx          # Main React component
│   │   ├── index.css        # Styles
│   │   └── index.jsx        # React entry point
│   └── package.json         # Frontend dependencies
└── package.json             # Root package.json

🚀 Getting Started

Prerequisites

Node.js	v14 or higher
MongoDB	Local or cloud instance
Package Manager	npm or yarn

Installation

Step 1: Clone the repository

git clone https://github.com/abhrajyoti-01/AuthFlow.git

Step 2: Install dependencies

npm run install-all

Step 3: Configure environment

cd backend
cp .env.example .env

Update the .env file with your configuration:

MONGODB_URI=mongodb://127.0.0.1:27017/auth-system
JWT_SECRET=your-super-secret-jwt-key-here
JWT_EXPIRES_IN=7d
PORT=5000

Step 4: Start MongoDB

Make sure MongoDB is running on your system or connect to your cloud instance.

Step 5: Run the application

Start the backend server:

npm run dev-backend

In a new terminal, start the frontend:

npm run dev-frontend

🌐 Access the Application

Service	URL	Description
Frontend	http://localhost:3000	React application
Backend API	http://localhost:5000	Express server

🔌 API Endpoints

Authentication Routes

Method	Endpoint	Description	Auth Required
POST	/api/auth/register	Register a new user	No
POST	/api/auth/login	Login user	No

Protected Routes

Method	Endpoint	Description	Auth Required
GET	/api/protected/public	Public route	No
GET	/api/protected/profile	Get user profile	Yes
GET	/api/protected/admin	Admin only route	Yes + Admin role

🎯 Features Implemented

Frontend

• ✅ Modern React with functional components and hooks
• ✅ React Router for navigation
• ✅ Responsive design with CSS Grid and Flexbox
• ✅ Form validation and error handling
• ✅ JWT token storage and management
• ✅ Protected routes
• ✅ Beautiful UI with animations and transitions

Backend

• ✅ RESTful API with Express.js
• ✅ MongoDB integration with Mongoose
• ✅ JWT authentication
• ✅ Password hashing with bcrypt
• ✅ Input validation
• ✅ Error handling
• ✅ Security middleware (Helmet, CORS, Rate limiting)
• ✅ Role-based authorization

🛡️ Security Features

Feature	Description
🔒 Password Hashing	bcrypt with 12 salt rounds
⏱️ Token Expiration	JWTs expire after configured time
🚫 Protected Routes	Server and client-side protection
✅ Input Validation	Validation and sanitization of all inputs
🔍 Security Headers	Implemented using Helmet middleware
🚦 Rate Limiting	Prevents brute force and DoS attacks
🌐 CORS	Configured for secure cross-origin requests

👥 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

👨‍💻 Author

Abhrajyoti
@abhrajyoti-01

📜 License

This project is licensed under the MIT License.

---

_{Made with ❤️ by Abhrajyoti}