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

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)

AuthError — codes: AUTH_UNAUTHENTICATED, AUTH_TOKEN_EXPIRED, AUTH_REFRESH_FAILED, AUTH_CONTEXT_MISSING.
Token refresh via @suaveplan/oauth-client with automatic retry on 401.
OTel spans — auth.sign_in, auth.sign_out, auth.token_refresh.
Session persistence — optional sessionStorage / localStorage adapter.
Stories — authenticated state, unauthenticated, loading, AuthGuard redirect.
Playwright E2E — sign-in flow, token refresh, protected route redirect.

File layout

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

2.8 KiB Raw Blame History