Fixes authentication environment variable loading by properly configuring Vite's envDir to read from the project root instead of the archon-ui-main directory.
Changes:
- Configure vite.config.ts with envDir pointing to parent directory
- Add explicit VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to .env
- Create vite-env.d.ts for TypeScript environment variable types
- Add debug logging to supabaseClient.ts for troubleshooting
- Update .env.example with proper Vite variable configuration
- Update AUTHENTICATION_SETUP.md with corrected setup instructions
Technical details:
- Vite's loadEnv() only loads vars for config use, not client injection
- envDir config is required to tell Vite where to find .env for client code
- Variables must be explicitly defined (Vite doesn't expand ${VAR} syntax)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements complete authentication system using Supabase Auth SDK following Archon's vertical slice architecture.
Frontend Changes:
- Install @supabase/supabase-js dependency
- Create auth feature in vertical slice pattern:
* AuthContext and Provider for global auth state
* authService with Supabase Auth methods (signIn, signUp, signOut, etc.)
* Auth query hooks with TanStack Query integration
* TypeScript types for User, Session, AuthState
* ProtectedRoute component for route guards
- Add LoginPage and SignUpPage with Tron-themed design
- Update App.tsx with AuthProvider and protected routes
- Configure Supabase client with environment variables
Backend Changes:
- Create auth_service.py for JWT token validation
- Create auth_middleware.py for protecting API routes (optional, commented by default)
- Create auth_api.py with endpoints:
* POST /api/auth/verify - Verify JWT token
* GET /api/auth/user - Get current user
* GET /api/auth/health - Auth service health check
- Register auth router in main.py
- Add middleware configuration (disabled by default)
Configuration:
- Update .env.example with VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY
- Add comprehensive AUTHENTICATION_SETUP.md documentation
Features:
- Email/password authentication
- Persistent sessions with localStorage
- Auto token refresh
- Route protection with loading states
- Integration with existing TanStack Query patterns
- Optional backend middleware for API protection
- Row Level Security (RLS) ready
Architecture follows CLAUDE.md guidelines:
- Vertical slice architecture for auth feature
- TanStack Query for state management
- No backwards compatibility needed (beta)
- KISS principle
- Fail fast with detailed errors
Notes:
- Auth middleware is commented out by default to avoid breaking existing installations
- Users can enable it when ready by uncommenting in main.py
- Frontend auth works independently of backend middleware
- Comprehensive setup guide included in AUTHENTICATION_SETUP.md
