Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/rtewari056/mern-stack-authentication-boilerplate
- Owner: rtewari056
- License: mit
- Created: 2022-11-17T09:48:02.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-17T08:32:32.000Z (over 1 year ago)
- Last Synced: 2024-12-03T18:55:57.347Z (about 2 months ago)
- Topics: authentication, boilerplate-template, express, full-stack, mern-stack, mongodb, mongoose, node, production-ready, react
- Language: JavaScript
- Homepage: https://mernauth.rohittewari.live
- Size: 1.13 MB
- Stars: 10
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 🚀 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.
## 📃 License
MERN Stack Authentication Boilerplate is licensed under the MIT License.
### Show your support by 🌟 the project