MERN JWT Authentication

This is a full-stack web application that implements user authentication using JWT (JSON Web Tokens). It is built using the MERN stack, consisting of MongoDB, Express.js, React.js, and Node.js. This project demonstrates secure authentication methods, including user registration, login, password reset, and email verification.

Demo

You can check out the live demo of the application here: MERN JWT Authentication.

Features

User registration with email verification
User login with JWT authentication
Password reset functionality
Secure routes accessible only by authenticated users
Integration with Nodemailer for email services
Responsive UI built with React.js and Tailwind CSS

Technologies Used

Frontend

React.js: JavaScript library for building user interfaces
Tailwind CSS: Utility-first CSS framework for styling
shadcn: Component library for React, providing a set of pre-designed UI components and utilities
Vite: Fast and lean development environment for modern web projects

Backend

Node.js: JavaScript runtime built on Chrome's V8 JavaScript engine
Express.js: Web framework for Node.js
MongoDB: NoSQL database for storing user data
Mongoose: ODM (Object Data Modeling) library for MongoDB and Node.js
JWT: JSON Web Tokens for securing API routes
Nodemailer: Email service for sending email verifications and password reset emails

Installation and Setup

Prerequisites

Node.js installed
MongoDB installed and running locally or have a MongoDB Atlas account

Setup Instructions

Clone the repository:

git clone https://github.com/mdshakilkhan841/MERN-Authentication.git
cd MERN-Authentication

Backend Setup:
- Create a .env file in the root directory and add your environment variables (MONGO_URI, PORT, JWT_SECRET, SENDER_MAIL, EMAIL_PORT, APP_PASSWORD, CLIENT_URL="http://localhost:5173").
- Install backend dependencies:
```
npm install
```
- Start the backend server:
```
npm run server
```
Frontend Setup:
- Navigate to the frontend directory:
```
cd frontend
```
- Create a .env file in the frontend directory and add your environment variables.
- Install frontend dependencies:
```
npm install
```
- Start the frontend development server:
```
npm run dev
```

Build and Deploy

Build the frontend for production:
```
npm run build
```
Deploy the application to Vercel or any other hosting platform of your choice.

Project Structure

├── backend
│   ├── controllers
│   ├── database
│   ├── mail
│   ├── middleware
│   ├── models
│   ├── routes
│   ├── utils
│   └── server.js
├── frontend
│   ├── dist
│   ├── public
│   ├── src
│   ├── .gitignore
│   ├── package.json
│   ├── README.md
│   └── vite.config.js
├── .env
├── .gitignore
├── package.json
└── README.md

Usage

Register: Create a new account using your email. A verification email will be sent to your inbox.
Login: Access your account using your registered email and password.
Reset Password: Reset your password by providing your registered email if you forget it.
Secure Routes: Access protected routes only after logging in.

Acknowledgments

Render for hosting the live demo
Nodemailer for providing email services