https://github.com/adelpro/mern-auth-roles-boilerplate
MERN-auth-roles a web application that allows you to manage the authentication and roles of users using MERN (MongoDB Express React Node)
https://github.com/adelpro/mern-auth-roles-boilerplate
authentication cookie hookform jwt mern nodejs react reactjs recoil roles token yup
Last synced: 14 days ago
JSON representation
MERN-auth-roles a web application that allows you to manage the authentication and roles of users using MERN (MongoDB Express React Node)
- Host: GitHub
- URL: https://github.com/adelpro/mern-auth-roles-boilerplate
- Owner: adelpro
- License: mit
- Created: 2022-09-30T10:06:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-20T01:06:53.000Z (almost 2 years ago)
- Last Synced: 2025-04-05T21:51:13.766Z (about 1 month ago)
- Topics: authentication, cookie, hookform, jwt, mern, nodejs, react, reactjs, recoil, roles, token, yup
- Language: JavaScript
- Homepage: https://mern-auth-roles.onrender.com
- Size: 19.2 MB
- Stars: 26
- Watchers: 1
- Forks: 11
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# MERN-auth-roles
[](https://www.codacy.com/gh/adelpro/MERN-auth-roles-boilerplate/dashboard?utm_source=github.com&utm_medium=referral&utm_content=adelpro/MERN-auth-roles-boilerplate&utm_campaign=Badge_Grade)
## Live website
https://mern-auth-roles.onrender.com
## About
MERN-auth-roles a full-stack MERN (MongoDB Express React Node) boilerplate starter application with React, Recoil, authentication, roles, JWT, protected api
We have two parts in the application
## MERN-AUTH-ROLES-Backend (sever)
### Futures
✓ User with roles (Admin, Manager, user)
✓ NodeJS server
✓ Token and refresh token
✓ async/await syntax
✓ Server side validation
✓ .env file configuration
✓ Profile image upload with Multer (delete old image and replace it with the new image),
✓ Cross-origin resource sharing (CORS)
✓ Limit repeated requests such as password reset.
✓ Cookies
✓ Password Hashing
✓ Real-time notifications using Socket.io
run this command
```
cd backend
npm install
npm run dev
```
## MERN-AUTH-ROLES-Frontend (client)
### Futures
✓ React DevTools desabled in production
✓ Axios with Interceptors to manage fetchs
✓ Token persist only in memory and cookies
✓ Refresh Token (in memory) and access token (in cookies)
✓ Hookform: to manage form inputs
✓ YUP: to validate inputs
✓ react-multi-select-component
✓ Recoil and Recoil-persist: to manage states
✓ react-icons and @uiball/loaders to give a nice look to the UI
✓ Protected routes with Higher order components
✓ Layout component, it will be very easy to navigation and footer
✓ Profile image upload
✓ Real-time notifications using Socket.io client
### Run the code
you can run the code by executing this command
```
cd frontend
npm install
npm start
```
## Screenshots
### Home page
### Dash
### Users
### Notes
### Notifications
[MERN-auth-roles](https://i.imgur.com/yk2nrWy.png)
### Youtube Video demonstration
## Contact us 📨
[![twitter][1.1]][1]
[![facebook][2.1]][2]
[![github][3.1]][3]
[![medium][4.1]][4]
## Support me ❤️
[](https://ko-fi.com/adelbenyahia)
[](https://www.buymeacoffee.com/Adel.benyahia/)
[](https://www.paypal.com/paypalme/adelbenyahia)
[](bitcoin:1PstR1HYTG8FbVRR7YZhQftYumVAURXuq7?label=Quranipfs&message=Payment%20to%20Quranipfs)
[1]: https://www.twitter.com/adelpro
[1.1]: http://i.imgur.com/tXSoThF.png "twitter icon with padding"
[2]: https://www.facebook.com/adel.benyahia
[2.1]: http://i.imgur.com/P3YfQoD.png "facebook icon with padding"
[3]: https://github.com/adelpro
[3.1]: http://i.imgur.com/0o48UoR.png "github icon with padding"
[4]: adelpro.medium.com
[4.1]: https://i.imgur.com/tijdQEw.png "medium icon with padding"
## Thank you
[](https://github.com/adelpro/MERN-auth-roles-boilerplate/stargazers)
[](https://github.com/adelpro/MERN-auth-roles-boilerplate/network/members)