# Capability Spec: react-auth-whitelabel **Package**: `@suaveplan/react-auth-whitelabel` **Status**: ACTIVE > Every requirement carries a `**Verified by:**` line. ## Requirements ### Requirement: AuthProvider exposes auth verbs over an injectable transport The package SHALL ship an `AuthProvider` React context provider that exposes `login`, `loginWithProvider`, `register`, `logout`, `requestPasswordReset`, and `resetPassword` verbs. Each verb invokes the configured backend through `config.fetch` (a `FetchLike`, defaulting to `globalThis.fetch`) and routes redirect side-effects through `config.navigate` (defaulting to a `window.location.href` writer). The context value also exposes `user`, `isLoading`, `isAuthenticated`, and `error`. #### Scenario: login posts to authUrl and stores the returned user - **WHEN** `useAuth().login("a@b.c", "pw")` is called with `fetch` returning `{ ok: true, json: { user } }` - **THEN** the request body is `{"email":"a@b.c","password":"pw"}`, the request URL ends with `/login`, and `user` becomes the context's `user` #### Scenario: loginWithProvider routes through the navigate seam - **WHEN** `useAuth().loginWithProvider("google")` is called - **THEN** `config.navigate(url)` is invoked exactly once with a URL that includes `/oauth/google?redirect=` #### Scenario: useAuth outside provider throws PROVIDER_OUTSIDE_TREE - **WHEN** `useAuth()` is called with no `` ancestor - **THEN** a `ReactAuthWhitelabelError` with `.code === "REACT_AUTH_WL.PROVIDER_OUTSIDE_TREE"` is thrown **Verified by:** `src/context/auth-context.test.tsx::"login() posts credentials to {authUrl}/login and sets user"` AND `src/context/auth-context.test.tsx::"loginWithProvider routes through the navigate seam"` AND `src/context/auth-context.test.tsx::"useAuth outside provider throws REACT_AUTH_WL.PROVIDER_OUTSIDE_TREE"` --- ### Requirement: BrandingProvider writes tenant branding through the react-ui theme mutator The package SHALL ship a `BrandingProvider` that, on every change of the resolved `TenantBranding`, calls `useThemeMutator().setExtensionTokens({...})` with keys `--brand-primary`, `--brand-secondary`, `--brand-accent`, and `--brand-font`. Direct `document.documentElement.style.setProperty("--brand-*", ...)` writes from package code are forbidden. Non-token branding surfaces (document title, favicon ``, and tenant custom CSS `