Relocate the ~6k-file docs tree from the repo root into plugins/document-navigator/docs/ so the plugin is self-contained and portable. docs/superpowers/ (specs and plans) stays at the repo root. Moved via cp+rm rather than git mv because directory rename() fails with EPERM on this WSL /mnt DrvFs mount; git rename-detection pairs the identical-content files at commit time. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@suaveplan/react-auth-whitelabel - White-label authentication React components with tenant branding wired through @suaveplan/react-ui runtime theme mutator
White-label authentication React components with tenant branding wired
through the @suaveplan/react-ui runtime theme-token mutator.
Documentation tree
- login-form —
<LoginForm>is the white-label login surface consumed by every tenant in the stack. It renders a controlled e…- login-form —
<LoginForm>is the white-label login surface consumed by every tenant in the stack. It renders a controlled e…
- login-form —
- password-reset-form —
<PasswordResetForm>is the white-label password-reset surface. It owns a single state machine across two modes — `req…- password-reset-confirm —
PasswordResetConfirmis the confirm-mode body of<PasswordResetForm>— the screen the user lands on from the email… - password-reset-form —
<PasswordResetForm>is the white-label password-reset surface. It owns a single state machine across two modes — `req… - password-reset-request —
PasswordResetRequestis the request-mode body of<PasswordResetForm>— the screen the user lands on when they click… - password-reset-success —
PasswordResetSuccessis the success state of<PasswordResetForm>, shared between the request and confirm modes. It…
- password-reset-confirm —
- register-form —
<RegisterForm>is the white-label self-registration surface. It renders the header (logo + title + subtitle), the inl…- register-form-fields —
RegisterFormFieldsis the inner field block of<RegisterForm>— name (optional, optionally required), email, passwo… - register-form-terms —
RegisterFormTermsis the terms-acceptance checkbox block of<RegisterForm>. It renders the acceptance checkbox, the… - register-form —
<RegisterForm>is the white-label self-registration surface. It renders the header (logo + title + subtitle), the inl…
- register-form-fields —
- auth-context —
auth-context.tsxships the<AuthProvider>React context provider together with the three hooksuseAuth,useUser… - auth-http —
auth-http.tshouses the three helpers everyAuthProviderverb shares:resolveFetch,resolveNavigate, and `postJ… - branding-context —
branding-context.tsxships the<BrandingProvider>React context provider together with the hooksuseBranding, `us… - error-codes —
error-codes.tsregisters the canonical, stable error-code registry used by every error thrown from `@suaveplan/react-… - react-auth-whitelabel-error —
ReactAuthWhitelabelErroris the canonical error class for every error thrown by@suaveplan/react-auth-whitelabel. I… - types —
TenantBrandingSchemais the Zod schema that validates everyTenantBrandingpayload entering the package from an unt…- branding.schema —
TenantBrandingSchemais the Zod schema that validates everyTenantBrandingpayload entering the package from an unt…
- branding.schema —
- utils —
navigateOrCall(target)is the canonical helper used by every form component in this package to act on a "URL or click…- navigate-or-call —
navigateOrCall(target)is the canonical helper used by every form component in this package to act on a "URL or click…
- navigate-or-call —
What ships
- Forms —
LoginForm,RegisterForm,PasswordResetForm - Contexts —
AuthProvider,BrandingProvider - Hooks —
useAuth,useBranding,useIsAuthenticated,useLogo,useTenantBranding,useUser - Types —
AuthConfig,AuthContextValue,AuthUser,BrandingContextValue,BrandingProviderProps,RegisterData,TenantBranding,TenantBrandingSchema - Errors —
REACT_AUTH_WL_CODES+ReactAuthWhitelabelError
Quick start
BrandingProvider calls useThemeMutator() from
@suaveplan/react-ui/theme. That hook MUST be invoked inside a
<ThemeProvider>. Wrap your subtree like this:
import { ThemeProvider, lightTheme } from "@suaveplan/react-ui/theme";
import {
AuthProvider,
BrandingProvider,
LoginForm,
} from "@suaveplan/react-auth-whitelabel";
<ThemeProvider themes={[lightTheme]} defaultTheme="light">
<BrandingProvider
brandingEndpoint="/api/branding"
tenantId={tenantSlug}
>
<AuthProvider config={{ authUrl: "/api/auth" }}>
<LoginForm
onForgotPassword={() => router.push("/forgot")}
onRegister={() => router.push("/register")}
/>
</AuthProvider>
</BrandingProvider>
</ThemeProvider>;
On every branding change, BrandingProvider writes --brand-primary,
--brand-secondary, --brand-accent, and --brand-font to
document.documentElement.style via
useThemeMutator().setExtensionTokens(...). Cleanup is automatic on
unmount.
Modules
src/components/login-form/login-form.mdsrc/components/register-form/register-form.mdsrc/components/register-form/register-form-fields.mdsrc/components/register-form/register-form-terms.mdsrc/components/password-reset-form/password-reset-form.mdsrc/components/password-reset-form/password-reset-request.mdsrc/components/password-reset-form/password-reset-confirm.mdsrc/components/password-reset-form/password-reset-success.mdsrc/context/auth-context.mdsrc/context/auth-http.mdsrc/context/branding-context.mdsrc/types/branding.schema.mdsrc/errors/error-codes.mdsrc/errors/react-auth-whitelabel-error.md
Out of scope (Excluded)
- MFA / passkey / WebAuthn flows — deferred until
@suaveplan/webauthn@suaveplan/otpship .
- Magic-link / SMS OTP — depends on
@suaveplan/security-codes/@suaveplan/emailer/@suaveplan/sms. - Better-Auth first-class adapter — overlaps with the concurrent
@suaveplan/react-authWave 1. - Audit-log integration, password-strength meter, rate limiter, axe-core story gate — depend on packages not yet .
- Bundle-size snapshot — repo-wide tooling not yet wired.
- Playwright E2E specs — see
e2e/README.md.