theartifulprogrammer / mern-authentication

Full MERN Authentication Implementation - User Activation, Forgot Password, Refresh Tokens, Access Tokens.

MERN Authentication

Full MERN Authentication Implementation - User Activation, Forgot Password, Refresh Tokens, Access Tokens.

Table of Contents

• Introduction
• Features
• Prerequisites
• Installation
• Usage
• Project Structure
• API Endpoints
• Technologies Used
• Contributing
• License
• Acknowledgements

Introduction

This project demonstrates a complete authentication system built using the MERN stack (MongoDB, Express.js, React.js, Node.js). It includes user registration, activation via email, password reset, and the use of access and refresh tokens for secure authentication.

Features

• User Registration
• Email Activation
• Login/Logout
• Forgot Password
• Password Reset
• Access Tokens
• Refresh Tokens
• Protected Routes

Prerequisites

Before you begin, ensure you have the following installed on your machine:

• Node.js (v14.x or later)
• MongoDB

Installation

1. Clone the repository:

   git clone https://github.com/TheArtifulProgrammer/mern-authentication.git

2. Navigate to the project directory:

   cd mern-authentication

3. Install server dependencies:

   cd server
   npm install

4. Install client dependencies:

   cd ../client
   npm install

Usage

1. Create a .env file in the server directory with the following environment variables:

   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret
   EMAIL_SERVICE=your_email_service
   EMAIL_USER=your_email_user
   EMAIL_PASS=your_email_password
   CLIENT_URL=http://localhost:3000

2. Start the development server:

   cd server
   npm run dev

3. Start the React development server:

   cd ../client
   npm start

4. Open your browser and navigate to http://localhost:3000

Project Structure

mern-authentication/
├── client/         # React frontend
│   ├── public/
│   └── src/
│       ├── components/
│       ├── pages/
│       ├── utils/
│       └── App.js
├── server/         # Express backend
│   ├── config/
│   ├── controllers/
│   ├── middlewares/
│   ├── models/
│   ├── routes/
│   └── server.js
└── README.md