MERN Login & Registration

This is a simple MERN (MongoDB, Express, React, Node.js) stack project for user login and registration.

🔗 View Live Demo

Features

• User registration with strong password validation
• Secure login with JWT authentication (HttpOnly cookies)
• Rate limiting to prevent brute-force attacks
• Protected routes with React Router and backend middleware
• Password hashing with bcrypt
• Form validation and user-friendly error handling
• Responsive, mobile-first frontend styled with Tailwind CSS

Technologies Used

• Frontend: React, Vite, Axios, TailwindCSS, Redux Toolkit, React-Router-Dom, @heroicons/react
• Backend: Node.js, Express, MongoDB, Mongoose, JWT, bcryptjs, CORS, express-validator, dotenv
• Database: MongoDB (local or cloud with MongoDB Atlas)

System Architecture

• Frontend (React on IONOS) makes API calls via Axios.
• Backend (Express on Render) handles requests and communicates with MongoDB Atlas.
• Authentication:
  • Desktop → JWT stored in HttpOnly cookies
  • Mobile → JWT stored in localStorage (fallback)

Getting Started

Prerequisites

• Node.js installed
• MongoDB installed and running
• npm

Installation

1. Clone the repository:

git clone https://github.com/maghwiPanchal/MERNloginreg.git
cd mern-login-reg

2. Setup backend:

cd backend
npm install

3. Setup frontend:

cd ../frontend
npm install

Environment Variables

Create a .env file in the backend directory with the following variables:

PORT=5001
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

Replace your_mongodb_connection_string and your_jwt_secret with your actual MongoDB connection URI and a secret key for JWT.

Running the Application

CORS Configuration

The backend server uses CORS to allow requests from the frontend. By default, it allows origins such as http://localhost:5173 or http://localhost:5174 (default Vite ports). If you change the frontend port, update the CORS allowed origins accordingly in the backend configuration.

Deployment

• Backend: Render (Node/Express API)
• Frontend: IONOS Subdomain (Vite build dist output)
• Configured CORS and cookies for secure cross-origin communication.

Usage

• Register a new user on the registration page.
• Login with the registered credentials.
• Access protected routes after login.

License

All rights reserved. This project is not licensed for reuse or redistribution.