JWT Authentication App

A full-stack application with JWT authentication using React + Tailwind CSS for the frontend and Express + PostgreSQL for the backend.

Features

• User registration and login
• JWT token-based authentication with UUID user IDs
• Protected routes
• Password hashing with bcrypt
• Modern UI with Tailwind CSS
• React Context API for state management
• PostgreSQL with UUID primary keys

Tech Stack

Frontend

• React 18
• Vite
• Tailwind CSS
• React Router DOM
• Axios

Backend

• Node.js
• Express
• PostgreSQL
• JWT (jsonwebtoken)
• bcrypt
• dotenv

Prerequisites

• Node.js (v18 or higher)
• PostgreSQL (v12 or higher)
• npm or yarn

Setup Instructions

1. Database Setup

First, make sure PostgreSQL is running and create a database:

# Login to PostgreSQL
psql -U postgres

# Create database
CREATE DATABASE supertictactoe;

# Exit
\q

2. Backend Setup

# Navigate to server directory
cd server

# Install dependencies
npm install

# The .env file is already configured with:
# - POSTGRES_URL=postgresql://harsh:password@localhost:5432/supertictactoe
# - JWT_SECRET (change this in production!)
# - PORT=5000

# Start the server
npm run dev

The server will run on http://localhost:5000 and automatically create the users table.

3. Frontend Setup

Open a new terminal:

# Navigate to client directory
cd client

# Install dependencies
npm install

# Start the development server
npm run dev

The frontend will run on http://localhost:3000

API Endpoints

Authentication Routes

• POST /api/auth/register - Register a new user

  {
    "username": "johndoe",
    "email": "john@example.com",
    "password": "password123"
  }

• POST /api/auth/login - Login user

  {
    "email": "john@example.com",
    "password": "password123"
  }

• GET /api/auth/me - Get current user (Protected)

  • Requires: Authorization: Bearer <token> header

• GET /api/health - Health check endpoint

Project Structure

.
├── client/                  # React frontend
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── context/        # React Context (Auth)
│   │   ├── pages/          # Page components
│   │   ├── App.jsx         # Main app component
│   │   ├── main.jsx        # Entry point
│   │   └── index.css       # Tailwind imports
│   ├── package.json
│   ├── vite.config.js
│   └── tailwind.config.js
│
└── server/                  # Express backend
    ├── middleware/         # Auth middleware
    ├── routes/             # API routes
    ├── database.js         # PostgreSQL connection
    ├── server.js           # Express app
    ├── .env                # Environment variables
    └── package.json

Usage

1. Start both the backend and frontend servers
2. Open http://localhost:3000 in your browser
3. Register a new account
4. Login with your credentials
5. Access the protected dashboard

Security Notes

• Important: Change the JWT_SECRET in .env before deploying to production
• Passwords are hashed using bcrypt with 10 salt rounds
• JWT tokens expire after 7 days
• All passwords must be at least 6 characters
• Email validation is enforced
• User IDs use UUID v4 for better security and uniqueness (non-sequential, harder to guess)

Development

Backend Development

cd server
npm run dev  # Uses nodemon for hot reloading

Frontend Development

cd client
npm run dev  # Vite provides hot module replacement

Build for Production

Frontend:

cd client
npm run build
npm run preview  # Preview production build

Environment Variables

Server (.env)

POSTGRES_URL=postgresql://username:password@localhost:5432/database_name
JWT_SECRET=your-secret-key
PORT=5000
NODE_ENV=development

License

MIT