react-allauth

Integrate django-allauth headless authentication with a React and Vite frontend.

2|Updated Nov 19, 2025
One-click install
npx skills add https://github.com/otoshek/Claude-Code-Toolkit --skill react-allauth
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-allauth
Source: https://github.com/otoshek/Claude-Code-Toolkit/tree/main/skills/react-allauth
Command: npx skills add https://github.com/otoshek/Claude-Code-Toolkit --skill react-allauth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill configures a React frontend to work with django-allauth's headless API, enabling complete authentication workflows (signup, login, email verification, password reset, and social authentication) with automated testing support.

Core Features & Use Cases

  • Copies and wires React SPA auth modules, integrates auth routes with your router, and fixes provider URLs.
  • Sets up API base URLs, CSRF handling, and social callback URLs to align with the Django backend.
  • Adds Vite proxy rules for authentication endpoints, wraps the app in an AuthContextProvider, and enables auth-aware navigation.
  • Supports multi-step flows (email verification, passkeys) with pending-flow redirects and includes Playwright end-to-end tests.
  • Provides a styling reference to guide UI polish across 35 authentication components.

Quick Start

Start the frontend + backend, then run the provided Playwright tests to validate signup, verification, login, logout, code login, and password reset flows.

Frequently Asked Questions about react-allauth

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate React with django-allauth's headless API?

Integrate React with django-allauth by copying auth modules to your frontend, configuring API base URLs, setting up CSRF handling, and proxying authentication endpoints to your Django backend at https://localhost:8000. The Skill wires signup, login, email verification, password reset, and social authentication flows end-to-end.

Can I use Playwright to test django-allauth authentication flows?

Yes. This Skill includes Playwright end-to-end tests that validate signup, email verification, login, logout, code login, and password reset flows against your React + django-allauth integration, automating authentication workflow validation.

What's required to set up social authentication with React and django-allauth?

Set up social authentication by configuring provider URLs, fixing callback URLs to align with your Django backend, and wiring social provider routes into your React router. The Skill handles provider setup and multi-step flow redirects for seamless social login.

How do I handle email verification and password reset flows in a React frontend?

Handle multi-step authentication flows by integrating pending-flow redirects, wrapping your app in AuthContextProvider, and wiring email verification and password reset routes. The Skill provides complete JSX components and API wiring for these flows.

Do I need to configure CSRF protection when connecting React to django-allauth?

Yes. CSRF handling is required when connecting React to django-allauth. This Skill configures CSRF token management, backend proxying, and secure API communication to protect your authentication endpoints against cross-site attacks.

What styling guidance is available for django-allauth authentication components?

A styling reference guides UI polish across 35 authentication components, including forms for signup, login, password reset, and social callbacks, ensuring consistent design across your React + django-allauth interface.