Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rtewari056/mern-stack-authentication-boilerplate

Ultimate MERN Stack Authentication Boilerplate for production use
https://github.com/rtewari056/mern-stack-authentication-boilerplate

authentication boilerplate-template express full-stack mern-stack mongodb mongoose node production-ready react

Last synced: about 5 hours ago
JSON representation

Ultimate MERN Stack Authentication Boilerplate for production use

Awesome Lists containing this project

README

        


Logo with shadow

Ultimate MERN Stack Authentication Boilerplate for production use




Website up

Repo size
GitHub top language

MIT License

## 🚀 Demo

This application is deployed on DigitalOcean. Please check it out :smile: [here](https://mernauth.rohittewari.live).

![mern-stack-authentication-boilerplate](https://user-images.githubusercontent.com/75976169/207791814-80e8ff7b-39d1-4db4-b450-b861f98e406f.png)

## 🖥️ Tech Stack

**Frontend:**

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) 
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) 
![JavaScript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E) 
![Bootstrap](https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&logo=bootstrap&logoColor=white) 
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) 
![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) 

**Backend:**

![Node JS](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white) 
![HTML5](https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white) 
![JWT](https://img.shields.io/badge/json%20web%20tokens-323330?style=for-the-badge&logo=json-web-tokens&logoColor=pink) 

**Database:**

![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white) 

**Deployed On:**

[![DigitalOcean](https://img.shields.io/badge/Digital_Ocean-0080FF?style=for-the-badge&logo=DigitalOcean&logoColor=white)](https://mernauth.rohittewari.live)

## ⚡️ Features

- [x] Protected routes with Higher Order Components
- [x] Login with forgot password feature.
- [x] JWT protected APIs
- [x] Passwords are encrypted.
- [x] Image upload with Cloudinary
- [x] Toast notifications for user actions.

## 📁 Project structure
```terminal
├── client/
│ ├── public/
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src/
│ │ ├── assets/
│ │ │ ├── email.svg
│ │ │ ├── green_check.svg.json
│ │ │ ├── index.js
│ │ │ ├── logo.png
│ │ │ └── user.svg
│ │ ├── components/
│ │ │ ├── NavigationBar/
│ │ │ │ ├── NavigationBar.jsx
│ │ │ │ └── NavigationBar.css
│ │ │ ├── ProfileModal/
│ │ │ │ └── ProfileModal.jsx
│ │ │ └── index.js
│ │ ├── context/
│ │ │ └── AuthProvider.jsx
│ │ ├── Pages/
│ │ │ ├── ForgotPasswordPage/
│ │ │ │ ├── ForgotPasswordPage.css
│ │ │ │ └── ForgotPasswordPage.jsx
│ │ │ ├── HomePage/
│ │ │ │ ├── HomePage.css
│ │ │ │ └── HomePage.jsx
│ │ │ ├── LoginPage/
│ │ │ │ ├── LoginPage.css
│ │ │ │ └── LoginPage.jsx
│ │ │ ├── PasswordResetPage/
│ │ │ │ ├── PasswordResetPage.css
│ │ │ │ └── PasswordResetPage.jsx
│ │ │ ├── RegisterPage/
│ │ │ │ ├── RegisterPage.css
│ │ │ │ └── RegisterPage.jsx
│ │ │ └── index.js
│ │ ├── Utils/
│ │ │ ├── index.js
│ │ │ ├── notify.js
│ │ │ └── PrivateRoutes.jsx
│ │ ├── App.css
│ │ ├── App.jsx
│ │ └── index.js
│ ├── .env.example
│ ├── package-lock.json
│ └── package.json
├── config/
│ └── db.js
├── controllers/
│ ├── auth.js
│ └── private.js
├── middleware/
│ ├── auth.js
│ └── error.js
├── models/
│ └── User.js
├── routes/
│ ├── auth.js
│ └── private.js
├── utils/
│ ├── errorResponse.js
│ └── sendEmail.js
├── .env.example
├── .gitignore
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── server.js
```

## 📖 Prerequisites

In order to run the project you need `node>=16` and `npm>=8` installed on your machine.

## 🚩 Getting Started

### 1. Clone the `mern-stack-authentication-boilerplate` repository:

```bash
git clone https://github.com/rtewari056/mern-stack-authentication-boilerplate.git
```

### 2. Navigate into repo:
```bash
cd mern-stack-authentication-boilerplate
```

### 3. Rename `.env.example` into `.env` and put all creadentials:

```bash
# In the root directory put your creadentials
APP_BASE_URL=http://localhost:3000
NODE_ENV=development
PORT=5000
MONGO_URI="YOUR_MONGO_CONNECTION_URL"
JWT_SECRET="YOUR_JWT_SECRET"
JWT_EXPIRE=24 # In hours
SMTP_HOST=
SMTP_PORT=587
SMTP_USER=
SMTP_PASSWORD=
EMAIL_FROM=

# Now go to client folder and put your cloudinary creadentials
REACT_APP_CLOUDINARY_CLOUD_NAME=
REACT_APP_CLOUDINARY_UPLOAD_PRESET=
```

### 4. Install package dependencies:

```bash
npm install # Server dependencies
cd client
npm install # Client dependencies
```

### 4. Run project:
In the `root` directory, open two terminal sessions and run both commands separately:

```bash
npm run client
npm run server
```

### 5. Open your browser and go to `http://localhost:3000`

## 👤 Developer

[Rohit Tewari](https://github.com/rtewari056)

## 📬 Contact

If you want to contact me, you can reach me through below handles.

LinkedIn
Gmail
Twitter

## 📃 License

MERN Stack Authentication Boilerplate is licensed under the MIT License.

### Show your support by 🌟 the project