Plug google/django-allauth headless authentication flows into a Vite React app: copies the React SPA example modules, wires auth context/routes, fixes provider URLs, adds proxying, and provides Playwright tests and styling references.

What This Skill Provides

Copies allauth React SPA modules into frontend/src/user_management/, renames to .jsx, and integrates auth routes with your existing router.
Configures API base URLs, CSRF handling, and social callback URLs to point at the Django backend (/_allauth/...).
Adds Vite proxy rules for /_allauth (and expects existing /api proxy) to https://localhost:8000 with self-signed certs.
Wraps the app in AuthContextProvider, adds auth-aware nav, and removes demo routes (e.g., /calculator).
Supports multi-step flows (email verification, passkeys) with pending-flow redirects.
Bundles Playwright end-to-end tests for signup/login/logout/code-login/password-reset.
Includes a styling reference listing all 35 auth components needing UI polish.

Prerequisites

React + Vite frontend already set up (see react-setup skill).
Django backend with django-allauth headless enabled and HTTPS at https://localhost:8000.
mkcert-based HTTPS for frontend (https://localhost:5173).
React Router in use; API config exporting API_BASE_URL.

Setup Summary (see SKILL.md for line-by-line edits)

Clone & copy example modules from django-allauth/examples/react-spa/frontend/src into frontend/src/user_management/ (files renamed .jsx).
Install dependency: npm --prefix ./frontend install @github/webauthn-json.
App wrapper: wrap your app in <AuthContextProvider> in frontend/src/App.jsx.
API base URL: in user_management/lib/allauth.jsx, import API_BASE_URL and prefix /_allauth/${Client.BROWSER}/v1 with it.
Routes: create frontend/src/router/AuthRouter.jsx exposing createAuthRoutes(config); merge into createAppRouter alongside your existing routes. Remove demo /calculator route.
Redirects: set LOGIN_REDIRECT_URL = '/'; update password-change/other redirects from /calculator to your desired path (default dashboard/home).
Social callback fix: set callback_url: callbackURL in redirectToProvider so backend URL is respected.
Vite proxy: add /_allauth proxy to vite.config.js targeting backend with secure:false.
Auth-aware nav: surface Login/Logout links conditioned on useAuthStatus (navbar or Home fallback).
Flow handling: add pending-flow redirects in signup/passkey/email verification and AuthChangeRedirector.
Styling reference: copy references/styling-guide.md to project root as react-allauth-styling-reference.md for later UI work.
Tests: run Playwright suite in scripts/test_auth_flows.py (requires backend + frontend running, pytest<9, playwright+chromium).

Outputs/Artifacts

Auth modules under frontend/src/user_management/ wired to your router.
Vite proxy updated for /_allauth.
Auth context wrapping App.
Optional styling reference file in project root.
Playwright E2E tests ready to validate flows.

Notes & Gotchas

Backend must expose headless endpoints at /_allauth/... and serve email links pointing to the frontend (e.g., https://localhost:5173).
Keep AUTH flows on HTTPS; proxy uses secure:false to accept mkcert certs.
Tests expect email backend to write files to sent_emails/; adjust if using SMTP.
If renaming frontend host/port, update API_BASE_URL, email links, and test selectors accordingly.