create-mern-auth-kit

🚀 Create a full-stack MERN authentication starter with one command.

Quick Start

npx create-mern-auth-kit my-app
cd my-app

What You Get

A complete, production-ready MERN stack authentication system:

Frontend (Vite + React + Tailwind)

• ⚛️ React 18 with Vite
• 🎨 Tailwind CSS pre-configured
• 🔐 Protected routes
• 📝 Login & Signup pages
• ✅ Remember me functionality
• 👤 Profile page & settings
• 🎨 Modern, responsive UI
• 🔄 Auth context for state management
• 📡 Axios with interceptors

Backend (Node.js + Express)

• 🚀 Express.js server
• 🍃 MongoDB with Mongoose
• 🔑 JWT authentication
• 🔒 Password hashing (bcrypt)
• ✅ Input validation
• 🛡️ Protected routes middleware

Project Structure

my-app/
├── backend/
│   ├── src/
│   │   ├── config/
│   │   │   └── db.js
│   │   ├── controllers/
│   │   │   └── authController.js
│   │   ├── middleware/
│   │   │   └── authMiddleware.js
│   │   ├── models/
│   │   │   └── User.js
│   │   ├── routes/
│   │   │   ├── authRoutes.js
│   │   │   └── index.js
│   │   └── utils/
│   │       └── generateToken.js
│   ├── server.js
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── api/
│   │   ├── components/
│   │   ├── context/
│   │   ├── pages/
│   │   └── routes/
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
│
├── package.json
└── README.md

Usage

Create a New Project

# Using npx (recommended)
npx create-mern-auth-kit my-app

# Or install globally
npm install -g create-mern-auth-kit
create-mern-auth-kit my-app

Options

# Skip git initialization
npx create-mern-auth-kit my-app --no-git

# Skip dependency installation
npx create-mern-auth-kit my-app --no-install

Running the Project

After creating your project:

cd my-app

# Configure environment variables (edit .env files)

# Start MongoDB

# Run both servers concurrently
npm run dev

# Or run separately:
# Terminal 1 - Backend
cd backend && npm run dev

# Terminal 2 - Frontend  
cd frontend && npm run dev

Default URLs

• Frontend: http://localhost:5173
• Backend: http://localhost:5000

API Endpoints

| Method | Endpoint | Description | Auth | |--------|----------|-------------|------| | POST | /api/auth/register | Register user | No | | POST | /api/auth/login | Login user | No | | GET | /api/auth/me | Get current user | Yes | | POST | /api/auth/logout | Logout user | Yes | | PUT | /api/auth/update | Update profile | Yes | | PUT | /api/auth/password | Change password | Yes |

Environment Variables

Backend (backend/.env)

PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/mern-auth-db
JWT_SECRET=your-secret-key
JWT_EXPIRE=7d
CLIENT_URL=http://localhost:5173

Frontend (frontend/.env)

VITE_API_URL=http://localhost:5000/api

Features

• ✅ User registration
• ✅ User login
• ✅ Remember me option
• ✅ JWT token authentication
• ✅ Protected routes (frontend & backend)
• ✅ Auth context with React hooks
• ✅ Automatic token injection
• ✅ Password hashing
• ✅ Input validation
• ✅ Error handling
• ✅ Responsive design

Tech Stack

Frontend:

• React 18
• Vite
• Tailwind CSS
• React Router v6
• Axios

Backend:

• Node.js
• Express.js
• MongoDB
• Mongoose
• JWT
• Bcrypt.js

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Adil Sagheer

Made with ❤️ for the MERN community