Skip to content

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 and deployed on render.com.

Notifications You must be signed in to change notification settings

TVATDCI/signup-login-render

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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


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

About

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 and deployed on render.com.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published