@agiens/auth-ui

React auth screens for BOS surfaces. BosAuthWidget renders the same eight-screen flow used by bos.pro: login, signup, forgot password, reset password, verify email, auth verification, invitation acceptance, and profile completion.

Install

npm install @agiens/auth-ui @agiens/auth-core @base-ui/react react react-dom

The package is self-contained. It does not require BOS source imports, a BOS-hosted logo path, a specific router, or BOS application CSS.

Use the exact BOS look

Version 0.1.3 includes the BOS brand marks in the bundle and ships the current bos.pro light/dark palette as its default tokens. To make the visual contract explicit, pass the exported defaults as shown below and do not replace them with app-specific tokens or logos:

import {
  BosAuthWidget,
  createBrowserNavAdapter,
  defaultLogoUrl,
  defaultLogoUrlDark,
  defaultTokens,
} from '@agiens/auth-ui'

const config = {
  ops,       // createAuthOps({ client: bosAuth.client, ... })
  session,   // getCurrentUser + signOut wrappers for the same client
  nav: createBrowserNavAdapter(),
  providers: ['password', 'google', 'github', 'magic-link'],
  emailVerification: 'branded-edge-fn',
  onSuccessRedirect: '/',
  theme: {
    tokens: defaultTokens,
    logoUrl: defaultLogoUrl,
    logoUrlDark: defaultLogoUrlDark,
  },
}

export function AuthRoute() {
  return <BosAuthWidget config={config} />
}

Omitting theme is also equivalent: the widget applies these same embedded logos and fallback tokens automatically. The two logo values are data URLs, so external apps do not need to copy /logo/icon-dark.png, add a public asset, or depend on bos.pro for an image request. The widget chooses the light-ink mark on dark surfaces and the dark-ink mark on light surfaces.

To keep parity, do not override theme.tokens, logoUrl, or logoUrlDark. Host CSS variables such as --accent can intentionally customize the appearance; that is a brand fork, not the bos.pro default.

Auth core wiring

Create one BOS auth client and give its client to createAuthOps; the UI kit never creates a second Supabase client:

import { createAuthOps, createBosAuth } from '@agiens/auth-core'

const bosAuth = createBosAuth({
  supabase: {
    url: import.meta.env.VITE_SUPABASE_URL,
    publishableKey: import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY,
  },
})

const ops = createAuthOps({
  client: bosAuth.client,
  getOrigin: () => window.location.origin,
  emailVerification: 'branded-edge-fn',
})

The host supplies the small app-specific adapters (session, nav, invitation acceptance, and optional signup hooks). Behavior stays in the shared widget; differences belong in configuration.

Published surface

@agiens/auth-ui exports BosAuthWidget, all eight screens, browser/hash/memory navigation adapters, provider buttons, defaultTokens, defaultLogoUrl, defaultLogoUrlDark, and the BosAuthUiConfig types. Pair it with the matching @agiens/auth-core release.