🔐 Auth App — MERN Authentication Platform

🚀 Project Status: LIVE — Production Ready 🧩 Full Stack Complete | Multi-Tenant Auth SaaS Platform

A secure and scalable Authentication-as-a-Service (Auth SaaS) platform built using the MERN stack — inspired by Clerk and Auth0. Developers can create projects, generate API keys, and integrate authentication into their apps via a multi-tenant architecture.

---

🔄 Development Roadmap

Phase	Status	Description
Foundation	✅ Done	Auth logic with JWT, email, and bcrypt
Multi-Tenant Platform	✅ Done	Dashboard, projects, API keys, scoped users/sessions
SDK & NPM Packages	🔜 Planned	@sumitr995/auth-js core SDK + React hooks
UI Component Library	🔜 Planned	Pre-built <SignIn />, <SignUp /> components
Advanced SaaS	🔜 Planned	OAuth, RBAC, webhooks, analytics, organizations

---

⚡ Backend Features (Completed)

• 🧾 Developer Registration & Login
• 🔑 JWT Authentication with HTTP-Only Cookies
• 🛡️ Multi-Tenant Project Management & API Keys
• 📧 Email Verification via OTP (Nodemailer)
• 🔁 Password Reset via OTP
• 🔒 Encrypted Passwords (bcrypt)
• 🗂️ Service Layer Architecture (Controllers → Services → Models)

---

🎨 Frontend (Completed)

• ⚙️ Built with React 19 + Vite
• 🎨 Vercel-Inspired Design — stark, clean, technical aesthetic
• 🖋️ Typography: Inter (geometric sans) + JetBrains Mono (technical labels)
• 🎭 Atmospheric mesh gradients (cyan, pink, violet) at hero scale
• 📡 API Calls handled by Axios (with credentials)
• 🧭 Navigation via React Router v7
• 🧩 shadcn/ui + Radix UI components with Tailwind CSS 4
• 🔔 Notifications with React-Toastify
• 📋 Developer Dashboard — create & manage projects
• 📄 Documentation & Integration pages for developers

---

🔄 Platform Workflow

1. Developer Registration — Sign up for the platform
2. Project Creation — Create one or more projects in the Dashboard
3. API Key Generation — Generate unique API keys per project
4. Integration — Use API keys to authenticate external client apps
5. Multi-Tenant Auth — Platform handles auth scoped to each project

---

🧰 Tech Stack

Layer	Libraries / Frameworks
Backend	Node.js, Express.js, MongoDB, Mongoose
Auth & Security	JWT, bcrypt, cookie-parser, cors
Email Service	Nodemailer
Configuration	dotenv
Dev Tools	nodemon
Frontend	React 19, Vite, Tailwind CSS 4, shadcn/ui, Radix UI
Form Handling	react-hook-form
Icons	lucide-react
Design System	Vercel-inspired (Ink #171717, Canvas, mesh gradients)
Deployment	Vercel (Client + Server)

---

⚙️ Setup Guide

1. Clone the repository

   git clone https://github.com/Sumitr995/Auth-Service-App.git
   cd auth-app

2. Install dependencies

   cd Server && npm install
   cd ../Client && npm install

3. Setup environment variables

   • Copy .env.example → .env in both Server/ and Client/
   • Add your private credentials (Note: .env is ignored by Git for security reasons)

   Server .env example:

   PORT=5000
   MONGODB_URI=your_mongodb_uri
   JWT_SECRET=your_secret_key
   FRONTEND_URL=http://localhost:5173
   SENDER_EMAIL=your_email@gmail.com
   SENDER_PASSWORD=your_app_password

   Client .env example:

   VITE_BACKEND_URL=http://localhost:5000/api

4. Run the backend server

   cd Server
   npm run dev

5. Run the frontend client (in a new terminal)

   cd Client
   npm run dev

---

🧩 Folder Structure

auth-app/
│
├── Client/              # React 19 + Vite frontend
│   ├── src/
│   │   ├── pages/       # Home, Dashboard, Docs, Features, etc.
│   │   ├── components/  # UI, Dashboard, Landing, etc.
│   │   ├── api/         # Axios configuration
│   │   └── assets/      # SVGs & images
│   ├── public/
│   └── package.json
│
├── Server/              # Express.js REST API
│   ├── Controller/      # Route handlers
│   ├── models/          # Mongoose schemas (user, app, otp, token)
│   ├── routes/          # Express API routes (auth, user, app)
│   ├── middleware/      # Auth middleware
│   ├── services/        # Business logic layer
│   ├── config/          # DB & nodemailer config
│   ├── utils/           # Helper functions
│   ├── server.js        # Main server entry point
│   └── package.json
│
├── Context/             # Internal docs & roadmap
│   ├── PLAN.md          # Roadmap & execution plan
│   ├── INFRA.md         # Infrastructure & architecture
│   ├── CLIENT.md        # Frontend conventions
│   ├── DESIGN.md        # Design system specification
│   ├── ERRORS.md        # Troubleshooting guide
│   └── GEMINI.md        # AI agent context
│
└── Readme.md

---

❗ Troubleshooting

Common issues and fixes are documented in Context/ERRORS.md:

• Cookies not setting — CORS mismatch or missing credentials: true
• OTP not sending — SMTP misconfiguration (use Gmail App Passwords)
• MongoDB timeout — IP not whitelisted in Atlas
• Styles not applying — Tailwind 4 build setup

---

📜 License

Licensed under the MIT License — you're free to use, modify, or extend this project.

---

Status: 🚀 Live — auth.sumitr995.me

Stack: MERN + Vite + Tailwind

Author: Sumit Rathod