https://github.com/owenlobato/mern_auth
This project is a web application developed using the MERN stack (MongoDB, Express, React, and Node.js) that provides authentication features, protected routes, user registration, password reset via email, and uses JSON Web Tokens (JWT) for authentication.
https://github.com/owenlobato/mern_auth
authentication email-sender express jwt mongodb nodejs react
Last synced: 3 months ago
JSON representation
This project is a web application developed using the MERN stack (MongoDB, Express, React, and Node.js) that provides authentication features, protected routes, user registration, password reset via email, and uses JSON Web Tokens (JWT) for authentication.
- Host: GitHub
- URL: https://github.com/owenlobato/mern_auth
- Owner: OwenLobato
- Created: 2023-11-04T06:11:12.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-11T09:12:10.000Z (over 2 years ago)
- Last Synced: 2025-06-07T19:46:35.393Z (about 1 year ago)
- Topics: authentication, email-sender, express, jwt, mongodb, nodejs, react
- Language: JavaScript
- Homepage: https://mern-auth-itlf.onrender.com
- Size: 97.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Authentication and User Management Project
This project is a web application developed using the MERN stack (MongoDB, Express, React, and Node.js) that provides authentication features, protected routes, user registration, password reset via email, and uses JSON Web Tokens (JWT) for authentication.
## Project Structure
### Server
- **Components**: This section handles entities in the system, with a structure that includes Network (endpoint and response), Controller (application logic), and Store (database logic).
- **Config**: Configuration files for the server are stored in this section.
- **Middlewares**: Middleware functions are included for verifying user authentication.
- **Models**: Database models and schemas are defined using Mongoose in this section.
- **Network**: This part is responsible for managing server routes and responses.
- **Utils**: It houses useful functions, such as customizing the Error class and handling email sending.
### Client
- **App.jsx**: It configures public and private routes using React Router.
- **Components**: Application components are organized here, with global components being more generic and module-specific components categorized by section, such as Users, Authorization, and more.
- **Hooks**: Custom hooks are provided, including the use of the `utils/requests.js` function, an abstract component for making Axios requests, and custom hooks like `useAuth` that simplify and generalize requests.
## Security
The project implements robust security measures, including JWT-based authentication, middleware for private routes, user registration, and password reset via email (utilizing **[SendGrid](https://app.sendgrid.com/)** for email services).
## Environment Variables
Both the client and server utilize `.env` files to manage environment variables. This approach streamlines configuration for various environments.
### Server .env
```bash
NODE_ENV=
ORIGIN=
PRODUCTION_ORIGIN=
URL_PRODUCTION=
API_VERSION=
MONGODB_URI=
PORT=
SALT_ROUNDS=
JWT_SECRET_KEY=
JWT_EXPIRE_TIME=
EMAIL_SERVICE=
EMAIL_USERNAME=
EMAIL_PASSWORD=
EMAIL_FROM=
```
### Client .env
```bash
REACT_APP_NODE_ENV=
REACT_APP_API_URL_PRODUCTION=
REACT_APP_API_URL=
REACT_APP_PORT=
REACT_APP_API_VERSION=
REACT_APP_AUTH_VERSION=
```
## How to run the project
### Running the Server
From the root directory of the project, you can launch the server with the following command:
```bash
npm run start-server
```
This command takes you to the "server" directory, installs dependencies if not already done, and starts the server using "nodemon."
### Running the Client
To run the client, navigate to the project's root directory and execute the following command:
```bash
npm run start-client
```
This command installs client dependencies if not already installed and launches the React application using "react-scripts."
Ensure that both the server and client are operational to use the application effectively.
## Swagger Documentation
The project includes Swagger documentation for API endpoints. You can access the graphical documentation interface locally during development at [http://localhost:5000/api/v1/doc](http://localhost:5000/api/v1/doc). For the production environment, the Swagger documentation is available at [https://mern-auth-api-oaiy.onrender.com/api/v1/doc](https://mern-auth-api-oaiy.onrender.com/api/v1/doc). Additionally, the JSON format of the documentation is accessible both locally and in production at [http://localhost:5000/api/v1/doc.json](http://localhost:5000/api/v1/doc.json) and [https://mern-auth-api-oaiy.onrender.com/api/v1/doc.json](https://mern-auth-api-oaiy.onrender.com/api/v1/doc.json), respectively. This documentation provides comprehensive insights into the available API endpoints and their functionalities.
## Production Deployment
The project is currently deployed on [Render.com](https://dashboard.render.com/) for both the front end (client) and back end (server).
### Front End (Client)
The deployed front end is accessible at: [https://mern-auth-itlf.onrender.com](https://mern-auth-itlf.onrender.com)
### Back End (Server)
The deployed back end is accessible at: [https://mern-auth-api-oaiy.onrender.com](https://mern-auth-api-oaiy.onrender.com)
## Screen Examples
- **Login**: [Screenshot of the login form].
- **Register**: [Screenshot of the registration form].
- **Forgot Password**: [Screenshot of the form for sending forgotten password emails].
- **Reset Password**: [Screenshot of the form for changing the password].
- **Page Not Found**: [Screenshot of the notice indicating that the selected route doesn't exist].
- **Users (Authorized)**: [Screenshot of the user component when authorized].
- **Users (Unauthorized)**: [Screenshot of the user component when unauthorized].
