# Authentication System Setup

## Overview
This document outlines the setup of the authentication system, including both social and regular authentication.

## Backend Changes

### 1. Package Installation
```bash
pip install django-allauth==0.65.1 dj-rest-auth==6.0.0 djangorestframework==3.15.2 django-cors-headers==4.5.0
```

### 2. Configuration Files Modified
- thrillwiki/settings.py
  - Added authentication apps
  - Configured REST Framework
  - Added CORS settings
  - Added social auth providers
  - Updated redirect URLs

- thrillwiki/urls.py
  - Added dj-rest-auth URLs
  - Added social auth URLs

### 3. New Files Created
- accounts/adapters.py
  - Custom social account adapter
  - Handles missing emails
  - Sets profile pictures from social providers

### 4. Modified Files
- accounts/views.py
  - Added email collection endpoint
  - Updated authentication views
- accounts/urls.py
  - Added new authentication endpoints

## Frontend Changes

### 1. Package Installation
```bash
npm install react-router-dom@6 axios@latest @react-oauth/google@latest
```

### 2. New Components Created
- src/contexts/AuthContext.tsx
- src/contexts/AuthProvider.tsx
- src/pages/Login.tsx
- src/pages/DiscordRedirect.tsx
- src/pages/EmailRequired.tsx

### 3. New Assets
- public/google-icon.svg
- public/discord-icon.svg

### 4. Modified Files
- src/App.tsx
  - Added Google OAuth provider
  - Added new routes
- src/api/client.ts
  - Added authentication endpoints
  - Added token handling

## Development Environment Setup

### Backend Setup
1. Create ***REMOVED*** file:
```env
DJANGO_SECRET_KEY=your_secret_key
DEBUG=True
ALLOWED_HOSTS=localhost,127.0.0.1
CORS_ALLOWED_ORIGINS=http://localhost:5173

# OAuth Credentials
GOOGLE_OAUTH2_CLIENT_ID=your_google_client_id
GOOGLE_OAUTH2_CLIENT_SECRET=your_google_client_secret
DISCORD_CLIENT_ID=your_discord_client_id
DISCORD_CLIENT_SECRET=your_discord_client_secret

# Database
DB_NAME=thrillwiki
DB_USER=postgres
DB_PASSWORD=postgres
DB_HOST=localhost
DB_PORT=5432
```

2. Run migrations:
```bash
python manage.py makemigrations
python manage.py migrate
```

### Frontend Setup
1. Create ***REMOVED*** file:
```env
VITE_API_URL=http://localhost:8000
VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_DISCORD_CLIENT_ID=your_discord_client_id
```

2. Install dependencies:
```bash
cd frontend
npm install
```

## Testing Instructions

### Backend Testing
1. Start Django development server:
```bash
python manage.py runserver
```

2. Test endpoints:
- Regular auth: http://localhost:8000/api/auth/login/
- Social auth: http://localhost:8000/api/auth/google/login/
- User info: http://localhost:8000/api/auth/user/

### Frontend Testing
1. Start Vite development server:
```bash
cd frontend
npm run dev
```

2. Test flows:
- Regular login: http://localhost:5173/login
- Google login: Click "Continue with Google"
- Discord login: Click "Continue with Discord"
- Protected route: http://localhost:5173/settings

## Testing Checklist
- [ ] Regular login/registration
- [ ] Google OAuth flow
- [ ] Discord OAuth flow
- [ ] Email collection for social auth
- [ ] Profile picture import
- [ ] Protected route access
- [ ] Token persistence
- [ ] Error handling
- [ ] Logout functionality

## Notes
- Ensure all OAuth credentials are properly set up in Google Cloud Console and Discord Developer Portal
- Test all flows in incognito mode to avoid cached credentials
- Verify CSRF protection is working
- Check token expiration handling
- Test error scenarios (network issues, invalid credentials)