`<bio-provider>`

The authentication context provider for all BioUI Web widgets. Wrap your widgets in a <bio-provider> to supply credentials, resolve the user, and establish a shared API context.

<bio-provider
  api-key="org_your_key"
  project-key="proj_your_key"
  xuser-id="user-123">
  <!-- child widgets here -->
</bio-provider>

How It Works

When <bio-provider> connects to the DOM, it:

Validates that api-key, project-key, and xuser-id are all present
Calls POST /api/v1/xusers to resolve the external user ID to an AnyBio UUID
Stores the resolved context (auth headers + user UUID) and provides it to all child widgets via a Lit context
Dispatches bio-provider-ready once the context is available

Child widgets wait for the provider context before making any API calls. If credentials change (e.g., a new xuser-id), the provider re-resolves and notifies children.

Attributes

Attribute	Type	Required	Description
`api-key`	`string`	Yes	Organization developer key. Sent as `Authorization: Bearer <api-key>`.
`project-key`	`string`	Yes	Project identifier. Sent as `X-Project-Key` header.
`xuser-id`	`string`	Yes	External user ID from your system. Resolved to an AnyBio UUID via the xusers API.
`base-url`	`string`	No	Override the default API base URL. Defaults to `https://api.anybio.com`.

Events

Event	Detail	Description
`bio-provider-ready`	`{ userId: string }`	Fired when the user has been resolved and the context is available. `userId` is the resolved AnyBio UUID.
`bio-provider-error`	`{ error: string }`	Fired if user resolution fails (e.g., invalid API key, network error).

CSS Custom Properties

<bio-provider> does not render visible UI. It acts as a context boundary. However, you can set theme-level CSS custom properties on it and they will cascade to all child widgets:

bio-provider {
  --bio-color-primary: #1a73e8;
  --bio-color-surface: #ffffff;
  --bio-font-family: 'Inter', system-ui, sans-serif;
  --bio-radius: 12px;
}

See the default theme file (bioui.css) for the full list of custom properties.

Code Example

<bio-provider
  api-key="org_your_key"
  project-key="proj_your_key"
  xuser-id="user-123">

  <bio-progress-ring></bio-progress-ring>
  <bio-task-list></bio-task-list>

</bio-provider>

<script>
  const provider = document.querySelector('bio-provider');

  provider.addEventListener('bio-provider-ready', (e) => {
    console.log('AnyBio user resolved:', e.detail.userId);
  });

  provider.addEventListener('bio-provider-error', (e) => {
    console.error('Provider failed:', e.detail.error);
  });
</script>

Updating Credentials Dynamically

// When the logged-in user changes in your app:
const provider = document.querySelector('bio-provider');
provider.setAttribute('xuser-id', newUserId);

// The provider will re-resolve and fire bio-provider-ready again

bio-provider

<bio-provider>