web-authlisted
Install: claude install-skill aiskillstore/marketplace
# Web Authentication (React)
## Core Patterns
### JWT Token Storage
**Options and trade-offs:**
| Storage | XSS Safe | CSRF Safe | Best For |
|---------|----------|-----------|----------|
| httpOnly cookie | Yes | No (needs CSRF token) | Most secure for tokens |
| localStorage | No | Yes | Simple apps, short-lived tokens |
| Memory (state) | Yes | Yes | Very short-lived tokens with refresh |
### Cookie-Based Auth (Recommended)
```typescript
// API client setup
const api = {
async login(email: string, password: string) {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include', // Important: send/receive cookies
body: JSON.stringify({ email, password }),
});
return response.json();
},
async logout() {
await fetch('/api/auth/logout', {
method: 'POST',
credentials: 'include',
});
},
async getUser() {
const response = await fetch('/api/auth/me', {
credentials: 'include',
});
if (!response.ok) throw new Error('Not authenticated');
return response.json();
},
};
```
### Auth Context Pattern
```typescript
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
interface User {
id: string;
email: string;
name: string;
}
interface AuthState {
user: User | null;
isLoading: boolean;
isAuthenticated: boolean;
login: (email: string, password: string) => Promise<void>;