117 lines
2.8 KiB
Markdown
117 lines
2.8 KiB
Markdown
# 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:**
|
|
```bash
|
|
npm run server
|
|
```
|
|
Backend will run on http://localhost:3001
|
|
|
|
2. **Start the frontend development server:**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
Frontend will run on http://localhost:5174
|
|
|
|
### Option 2: Run Both Simultaneously
|
|
|
|
```bash
|
|
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:
|
|
```json
|
|
{
|
|
"success": true,
|
|
"message": "Login successful",
|
|
"token": "jwt-token-here",
|
|
"user": {
|
|
"id": "user-id",
|
|
"firstName": "John",
|
|
"lastName": "Doe",
|
|
"username": "johndoe"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Error Response:
|
|
```json
|
|
{
|
|
"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)
|