diff --git a/codepress_documentation/INDEX.md b/codepress_documentation/INDEX.md new file mode 100644 index 0000000..1de3a82 --- /dev/null +++ b/codepress_documentation/INDEX.md @@ -0,0 +1,11 @@ +# CodePress Documentation Index + +## django-react-intro + +A starter template / boilerplate for a Django backend + React SPA frontend. The project demonstrates single-origin serving, token-based authentication via `rest_auth`, and Redux-connected React with React Router. + +## Features + +- [SPA + Django Integration](features/spa-django-integration/README.md) — How the React build is embedded into Django's static file serving and the catch-all URL pattern that enables client-side routing. +- [Authentication System](features/auth-system/README.md) — Token-based auth via `rest_auth` + `allauth`, the REST API endpoints, and sample UI components for login/signup/GitHub OAuth. +- [Redux + Routing Setup](features/redux-routing/README.md) — Redux store configuration, `react-router-redux` URL synchronization, and the container/component pattern. diff --git a/codepress_documentation/features/auth-system/README.md b/codepress_documentation/features/auth-system/README.md new file mode 100644 index 0000000..c85eeee --- /dev/null +++ b/codepress_documentation/features/auth-system/README.md @@ -0,0 +1,107 @@ +# Authentication System + +## Overview + +Authentication is implemented entirely via third-party Django packages (`rest_auth` + `django-allauth`). The backend exposes standard token-based REST endpoints; the frontend (shown in `samples/auth-web/`) stores the token and includes it in API headers. No custom auth logic is written — the project wires up the packages and leaves the frontend integration as a sample to be adopted. + +## Backend: REST API Endpoints + +All endpoints are mounted under `/api/auth/` via `rest_auth`. + +| URL | Method | Description | +|-----|--------|-------------| +| `/api/auth/login/` | POST | Authenticate with username/email + password; returns `{ key: "" }` | +| `/api/auth/logout/` | POST | Invalidate the current token | +| `/api/auth/user/` | GET | Return current user details | +| `/api/auth/user/` | PUT/PATCH | Update current user details | +| `/api/auth/password/change/` | POST | Change password (requires current password) | +| `/api/auth/password/reset/` | POST | Request a password reset email | +| `/api/auth/password/reset/confirm/` | POST | Confirm reset with uid + token from email | +| `/api/auth/registration/` | POST | Register a new account (email + password) | +| `/api/auth/registration/verify-email/` | POST | Confirm email address with key from email | + +## Django Configuration + +```python +# settings.py +INSTALLED_APPS = [ + ... + 'rest_framework', + 'rest_framework.authtoken', # Token storage + 'rest_auth', # REST endpoints + 'django.contrib.sites', # Required by allauth + 'allauth', + 'allauth.account', + 'rest_auth.registration', # Registration endpoint + 'user', # Stub local app (no custom logic) +] + +REST_FRAMEWORK = { + 'DEFAULT_AUTHENTICATION_CLASSES': ( + 'rest_framework.authentication.TokenAuthentication', + ), +} +``` + +> **Missing**: `SITE_ID = 1` must be added to `settings.py` — both `django.contrib.sites` and `allauth` require it. + +## User Model + +The project uses Django's built-in `User` model. The `user/` Django app (`server/user/`) is registered but contains no custom models or views — it is a scaffold for future extension. + +## Sample Frontend: `samples/auth-web/` + +These files are **not imported by the live app** — they are reference implementations. Copy them into `web/src/` and wire them to your Redux store to enable auth. + +### `Auth.js` — Auth Container + +The top-level auth page component. Connected to Redux (`state.auth`). Handles two modes via a `login` boolean prop: + +- **Login mode** (`/login`): renders `` + `` +- **Signup mode** (`/signup`): renders `` + `` + +On mount, checks for a `props.oauth` prop; if present, parses query string params and calls `authActions.githubLogin(params)` — this handles the GitHub OAuth callback redirect. + +```jsx +// Route setup needed in App.js: + } /> + } /> + } /> +``` + +### `LoginForm.js` — Login Form + +Class component. Uses React refs to read email + password input values on submit. Calls `this.props.login({ email, password })`. Displays `this.props.auth.errorMessage` if login fails. + +### `SignupForm.js` — Signup Form + +Class component with progressive disclosure: shows a "Sign up with email" button first, then reveals the form on click. Fields: email, first_name, last_name, password (min 8 characters enforced via HTML `pattern`). Calls `this.props.register(params)`. + +### `Button.js` — Reusable Button + +Pure presentational component. Hot-pink full-width button styled with Aphrodite. Spreads all props onto `