A full-stack authentication project demonstrating secure user login and registration using email and password, JWT, and HTTP-only cookies. It features a React + Vite frontend, and an Express + MongoDB backend, structured for clarity and deployment-ready via Render.com.
This version uses email-based authentication.
Key highlights:
- JWT-based session management
- Secure password hashing with bcrypt
- HTTP-only cookies to prevent XSS
- Protected routes and admin access
- Modular backend structure
- React frontend with feedback messages
Switch to the feature/username-login
branch for a version that uses username-based login.
- Email/password registration and login
- JWT-based authentication with
httpOnly
cookies - Protected routes for authenticated users
- Admin route access demonstration
- Password hashing using
bcrypt
- Clear error/success alerts in UI
- React frontend + Express backend separation
- React – UI library
- Vite – Build tool for lightning-fast development
- Material-UI – Component styling
- Axios – API communication
- React Router – Frontend routing
- Express – Node.js web framework
- MongoDB – Database
- Mongoose – MongoDB ODM
- bcrypt – Password hashing
- jsonwebtoken – JWT handling
- cookie-parser – Cookie middleware
- cors – Cross-origin requests
- dotenv – Environment variables
- Clone the repository:
git clone https://github.com/TVATDCI/signup-login-render.git
cd signup-login-render
2 Install dependencies:
npm install
cd client && npm install
3 Run the frontend and backend:
# From root
npm run client-dev
# In another terminal
npm start
signup-login-render/
├── .env
├── .gitignore
├── README.md
├── package.json
├── server.js
├── client/
│ ├── vite.config.js
│ ├── public/
│ └── src/
│ ├── App.jsx
│ ├── App.css
│ ├── Auth.jsx
│ ├── index.css
│ ├── main.jsx
│ └── components/
│ ├── Admin/
│ │ └── Admin.jsx
│ ├── Login/
│ │ └── Login.jsx
│ ├── Logout/
│ │ └── Logout.jsx
│ ├── NavBar/
│ │ └── NavBar.jsx
│ └── Register/
│ └── Register.jsx
├── controllers/
│ └── user.js
├── libs/
│ ├── db.js
│ └── jwt.js
├── middleware/
│ └── auth.js
├── models/
│ └── User.js
└── routes/
└── userRoute.js
Thanks for smiling ! 😆