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>
