Signup-Login-Render

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.

---

Current Login Method: Email & Password

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

---

Prefer Username Login?

Switch to the feature/username-login branch for a version that uses username-based login.

---

Table of Contents

• Signup-Login-Render
  • Current Login Method: Email & Password
  • Prefer Username Login?
  • Table of Contents
  • Features
  • Technologies Used
    • Frontend
    • Backend
    • Installation
    • Project Structure

---

Features

• 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

---

Technologies Used

Frontend

• React – UI library
• Vite – Build tool for lightning-fast development
• Material-UI – Component styling
• Axios – API communication
• React Router – Frontend routing

Backend

• 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

---

Installation

1. 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

Project Structure

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 ! 😆