Initial Commit
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
# 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
|
||||
```
|
||||
@@ -0,0 +1,79 @@
|
||||
# Tasks: enterprise-react-auth
|
||||
|
||||
**Change ID**: enterprise-react-auth
|
||||
**Package**: `@suaveplan/react-auth`
|
||||
**Target path**: `react/auth/react-auth`
|
||||
**Prerequisite packages on Verdaccio**: `@suaveplan/error`, `@suaveplan/types`, `@suaveplan/events`, `@suaveplan/oauth-client`, `@suaveplan/react-translate`
|
||||
|
||||
---
|
||||
|
||||
## 1. Scaffold
|
||||
|
||||
- [ ] Create directory tree per proposal layout.
|
||||
- [ ] Write `package.json` at `0.1.0` with `"sideEffects": false`, exports map.
|
||||
- [ ] Dependencies: `@suaveplan/error workspace:^`, `@suaveplan/types workspace:^`, `@suaveplan/events workspace:^`, `@suaveplan/oauth-client workspace:^`, `@suaveplan/react-translate workspace:^`, `zod catalog:forms`, `@opentelemetry/api catalog:observability`, `tslib catalog:build`.
|
||||
- [ ] Write `tsconfig.json`, `vitest.config.ts`, scripts.
|
||||
|
||||
---
|
||||
|
||||
## 2. Error codes and types
|
||||
|
||||
- [ ] Define `AuthError` extending `SuaveplanError`; codes: `AUTH_UNAUTHENTICATED`, `AUTH_TOKEN_EXPIRED`, `AUTH_REFRESH_FAILED`, `AUTH_CONTEXT_MISSING`.
|
||||
- [ ] Define `AuthUser`, `AuthState`, `AuthConfig`, `AuthContextValue`, `AuthProviderProps`, `AuthGuardProps`, `SignInOptions`, `SignOutOptions`.
|
||||
- [ ] Write `AuthConfigSchema` Zod schema.
|
||||
|
||||
---
|
||||
|
||||
## 3. Token utilities
|
||||
|
||||
- [ ] `src/utils/token-storage/` — `createTokenStorage(adapter: 'memory' | 'localStorage' | 'sessionStorage')`: `setTokens(tokens)`, `getTokens()`, `clearTokens()`.
|
||||
- [ ] `src/utils/session-persistence/` — `saveSession(user)`, `loadSession(): AuthUser | null`, `clearSession()`.
|
||||
- [ ] Write tests + md for each.
|
||||
|
||||
---
|
||||
|
||||
## 4. AuthContext + AuthProvider
|
||||
|
||||
- [ ] State: `user: AuthUser | null`, `isLoading`, `isAuthenticated`.
|
||||
- [ ] `signIn(options: SignInOptions)` — calls `@suaveplan/oauth-client` authorization + token exchange; stores tokens; emits `@suaveplan/events` `auth:signed_in`. OTel `auth.sign_in` span.
|
||||
- [ ] `signOut(options?)` — clears tokens + session; emits `auth:signed_out`. OTel `auth.sign_out` span.
|
||||
- [ ] `refreshToken()` — calls `@suaveplan/oauth-client` token refresh; on failure throws `AuthError(AUTH_REFRESH_FAILED)`. OTel `auth.token_refresh` span.
|
||||
- [ ] Auto-refresh: installs a timer to refresh before expiry.
|
||||
- [ ] `useAuth()` throws `AuthError(AUTH_CONTEXT_MISSING)` outside provider.
|
||||
- [ ] Write `auth-context.test.tsx` (≤500 lines): sign-in, sign-out, refresh, auto-refresh timer, context missing. `{ timeout: 10000 }`.
|
||||
- [ ] Write `auth-context.md`.
|
||||
|
||||
---
|
||||
|
||||
## 5. Hooks
|
||||
|
||||
- [ ] `useUser(): AuthUser | null` — from context.
|
||||
- [ ] `useIsAuthenticated(): boolean`.
|
||||
- [ ] `useAuthToken(): string | null` — current access token.
|
||||
- [ ] Write tests + md for each.
|
||||
|
||||
---
|
||||
|
||||
## 6. AuthGuard + withAuth
|
||||
|
||||
- [ ] `AuthGuard` — renders children when authenticated; calls `onUnauthenticated` (default: throws `AuthError(AUTH_UNAUTHENTICATED)`) when not.
|
||||
- [ ] `withAuth(Component)` — HOC wrapping `AuthGuard`.
|
||||
- [ ] Write tests, stories (authenticated, unauthenticated-redirect, loading), md.
|
||||
|
||||
---
|
||||
|
||||
## 7. E2E
|
||||
|
||||
- [ ] `e2e/auth.spec.ts` — Playwright with injected mock `@suaveplan/oauth-client`:
|
||||
- Render `AuthGuard` while unauthenticated → `onUnauthenticated` fires.
|
||||
- Call `signIn()` → user set in context → `AuthGuard` renders children.
|
||||
- Call `signOut()` → user cleared.
|
||||
|
||||
---
|
||||
|
||||
## 8. Verify and publish
|
||||
|
||||
- [ ] `bunx turbo lint typecheck test --filter=@suaveplan/react-auth` — green.
|
||||
- [ ] `bunx turbo test:coverage --filter=@suaveplan/react-auth` — 100%.
|
||||
- [ ] `bun scripts/publish.ts --package @suaveplan/react-auth`.
|
||||
- [ ] Archive change folder.
|
||||
Reference in New Issue
Block a user