thrillwiki_django_no_react/shared/docs/2024-02-14/auth_setup.md

Authentication System Setup

Overview

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

Backend Changes

1. Package Installation

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

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:

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:

python manage.py makemigrations
python manage.py migrate

Frontend Setup

1. Create REMOVED file:

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:

cd frontend
npm install

Testing Instructions

Backend Testing

1. Start Django development server:

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:

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)