89 lines
2.8 KiB
Markdown
89 lines
2.8 KiB
Markdown
# OpenSpec Change: enterprise-react-auth
|
|
|
|
- **Change ID**: enterprise-react-auth
|
|
- **Package**: `@suaveplan/react-auth`
|
|
- **Category**: react
|
|
- **Target path**: `react/auth/react-auth`
|
|
- **Status**: PROPOSED
|
|
- **Date**: 2026-04-24
|
|
- **Reference spec**: `/mnt/s/web/suaveplan/enterprise/react-auth.md`
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
Deliver `@suaveplan/react-auth` on genesis from scratch at enterprise quality. The core React authentication layer: `AuthProvider`, `useAuth`, `useUser`, `useIsAuthenticated`, token management, session persistence, and integration with `@suaveplan/oauth-client` for Authorization Code + PKCE flows. Ships structured errors via `@suaveplan/error`, OTel span events for sign-in/sign-out/refresh, Storybook stories, and Playwright E2E for the full auth lifecycle.
|
|
|
|
---
|
|
|
|
## Current-state audit (genesis)
|
|
|
|
Package does not exist on genesis — fresh build.
|
|
|
|
---
|
|
|
|
## Available workspace deps on genesis
|
|
|
|
| Package | Role |
|
|
|---|---|
|
|
| `@suaveplan/error` (`workspace:^`) | `AuthError` |
|
|
| `@suaveplan/types` (`workspace:^`) | `LoggerLike` |
|
|
| `@suaveplan/events` (`workspace:^`) | Auth state change events |
|
|
| `@suaveplan/oauth-client` (`workspace:^`) | PKCE + token refresh |
|
|
| `@suaveplan/react-translate` (`workspace:^`) | i18n |
|
|
| `zod` (`catalog:forms`) | Auth config schemas |
|
|
| `@opentelemetry/api` (`catalog:observability`) | Auth lifecycle spans |
|
|
|
|
External: `tslib catalog:build`. React 18 peer.
|
|
|
|
---
|
|
|
|
## Public API surface
|
|
|
|
```ts
|
|
AuthProvider, AuthContext
|
|
useAuth, useUser, useIsAuthenticated, useAuthToken
|
|
AuthGuard — wraps children, redirects to login if unauthenticated
|
|
withAuth(Component) — HOC variant of AuthGuard
|
|
|
|
// Types
|
|
AuthConfig, AuthUser, AuthState, AuthContextValue,
|
|
AuthProviderProps, AuthGuardProps, SignInOptions, SignOutOptions
|
|
```
|
|
|
|
---
|
|
|
|
## New additions for genesis (full build)
|
|
|
|
1. **`AuthError`** — codes: `AUTH_UNAUTHENTICATED`, `AUTH_TOKEN_EXPIRED`, `AUTH_REFRESH_FAILED`, `AUTH_CONTEXT_MISSING`.
|
|
2. **Token refresh** via `@suaveplan/oauth-client` with automatic retry on 401.
|
|
3. **OTel spans** — `auth.sign_in`, `auth.sign_out`, `auth.token_refresh`.
|
|
4. **Session persistence** — optional `sessionStorage` / `localStorage` adapter.
|
|
5. **Stories** — authenticated state, unauthenticated, loading, `AuthGuard` redirect.
|
|
6. **Playwright E2E** — sign-in flow, token refresh, protected route redirect.
|
|
|
|
---
|
|
|
|
## File layout
|
|
|
|
```text
|
|
react/auth/react-auth/
|
|
package.json
|
|
tsconfig.json
|
|
vitest.config.ts
|
|
src/
|
|
index.ts
|
|
context/
|
|
auth-context/ (tsx + types + md + test + index)
|
|
hooks/
|
|
use-auth/ use-user/ use-is-authenticated/ use-auth-token/
|
|
components/
|
|
auth-guard/ (tsx + types + md + test + stories + index)
|
|
utils/
|
|
token-storage/ session-persistence/
|
|
types/
|
|
auth.types.ts
|
|
e2e/
|
|
auth.spec.ts
|
|
```
|