buildx-react-ui-packs

Shared React auth UI and SWR data-hook package for Buildx products.

Purpose

Centralize common auth UX and data hook logic to avoid per-product drift. Package scope is generic UI/logic only: no product-specific branding or business copy should be hardcoded in components.

Install

yarn add buildx-react-ui-packs
# or
npm install buildx-react-ui-packs

Exports

Auth provider and hooks:

• AuthProvider (reducer/redux-style auth store)
• useAuthState
• useAuthDispatch
• useAuthActions

Auth UI (Tailwind-first for Next.js/React):

• SignInBox (password + email OTP + optional Google login)
• SignUpBox (username/password + configurable profile fields: name/email/tel)
• ForgotPasswordBox
• ChangePasswordBox

Data hooks:

• useDoc
• useDocs
• useFirstDoc

Cross-platform entrypoints:

• buildx-react-ui-packs: includes auth/data core + web auth UI components.
• buildx-react-ui-packs/core: includes auth/data core only (recommended for Expo/React Native and non-web UI stacks).

Build Compatibility

• Runtime compatibility target: React 18+ and Next.js App Router (including Next 16 + Turbopack).
• Package bundles keep react, react/jsx-runtime, and react/jsx-dev-runtime external to avoid runtime dispatcher mismatch from bundled JSX runtime internals.

Auth Provider Features

• reducer-style state transitions (INIT, SIGN_IN_*, SIGN_OUT, etc.)
• token management (access_token, refresh_token) with runtime-aware storage:
  • web uses localStorage
  • Expo/React Native falls back to in-memory storage
• /me bootstrap on startup
• password auth + EOTP auth + optional Google auth (loginWithGoogle when client supports it)
• forgot/reset password and change password actions

Seeder Integration

buildx-cli project:init references this package from generated apps. Package source is owned by platform workspace and not generated in seeded projects.

Release

Publish from platform workspace using:

yarn release:ui-packs

For new npm packages, prefer scoped names in package.json (for example @your-scope/buildx-react-ui-packs) to avoid global unscoped name conflicts.

If npm returns 403 Forbidden, verify owner permission:

npm whoami
npm owner ls <package-name-from-package-json>

Your npm account must be an owner of the package name to publish.

Tailwind Style Direction

Auth components use utility classes with generic defaults:

• card-based layout
• blue accent actions
• no forced full-screen page background in component internals
• clear loading/error states