FinnTrack/README-AUTH.md

FinnTrack Authentication System

This project includes a full authentication system with both frontend and backend components.

Backend Setup

The backend server is built with Express.js and includes:

• User registration with password hashing
• User login with JWT token generation
• Protected routes with JWT authentication
• In-memory user storage (for development)

Backend Features:

• POST /api/register - Register new user
• POST /api/login - Login user and get JWT token
• GET /api/profile - Get user profile (protected route)
• GET /api/users - Get all users (for testing)

Security Features:

• Password hashing with bcryptjs
• JWT token authentication
• Input validation
• CORS enabled

Frontend Features:

• Beautiful Material UI login/registration interface
• Full-screen gradient background
• Form validation
• Loading states
• Error handling
• Token storage in localStorage

How to Run

Option 1: Run Frontend and Backend Separately

1. Start the backend server:

   npm run server
   

   Backend will run on http://localhost:3001

2. Start the frontend development server:

   npm run dev
   

   Frontend will run on http://localhost:5174

Option 2: Run Both Simultaneously

npm run dev:full

This will start both the backend server and frontend development server concurrently.

Testing the Authentication

Registration:

1. Go to the "Register" tab
2. Fill in First Name, Last Name, Username, and Password
3. Click "Register"
4. Success message will appear and switch to login tab

Login:

1. Go to the "Login" tab
2. Enter your username and password
3. Click "Login"
4. Success message will appear and user data will be stored in localStorage

API Response Format

Success Response:

{
  "success": true,
  "message": "Login successful",
  "token": "jwt-token-here",
  "user": {
    "id": "user-id",
    "firstName": "John",
    "lastName": "Doe",
    "username": "johndoe"
  }
}

Error Response:

{
  "success": false,
  "message": "Error message here"
}

Storage

• JWT Token: Stored in localStorage as 'token'
• User Data: Stored in localStorage as 'user'
• Users: In-memory array (resets on server restart)

Next Steps for Production

1. Replace in-memory storage with a database (MongoDB, PostgreSQL, etc.)
2. Add environment variables for JWT secret and database connection
3. Add email verification for registration
4. Add password reset functionality
5. Add rate limiting for API endpoints
6. Add more comprehensive input validation
7. Add logging and monitoring

Development Notes

• The backend runs on port 3001
• The frontend runs on port 5174 (or next available)
• CORS is enabled to allow frontend-backend communication
• JWT tokens expire after 24 hours
• Passwords are hashed with bcryptjs (salt rounds: 10)