🔐 Secure Auth – MERN Authentication System

A secure, production-ready authentication system built using the MERN stack with JWT access & refresh tokens, cookie-based authentication, and full deployment on Render.

This project demonstrates real-world authentication best practices including token rotation, protected routes, and secure logout.

---

🚀 Live Deployment

🌐 Frontend

👉 https://secure-auth-frontend-6nfe.onrender.com

⚙️ Backend API

👉 https://secure-auth-backend-xsa9.onrender.com

---

🛠️ Tech Stack

Frontend

• React (Vite)
• JavaScript
• Fetch API
• React Router
• LocalStorage (access token)
• Deployed on Render

Backend

• Node.js
• Express.js
• MongoDB Atlas
• Mongoose
• JWT (Access & Refresh Tokens)
• HTTP-only Cookies
• Deployed on Render

---

✨ Features

• ✅ User Registration
• ✅ User Login
• ✅ JWT Access Token
• ✅ JWT Refresh Token (stored in HTTP-only cookie)
• ✅ Token rotation
• ✅ Protected routes
• ✅ Secure logout
• ✅ CORS configured for production
• ✅ Environment-based configuration
• ✅ Production deployment (Frontend + Backend)

---

🔐 Authentication Flow

1. User logs in with email & password
2. Backend returns:
   • Access Token → stored in localStorage
   • Refresh Token → stored in HTTP-only cookie
3. Access token is used for API requests
4. When access token expires:
   • Refresh token generates a new access token
5. Logout clears:
   • Access token
   • Refresh token cookie

---

🌐 API Endpoints

Base URL: https://secure-auth-backend-xsa9.onrender.com

Auth Routes

POST /api/auth/register POST /api/auth/login POST /api/auth/refresh POST /api/auth/logout GET /api/auth/me

---

⚙️ Environment Variables

Backend (backend/.env)

PORT=5000 MONGO_URI=your_mongodb_atlas_uri ACCESS_TOKEN_SECRET=your_access_token_secret REFRESH_TOKEN_SECRET=your_refresh_token_secret FRONTEND_URL=https://secure-auth-frontend-6nfe.onrender.com

Frontend (frontend/.env)

VITE_API_BASE_URL=https://secure-auth-backend-xsa9.onrender.com

⚠️ Never commit .env files to GitHub

---

🧪 Run Locally

Backend

cd backend
npm install
npm run dev

###Frontend
cd frontend
npm install
npm run dev


🚀 Deployment Guide (High Level)
Backend (Render)
Create Web Service

Root directory: backend

Start command: npm start

Add environment variables

Enable cookies & CORS

Frontend (Render)
Create Static Site

Root directory: frontend

Build command: npm run build

Publish directory: dist

Set VITE_API_BASE_URL


🚀 Deployment Guide (High Level)
Backend (Render)
Create Web Service

Root directory: backend

Start command: npm start

Add environment variables

Enable cookies & CORS

Frontend (Render)
Create Static Site

Root directory: frontend

Build command: npm run build

Publish directory: dist

Set VITE_API_BASE_URL

VITE_API_BASE_URL

🔒 Security Best Practices Used

HTTP-only cookies for refresh tokens

Short-lived access tokens

Token rotation

CORS origin restriction

Environment variable secrets

No sensitive data in client

Common Issues Solved

❌ CORS errors in production

❌ Cookies not sent cross-origin

❌ Token refresh infinite loops

❌ Render path & build errors

❌ Frontend/Backend URL mismatch

🧠 What I Learned

Real-world JWT authentication

Secure token storage strategies

Production deployment on Render

Debugging CORS & cookie issues

Full-stack integration

👨‍💻 Author

Gaurav Gawade
GitHub: https://github.com/Ga1233

⭐ If you like this project

Give it a ⭐ on GitHub and feel free to fork it!