mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 13:31:08 -05:00
151 lines
3.4 KiB
Markdown
151 lines
3.4 KiB
Markdown
# 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)
|