# Implement React Web Authentication

React teams need secure authentication flows that handle sessions, redirects, OAuth, and token refresh correctly. This skill gives Claude, Codex, and Claude Code practical patterns for building those flows in web apps.

## Install

```bash
npx skillstore add cjharmath/web-auth
```

## Metadata

- Status: approved
- Slug: cjharmath-web-auth
- Skillstore revision: r1
- Version status: missing
- Tree hash: 7ca1bd473c2111a68e1c80a7e70d700d81e3d2f6c6ee2f7e70515a5e9f68369e
- Author: CJHarmath
- GitHub username: CJHarmath
- License: MIT
- Repository: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/web-auth
- Ref: 02f077c174c5335e2f5d02ca15e77b70d9543e58
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, env\_access
- Quality score: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/cjharmath-web-auth
- Manifest: https://skillstore.pages.dev/api/skills/cjharmath-web-auth/manifest

## Capabilities

- Compares token storage options, including httpOnly cookies, localStorage, and memory state.
- Shows a cookie-based API client pattern for login, logout, and current user checks.
- Provides a React auth context with loading state, login, logout, refresh, and guard helpers.
- Covers Google OAuth and NextAuth.js provider configuration examples.
- Demonstrates protected routes for React Router and Next.js App Router.
- Includes examples for token refresh, login form validation, CSRF headers, and FastAPI endpoints.

## Use Cases

- Add Login To A React App: Create a login flow with cookie-backed sessions, current user loading, and logout behavior.
- Configure OAuth In Next.js: Set up Google OAuth or NextAuth.js with provider callbacks and session access in components.
- Harden Authentication UX: Add protected routes, token refresh, form validation, CSRF headers, and security response headers.

## Prompt Templates

### Create Basic Auth Context

```
Use the web-auth skill to create a React auth context for login, logout, current user loading, and protected route checks.
```

### Build Cookie Session Flow

```
Use the web-auth skill to design a cookie-based login, logout, and refresh flow for my React app and API.
```

### Add OAuth To Next.js

```
Use the web-auth skill to add Google OAuth to a Next.js app with NextAuth.js, callbacks, and protected dashboard pages.
```

### Review Auth Security

```
Use the web-auth skill to review my React authentication flow for token storage, CSRF handling, route protection, and refresh behavior.
```

## Limitations

- The examples are templates and require adaptation to each backend and identity provider.
- The skill does not verify production cookie, CORS, or TLS settings automatically.
- It does not provide a complete password storage or user database implementation.
- OAuth provider setup still requires external console configuration and secret management.

## Best Practices

- Prefer httpOnly secure cookies for long-lived session tokens when the backend supports them.
- Pair cookie authentication with CSRF protection and explicit credential handling in requests.
- Protect routes on both the client and server when the framework supports server checks.

## Anti Patterns

- Do not store long-lived access tokens in localStorage without accepting the XSS exposure.
- Do not trust a client route guard as the only authorization control.
- Do not expose OAuth client secrets in browser code or public environment variables.

## Security Audit

- Audited at: 2026-07-05T06:22:00.402\+00:00
- Summary: All static findings were reviewed against SKILL.md. The command alerts are Markdown code fences, and the network, environment, sensitive, and reconnaissance alerts are non-executed authentication examples. No prompt injection, malicious intent, or credential exfiltration evidence was found.

## Stats

- Views: 257
- Downloads: 9
- Favorites: 0
- Popularity score: 0