This application is deployed on DigitalOcean. Please check it out 😄 here.
Frontend:
Backend:
Database:
Deployed On:
- Protected routes with Higher Order Components
- Login with forgot password feature.
- JWT protected APIs
- Passwords are encrypted.
- Image upload with Cloudinary
- Toast notifications for user actions.
├── 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
In order to run the project you need node>=16
and npm>=8
installed on your machine.
git clone https://github.com/rtewari056/mern-stack-authentication-boilerplate.git
cd mern-stack-authentication-boilerplate
# 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=<YOUR_SMTP_SERVER_HOST_NAME>
SMTP_PORT=587
SMTP_USER=<YOUR_SMTP_SERVER_USER_NAME>
SMTP_PASSWORD=<YOUR_SMTP_SERVER_PASSWORD>
EMAIL_FROM=<EMAIL_ADDRESS_OF_SENDER>
# Now go to client folder and put your cloudinary creadentials
REACT_APP_CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>
REACT_APP_CLOUDINARY_UPLOAD_PRESET=<YOUR_CLOUDINARY_UPLOAD_PRESET>
npm install # Server dependencies
cd client
npm install # Client dependencies
In the root
directory, open two terminal sessions and run both commands separately:
npm run client
npm run server
If you want to contact me, you can reach me through below handles.
MERN Stack Authentication Boilerplate is licensed under the MIT License.