Docusaurus Authentication Skill

When to Use This Skill

• •User wants to add authentication to a Docusaurus static site
• •Need to implement FastAPI backend for authentication services
• •Want to secure API routes with JWT tokens in static site context
• •Looking for client-side authentication with server verification
• •Need to implement user data personalization in documentation sites

How This Skill Works (Step-by-Step Execution)

1. •

   Docusaurus Setup Analysis

   • •Identify static site generation requirements
   • •Determine where authentication UI should be placed
   • •Plan static vs dynamic content strategy
2. •

   FastAPI Authentication Backend

   • •Set up user registration/login endpoints
   • •Implement JWT token generation and verification
   • •Create protected API routes for personalized content
   • •Configure database for user management
3. •

   Client-Side Integration

   • •Implement login form in Docusaurus
   • •Add token storage and management
   • •Create authentication state management
   • •Add protected content rendering
4. •

   Security Implementation

   • •Configure proper CORS settings
   • •Implement token refresh mechanisms
   • •Add secure token storage
   • •Set up user data isolation

Output You Will Receive

After activation, I will deliver:

• •Complete FastAPI backend setup with authentication
• •Docusaurus client-side authentication integration
• •JWT token management implementation
• •Protected content rendering examples
• •Security best practices for static sites
• •CORS and API communication configuration

Example Usage

User says: "I have a Docusaurus site and need to add user authentication with personalized content."

This Skill Instantly Activates → Delivers:

• •FastAPI backend with user registration/login
• •JWT token generation and verification
• •Docusaurus login form implementation
• •Client-side token management
• •Protected content rendering
• •User data isolation in API responses

User says: "Secure my Docusaurus documentation with authentication."

This Skill Responds: → Creates FastAPI authentication backend → Implements JWT-based security → Adds client-side login integration → Provides personalized content delivery → Sets up user data protection

Activate This Skill By Saying

• •"Add authentication to my Docusaurus site"
• •"Implement login for my documentation site"
• •"Secure Docusaurus with JWT authentication"
• •"I need personalized content in Docusaurus"

Core Implementation Steps

1. FastAPI Backend Setup

uv add pyjwt passlib[bcrypt]

2. User Model

from sqlmodel import SQLModel, Field
from typing import Optional

class User(SQLModel, table=True):
    id: Optional[int] = Field(default=None, primary_key=True)
    email: str
    password_hash: str

3. Login Endpoint (Issue JWT)

import jwt
from datetime import datetime, timedelta
from fastapi import HTTPException

SECRET = "super-secret"  # Use environment variable
ALGO = "HS256"

@app.post("/login")
def login(email: str, password: str):
    user = get_user_by_email(email)
    if not user or not verify_password(password, user.password_hash):
        raise HTTPException(status_code=401)

    payload = {
        "sub": str(user.id),
        "exp": datetime.utcnow() + timedelta(days=7),
    }

    token = jwt.encode(payload, SECRET, algorithm=ALGO)
    return {"token": token}

4. Docusaurus Client Integration

// Login and store token
const res = await fetch("http://localhost:8000/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, password }),
});

const { token } = await res.json();
localStorage.setItem("token", token);

5. Token Verification Dependency

from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
from fastapi import Depends

security = HTTPBearer()

def get_current_user(
    creds: HTTPAuthorizationCredentials = Depends(security),
):
    try:
        payload = jwt.decode(
            creds.credentials,
            SECRET,
            algorithms=[ALGO],
        )
        return payload["sub"]  # user_id
    except jwt.PyJWTError:
        raise HTTPException(status_code=401)

6. Protect API Routes

@app.get("/me")
def me(user_id: str = Depends(get_current_user)):
    return {"user_id": user_id}

# Call from Docusaurus with token
fetch("http://localhost:8000/me", {
  headers: {
    Authorization: `Bearer ${localStorage.getItem("token")}`,
  },
});