@userbox/react 0.0.0-bootstrap.0 → 1.0.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,39 @@
+# Changelog
+
+All notable changes to `@userbox/react` are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [1.0.0-alpha.0] — 2026-05-18
+
+Initial alpha. Public surface frozen for the V1 scope.
+
+### Added
+- `UserboxProvider` — bootstraps the session, owns the proactive 12-minute
+  refresh timer, exposes session + permission state to descendants.
+- Hooks: `useSession`, `usePermissions`, `usePermission`, `useSignIn`,
+  `useSignUp`, `useSignOut`.
+- `<UserboxCallback>` — consumes `access_token` / `refresh_token` from the
+  URL fragment, validates state nonce, scrubs the URL.
+- Next.js App Router subpath `@userbox/react/nextjs`:
+  - `userboxMiddleware(config)` — Edge middleware that refreshes the access
+    token and rotates the refresh cookie.
+  - `getSession()` — Server Components helper.
+- Storage strategies: `memory` (closure-scoped) and `cookie` (httpOnly,
+  managed by tenant backend).
+- Cross-tab refresh coordination via `BroadcastChannel` with 200ms claim
+  window.
+- Single-flight refresh coalescing + permanent-fail latch + transient
+  retry policy (1s/3s/9s).
+- `UserboxError` tagged union with type guard.
+- Architectural tests enforcing: no React/Next imports from `core/`, no
+  `localStorage`/`sessionStorage` writes for credentials, no
+  `accessToken` in the React entry's `.d.ts`, `usePermission` JSDoc
+  carries the literal "UI HINTS ONLY" disclaimer.
+
+### Known limitations
+- Refresh-token rotation race on browser crash (documented).
+- External-tenant `<UserboxCallback>` depends on an auth-surface
+  prerequisite tracked separately.
+- No Vue / Svelte adapters in V1.

package/README.md

@@ -1,7 +1,150 @@
 # @userbox/react
 
-Placeholder release. Install the real package with:
+> **Alpha.** The API may change before 1.0.0. Install the alpha channel explicitly:
+>
+>     npm install @userbox/react@alpha
+>
+> Docs: https://docs.userbox.dev · Source: https://github.com/osbxtech/userbox-js/tree/main/react
 
-    npm install @userbox/react@alpha
+The official TypeScript/React frontend SDK for Userbox. Provides session
+management, permission-gated UI hooks, and a thin Next.js App Router
+integration.
 
-Source: https://github.com/osbxtech/userbox-js
+> **Frontend permission checks are UI hints only.** Every destructive action
+> MUST be authorised server-side. The SDK exposes no primitive that grants
+> authoritative access; it surfaces what the server told it the user could
+> see. Treat `usePermission` output strictly as "should I render this
+> button?" — never as "is this safe to do?".
+
+---
+
+## Install
+
+```bash
+pnpm add @userbox/react@alpha
+# Peer deps (already required by your app)
+pnpm add react react-dom
+# Optional: only if you use the Next.js integration
+pnpm add next
+```
+
+## Quick start (React)
+
+```tsx
+import { UserboxProvider, useSession, usePermission } from "@userbox/react";
+
+function App() {
+  return (
+    <UserboxProvider
+      tenantSlug="acme"
+      baseUrl="https://api.userbox.app"
+      tokenStorage="cookie"  // recommended; see decision matrix below
+      refreshUrl="/api/auth/refresh"  // your tenant backend proxy
+    >
+      <Dashboard />
+    </UserboxProvider>
+  );
+}
+
+function Dashboard() {
+  const session = useSession();
+  if (!session.isLoaded) return <p>Loading…</p>;
+  if (!session.isSignedIn) return <SignInButton />;
+  return <SignedInDashboard userId={session.user.id} />;
+}
+
+function DeleteButton({ workspaceId }: { workspaceId: string }) {
+  const { allowed, isLoaded } = usePermission(workspaceId, "items.delete");
+  if (!isLoaded) return null;          // fail-closed
+  if (!allowed) return null;            // hide — but the API still enforces
+  return <button onClick={...}>Delete</button>;
+}
+```
+
+## Storage-strategy decision matrix
+
+| Strategy | Where refresh token lives | Requires tenant backend? | Survives hard refresh? | Recommended for |
+|---|---|---|---|---|
+| `cookie` (default-ish) | httpOnly cookie set by your tenant backend | Yes — a `refreshUrl` proxy | ✅ | Full-stack apps with Next.js / Express / Django |
+| `memory` | JS closure (`MemoryStore`) | No | ❌ | Pure SPAs with no backend; demo/dogfood |
+
+**Pick `cookie` unless you literally have no server.** The memory strategy
+trades survival across reloads for zero-backend deploys.
+
+**Configuration consistency — do not mix:**
+- Under `tokenStorage: "memory"`, do NOT install `userboxMiddleware`. The
+  middleware looks for a refresh cookie, finds none, and warns.
+- Under `tokenStorage: "cookie"` in Next.js, the middleware is REQUIRED for
+  Server Components to see a signed-in session.
+
+## Quick start (Next.js App Router)
+
+```ts
+// middleware.ts
+export { userboxMiddleware as middleware } from "@userbox/react/nextjs";
+
+// app/dashboard/page.tsx — Server Component
+import { getSession } from "@userbox/react/nextjs";
+export default async function Page() {
+  const session = await getSession();
+  if (!session) return <RedirectToSignIn />;
+  return <h1>Hello {session.user.id}</h1>;
+}
+```
+
+⚠️ **`ServerSession` carries the bearer `accessToken`.** Do NOT pass the
+returned `session` as a prop to a Client Component — Next.js will serialise
+the token into the client bundle. Pass `session.user` instead.
+
+## API surface
+
+The exported TypeScript types are the authoritative reference. Quick
+reference:
+
+- `<UserboxProvider>` — mount once at the root; configures the SDK.
+- `useSession()` — discriminated union; `{ isLoaded, isSignedIn, user }`.
+- `usePermissions(workspaceId)` — `ReadonlySet<string>`, one fetch per workspace.
+- `usePermission(workspaceId, key)` — synchronous boolean derivation. **UI hints only.**
+- `useSignIn() / useSignUp()` — navigate to the hosted auth surface.
+- `useSignOut()` — clears in-memory state + calls `/v1/auth/logout`.
+- `<UserboxCallback>` — consumes credentials from the URL fragment.
+- `userboxMiddleware()` + `getSession()` from `@userbox/react/nextjs`.
+
+## Auth-surface assumptions
+
+Sign-in/sign-up navigation defaults to `https://{slug}.userbox.app/{login,signup}?return_to=<url>&state=<nonce>&flow_id=<flow>`.
+
+- Override the host with the `baseAuthUrl` provider prop for local dev (e.g.
+  `http://acme.userbox.localhost:3000`).
+- `return_to` is validated to be same-origin with the calling app **on the
+  client**. Defence-in-depth: the auth surface itself MUST also allowlist
+  return URLs server-side before redirecting. The SDK's check is a UX
+  safeguard, not the authoritative boundary.
+
+## Known limitations
+
+- **Refresh-token rotation race on crash**: if the browser
+  crashes between the refresh server having rotated the token and the SDK
+  receiving the response, the in-memory rotated token is lost. The user
+  needs to sign in again. The window is small but real.
+- **External-tenant `<UserboxCallback>`** depends on the auth surface
+  emitting credentials via URL fragment to external return URLs — a
+  prerequisite tracked separately (see plan Complexity Tracking). The
+  parser in this package is built against the future contract; same-origin
+  `*.userbox.app` flows work today.
+- **No `<UserboxGate>` declarative wrapper.** Use `usePermission` directly.
+- **No Vue / Svelte adapters in V1.** `core/` is framework-agnostic and
+  could host them later (no commitment).
+- **API slug regex parity**: the SDK rejects 1-2 char slugs
+  that the API accepts; this is the safe direction (SDK stricter) but a
+  consumer using a single-char slug will see `misconfigured` errors.
+
+## Versioning
+
+Strict semver post-GA. See `CHANGELOG.md`. The shapes documented in the
+contract are the public surface; any breaking change is a major release.
+
+## Security
+
+See [`SECURITY.md`](./SECURITY.md) for the security model, threat coverage,
+and the responsible-disclosure email.

package/SECURITY.md

@@ -0,0 +1,62 @@
+# Security policy — `@userbox/react`
+
+## Threat model summary
+
+- **Access token storage**: memory-only. The SDK never writes the access
+  token to `localStorage`, `sessionStorage`, IndexedDB, or `document.cookie`.
+  An architectural test (`tests/architectural/no-localstorage-writes.test.ts`)
+  scans the built bundle and fails the build if these writes appear.
+- **Refresh token storage** (two strategies):
+  - `cookie` (recommended): httpOnly + Secure + SameSite=Lax cookie managed
+    by the tenant backend; the SDK never reads `document.cookie`.
+  - `memory`: closure-scoped, lost on reload — by design.
+- **Server authority**: permission decisions are made by the API on every
+  request that performs an action. The SDK's `usePermission` is a UI hint;
+  a `true` value does NOT authorize a destructive action.
+- **JWT verification**: the SDK decodes JWT claims for routing/timer use
+  (`sub`, `tid`, `exp`) without signature verification — the server is the
+  sole authority on token validity.
+- **No credentials in logs**: error messages, `console.warn`, and `Error`
+  objects produced by the SDK MUST NOT contain access or refresh tokens.
+  Enforced by `tests/architectural/no-credential-logs.test.ts` against the
+  built bundle.
+
+## CSRF / replay protection on sign-in
+
+Each `signIn()` / `signUp()` call generates a cryptographic random state
+nonce, stored in `sessionStorage` under `ub.auth.state` keyed by a
+per-flow `flowId`. The callback verifies the returned `state` matches the
+stored value. Mismatch → `UserboxError { kind: "auth_failed", code: "STATE_MISMATCH" }`.
+
+Multi-flow safety: starting multiple concurrent sign-in flows is supported;
+each is keyed independently and consuming one does not affect others.
+
+## Cross-tab coordination
+
+When `BroadcastChannel` is available, refresh requests are coordinated so
+exactly one tab issues the outbound HTTP call per refresh cycle. The other tabs adopt the broadcast session.
+
+## Cookie attributes (Next.js middleware)
+
+The middleware sets the rotated refresh cookie with:
+
+- `HttpOnly` — non-negotiable.
+- `Secure` — required in production builds, optional in dev.
+- `SameSite=Lax` — default; overridable to `Strict` or `None`.
+- `Domain` — defaults to the request host; configurable for cookie-domain
+  sharing (e.g. `.acme.com`).
+- `Max-Age` — derived from the refresh-token TTL the server returned.
+
+Silent regression of these attributes is a release-blocker.
+
+## Failure-mode preservation (Next.js middleware)
+
+A 5xx or network failure from the refresh endpoint does NOT clear the
+refresh cookie. Only HTTP 400/401/403 (genuine credential rejection) clears
+the cookie. This prevents a Userbox-side outage from mass-logging-out users.
+
+## Reporting a vulnerability
+
+See the repository [security policy](../SECURITY.md). Report privately through
+GitHub private vulnerability reporting or **security@osbxtech.nl**, never in a
+public issue.

package/dist/index.d.ts

@@ -0,0 +1,161 @@
+import * as React from 'react';
+
+/**
+ * Userbox error tagged-union. Used by every layer of the SDK as the single
+ * error shape callers may inspect. Tokens (access / refresh) MUST NEVER appear
+ * in any `message` produced by these constructors — security invariant S-2.
+ */
+type MisconfiguredField = "tenantSlug" | "baseUrl" | "tokenStorage" | "refreshUrl" | "callbackUrl";
+type UserboxError = {
+    kind: "missing_credentials";
+    message: string;
+    requestId?: string;
+} | {
+    kind: "auth_failed";
+    message: string;
+    httpStatus: number;
+    code: string;
+    requestId?: string;
+} | {
+    kind: "refresh_failed";
+    message: string;
+    httpStatus: number;
+    code: string;
+    requestId?: string;
+} | {
+    kind: "permission_fetch_failed";
+    message: string;
+    httpStatus: number;
+    code: string;
+    workspaceId: string;
+    requestId?: string;
+} | {
+    kind: "network";
+    message: string;
+} | {
+    kind: "misconfigured";
+    message: string;
+    field: MisconfiguredField;
+};
+/** Type guard verifying a value is a `UserboxError`. */
+declare function isUserboxError(value: unknown): value is UserboxError;
+
+type UserboxProviderProps = {
+    tenantSlug: string;
+    baseUrl: string;
+    baseAuthUrl?: string;
+    tokenStorage: "cookie" | "memory";
+    refreshUrl?: string;
+    refreshThresholdPct?: number;
+    proactiveSkewMs?: number;
+    onSessionExpired?: () => void;
+    onError?: (err: UserboxError) => void;
+    children: React.ReactNode;
+};
+declare const UserboxProvider: React.FC<UserboxProviderProps>;
+
+type SessionUser = {
+    id: string;
+    tenantId: string;
+    email: string | null;
+    fullName: string | null;
+};
+
+type PublicSession = {
+    user: SessionUser;
+};
+type SessionResult = {
+    isLoaded: false;
+    isSignedIn: false;
+    user: null;
+} | {
+    isLoaded: true;
+    isSignedIn: false;
+    user: null;
+} | {
+    isLoaded: true;
+    isSignedIn: true;
+    user: SessionUser;
+};
+type PermissionsResult = {
+    permissions: ReadonlySet<string>;
+    isLoaded: boolean;
+    error: UserboxError | null;
+};
+type PermissionResult = {
+    allowed: boolean;
+    isLoaded: boolean;
+};
+
+/**
+ * Returns the session state as a discriminated union. Never throws.
+ *
+ * Must be called inside a `<UserboxProvider>`. Throws if used outside one
+ * (misconfigured error) — that throw is a developer-time signal, not a runtime
+ * error to handle in production code.
+ */
+declare function useSession(): SessionResult;
+
+/**
+ * Returns the current access token (or `null` when not signed in).
+ *
+ * Use this to authenticate calls from tenant frontend code to the tenant's
+ * own backend (which validates the token via the Python SDK's `require_auth`
+ * dependency or equivalent). The value comes from the in-memory session
+ * managed by `<UserboxProvider>` — same source as the `Authorization`
+ * header used internally by `useSignOut()` / refresh / `usePermissions`.
+ *
+ * Security note: the access token has the same exposure surface as any
+ * JavaScript variable in the page. If your threat model requires the token
+ * never to be reachable from user code, use a backend-cookie strategy
+ * (`tokenStorage="cookie"` + a refresh proxy) instead.
+ */
+declare function useAccessToken(): string | null;
+
+/**
+ * Returns the cached permission set for `workspaceId`. Issues at most one
+ * outbound `GET /v1/access/permissions` per workspace (cached for the
+ * lifetime of the provider).
+ *
+ * IMPORTANT — UI HINTS ONLY: the returned set is for show/hide rendering only.
+ * The server enforces permissions on every request that performs an action.
+ */
+declare function usePermissions(workspaceId: string): PermissionsResult;
+
+/**
+ * Returns whether the current user holds `permissionKey` in `workspaceId`,
+ * as a synchronous derivation from `usePermissions`.
+ *
+ * IMPORTANT — UI HINTS ONLY: this result is for show/hide rendering decisions
+ * only. The server must always enforce permissions on the request that
+ * performs the operation. A frontend `allowed: true` does NOT authorize a
+ * destructive action — that is the responsibility of the API the action
+ * targets.
+ */
+declare function usePermission(workspaceId: string, permissionKey: string): PermissionResult;
+
+type SignInOptions = {
+    returnTo?: string;
+};
+declare function useSignIn(): {
+    signIn: (opts?: SignInOptions) => void;
+};
+
+declare function useSignUp(): {
+    signUp: (opts?: SignInOptions) => void;
+};
+
+type SignOutOptions = {
+    redirectUri?: string;
+};
+declare function useSignOut(): {
+    signOut: (opts?: SignOutOptions) => Promise<void>;
+};
+
+type UserboxCallbackProps = {
+    onSuccess?: (session: PublicSession) => void;
+    onError?: (err: UserboxError) => void;
+};
+declare const UserboxCallback: React.FC<UserboxCallbackProps>;
+
+export { type PermissionResult, type PermissionsResult, type PublicSession, type SessionResult, type SessionUser, type SignInOptions, type SignOutOptions, UserboxCallback, type UserboxCallbackProps, type UserboxError, UserboxProvider, type UserboxProviderProps, isUserboxError, useAccessToken, usePermission, usePermissions, useSession, useSignIn, useSignOut, useSignUp };