https://github.com/douaaaaa/authentication-system
This MERN Authentication System is a full-stack project that implements user authentication with features like registration, email verification, login, and so on. The application utilizes Nodemailer to send verification, welcome, and password reset emails, providing a secure and efficient user experience.
https://github.com/douaaaaa/authentication-system
authentication axios express jwt mern-stack mongodb nodejs nodemailer react zustand
Last synced: 5 months ago
JSON representation
This MERN Authentication System is a full-stack project that implements user authentication with features like registration, email verification, login, and so on. The application utilizes Nodemailer to send verification, welcome, and password reset emails, providing a secure and efficient user experience.
- Host: GitHub
- URL: https://github.com/douaaaaa/authentication-system
- Owner: douaaaaa
- Created: 2024-08-28T13:57:54.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-11T15:34:29.000Z (almost 2 years ago)
- Last Synced: 2025-02-01T17:44:16.196Z (over 1 year ago)
- Topics: authentication, axios, express, jwt, mern-stack, mongodb, nodejs, nodemailer, react, zustand
- Language: JavaScript
- Homepage:
- Size: 1.54 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Authentication System
This project is a full-stack authentication system built using the MERN stack (MongoDB, Express, React, Node.js). It demonstrates a complete user authentication workflow, including user registration, email verification, login, password reset, and JWT-based authentication.
## Features
- User Registration: Users can create an account by providing a unique email, a user name and password.
- Email Verification: After registration, users receive a verification email. The account must be verified to enable access. If the user didn't verify thier account the verification code will be expired
- Welcome Email: Once the email is verified, users receive a welcome email to confirm successful registration.
- Login: Registered users can log in using their credentials (their email and password).
- Password Reset: In case users forgot their password, they can request a password reset link, which is sent to their registered email address.
- Authentication: JSON Web Tokens (JWT) are used for secure authentication.
- Protected Routes: Backend routes are protected and can only be accessed by authenticated users.
- Password Hashing: User passwords are hashed using bcrypt for security.
- UI: Frontend built with React, framer motion and tailwindcss for a modern, responsive design.
## Tech Stack
- Frontend: React, React Router, Zustand for state management, Axios for API calls, Framer motion for animation
- Backend: Node.js, Express.js, Nodemailer for email services, bcryptjs
- Database: MongoDB
- Authentication: JWT (JSON Web Tokens)
- Styling: tailwindcss
## Installation
### Prerequisites
- Node.js
- MongoDB (local or cloud-based, e.g., MongoDB Atlas)
### Clone the Repository
```
git clone https://github.com/douaaaaa/authentication-system
cd authentication-system
```
### Backend Setup
1. Navigate to the backend directory:
```
cd server
```
2. Install dependencies:
```
npm install
```
3. Create a .env file in the root of the backend directory with the following environment variables:
```
PORT = 8000
MONGO = your_mongodb_uri
JWT_SECRET = your_jwt_secret
NODE_ENV = "development"
EMAIL = your_email_address
PASS = your_app_password (The 16-digit code generated by Google that is used with Nodemailer is known as an App Password. )
```
4. Start the backend server:
```
npm run dev
```
### Frontend Setup
1. Navigate to the frontend directory:
```
cd client
```
2. Install dependencies:
```
npm install
```
3. Start the frontend server:
```
npm run start
```
## Usage
1. Register a new user through the registration form.
2. Check your email and verify the account using the verification code sent.
3. Log in using the registered credentials.
4. If needed, use the "Forgot Password" feature to receive a reset link via email.
5. Access protected routes and test the authentication system.
## API Endpoints
### Auth Routes:
- POST /api/auth/signup - Register a new user
- POST /api/auth/verify-email - Verify user email with the token provided
- POST /api/auth/logout
- POST /api/auth/login - Login with existing user credentials
- POST /api/auth/reset-password - Reset password using the reset link by provinding the email to which the reset link will be sent
- POST /api/auth/reset-password/:token - Reset the user's password and update it with the new password.
## Acknowledgments
- UI Design: Created by me.
## Contact
For questions or feedback, please reach out to me at [bouabdallahdouaaaaa@gmail.com](mailto:bouabdallahdouaaaaa@gmail.com).