Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akshitlakhera/mern-auth
This MERN authentication app ensures security with Vite, React, and Material-UI. Utilizing JWT and bcrypt for authentication, it features XSS protection for enhanced security.
https://github.com/akshitlakhera/mern-auth
Last synced: 22 days ago
JSON representation
This MERN authentication app ensures security with Vite, React, and Material-UI. Utilizing JWT and bcrypt for authentication, it features XSS protection for enhanced security.
- Host: GitHub
- URL: https://github.com/akshitlakhera/mern-auth
- Owner: AkshitLakhera
- Created: 2024-01-02T06:15:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-07T12:12:56.000Z (12 months ago)
- Last Synced: 2024-10-25T10:42:53.610Z (2 months ago)
- Language: JavaScript
- Homepage: https://mern-auth-mu-five.vercel.app
- Size: 4.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Stack Auth App
This MERN (MongoDB, Express.js, React, Node.js) stack authentication app is built with Vite for the frontend, React for UI components, Redux Toolkit for state management, and Material-UI for the user interface. The app implements authentication and authorization features using JWT (JSON Web Tokens) and bcrypt for password hashing.
## Features
- User registration and login
- Token-based authentication and authorization
- Secure storage of tokens in HTTP-only cookies
- JWT for secure communication between the frontend and backend
- bcrypt for secure password hashing
- Material-UI components for a clean and responsive user interface
## Tech Stack
- **Frontend:**
- [Vite](https://vitejs.dev/)
- [React](https://reactjs.org/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [Material-UI](https://mui.com/)
- **Backend:**
- [Node.js](https://nodejs.org/)
- [Express.js](https://expressjs.com/)
- [MongoDB](https://www.mongodb.com/)
- [bcrypt](https://www.npmjs.com/package/bcrypt)
- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)
## Getting Started
### Prerequisites
- Node.js (install from [here](https://nodejs.org/))
- MongoDB (install from [here](https://www.mongodb.com/try/download/community))
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/your-mern-auth-app.git
cd your-mern-auth-app
cd frontend
npm install
cd ../backend
npm install
2. et up MongoDB:
Create a .env file in the backend directory and add your MongoDB connection string:
env
MONGODB_URI=your_mongodb_connection_string
3.Certainly! Here's a README template that you can copy and paste for your MERN stack app:
markdown
# MERN Stack Auth App
This MERN (MongoDB, Express.js, React, Node.js) stack authentication app is built with Vite for the frontend, React for UI components, Redux Toolkit for state management, and Material-UI for the user interface. The app implements authentication and authorization features using JWT (JSON Web Tokens) and bcrypt for password hashing.
## Features
- User registration and login
- Token-based authentication and authorization
- Secure storage of tokens in HTTP-only cookies
- JWT for secure communication between the frontend and backend
- bcrypt for secure password hashing
- Material-UI components for a clean and responsive user interface
## Tech Stack
- **Frontend:**
- [Vite](https://vitejs.dev/)
- [React](https://reactjs.org/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [Material-UI](https://mui.com/)
- **Backend:**
- [Node.js](https://nodejs.org/)
- [Express.js](https://expressjs.com/)
- [MongoDB](https://www.mongodb.com/)
- [bcrypt](https://www.npmjs.com/package/bcrypt)
- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)
## Getting Started
### Prerequisites
- Node.js (install from [here](https://nodejs.org/))
- MongoDB (install from [here](https://www.mongodb.com/try/download/community))
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/your-mern-auth-app.git
cd your-mern-auth-app
Install dependencies for both frontend and backend:
bash
2. cd frontend
npm install
cd ../backend
npm install
3. Set up MongoDB:
Create a .env file in the backend directory and add your MongoDB connection string:
env
MONGODB_URI=your_mongodb_connection_string
Start the frontend and backend:
bash
# In the frontend directory
cd frontend
npm run dev
# In the backend directory
cd backend
npm start
4. Access the app:
Open your browser and navigate to http://localhost:3000.