adding-authentication

Adding Authentication

Full-stack React application demonstrating JWT-based authentication with React Router v7.

Overview

This project showcases a complete authentication flow including user registration, login, protected routes, and token management using React Router's data loading patterns.

Tech Stack

Frontend

Package	Version
React	19.2.3
React DOM	19.2.3
React Router DOM	7.12.0
React Scripts	5.0.1

Backend

Package	Version
Express	5.2.1
jsonwebtoken	9.0.3
bcryptjs	3.0.3
uuid	13.0.0

Project Setup

Backend Setup

cd backend
npm install
npm start

Backend runs at http://localhost:8080

Frontend Setup

cd frontend
npm install
npm start

Frontend runs at http://localhost:3000

Features

• User registration and login
• JWT-based authentication
• Protected routes with React Router
• Token expiration handling
• Automatic logout on token expiry
• Form validation and error handling

API Endpoints

Method	Endpoint	Description
POST	/signup	Register new user
POST	/login	Login user
GET	/events	List all events
GET	/events/:id	Get event by ID
POST	/events	Create event (auth required)
PATCH	/events/:id	Update event (auth required)
DELETE	/events/:id	Delete event (auth required)

Build

cd frontend
npm run build

Test

cd frontend
npm test