feat: add frontend authentication with React context and protected routes
Some checks failed
CI Pipeline / Lint Code (push) Has been cancelled
CI Pipeline / Test API Package (push) Has been cancelled
CI Pipeline / Test Web Package (push) Has been cancelled
CI Pipeline / Test Shared Package (push) Has been cancelled
CI Pipeline / Build All Packages (push) Has been cancelled
CI Pipeline / Generate Coverage Report (push) Has been cancelled
Docker Build & Deploy / Build Docker Images (push) Has been cancelled
Docker Build & Deploy / Push Docker Images (push) Has been cancelled
Docker Build & Deploy / Deploy to Staging (push) Has been cancelled
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
E2E Tests / End-to-End Tests (push) Has been cancelled
E2E Tests / E2E Tests (Mobile) (push) Has been cancelled
Security Scanning / NPM Audit (push) Has been cancelled
Security Scanning / Dependency License Check (push) Has been cancelled
Security Scanning / Code Quality Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled

Implement complete frontend authentication system with login, registration,
OAuth callback handling, and protected routes.

Frontend Features:
- AuthContext with React Context API for global auth state
- Auto token refresh (every 14 minutes)
- Persistent authentication with localStorage
- Protected route wrapper component
- Beautiful authentication UI with green theme

Pages:
- Login page with email/password and Google OAuth button
- Register page with password validation
- OAuth callback handler for Google sign-in
- User menu dropdown with profile and logout

Components:
- ProtectedRoute - Redirects unauthenticated users to login
- UserMenu - Dropdown with user info, navigation, and logout
- Admin role support in route protection

Services:
- auth.service.ts - Complete API integration
  - Login, register, logout
  - Token management and refresh
  - Get current user
  - Password reset (backend ready)
  - Email verification (backend ready)
  - Google OAuth redirect

State Management:
- Global auth context with useAuth hook
- User state persistence
- Loading states
- Auto token refresh mechanism
- Secure token storage

Styling:
- Auth.css - Login/register pages with gradient background
- UserMenu.css - Dropdown menu styling
- Updated App.css - Header layout for user menu

Routes Protected:
- All existing routes now require authentication
- Redirect to login with return URL
- Support for admin-only routes

Environment:
- VITE_API_URL configuration
- .env.example added

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-25 05:54:26 +00:00
parent 2d53b9e283
commit 69677901d6
13 changed files with 1617 additions and 37 deletions

View File

@@ -0,0 +1,2 @@
# API Configuration
VITE_API_URL=http://localhost:3001