Provider Component

The <reeflow-provider> component is the foundation of the Reeflow SDK. It manages authentication context, theming, and API configuration for all child Reeflow components in your application.

Purpose

The Provider component serves several key roles:

• Authentication: Provides embed auth tokens to child components
• Theme management: Controls theme and color scheme for all children
• Event coordination: Facilitates communication between components

Usage

Every Reeflow application requires a Provider component to wrap all other Reeflow components:

<reeflow-provider auth-token="your-embed-token-here">
  <!-- Your Reeflow components go here -->
  <reeflow-table>...</reeflow-table>
  <reeflow-bar-chart>...</reeflow-bar-chart>
</reeflow-provider>

Attributes

The Provider component accepts the following attributes:

Authentication with auth-token (required)

The embed auth token for making API requests.

Important: Embed auth tokens must be created by your backend using your Reeflow API key, then passed to your frontend. Never expose your API key in client-side code.

<reeflow-provider auth-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...">
  <!-- components -->
</reeflow-provider>

How it works:

1. Your backend calls the Reeflow API with your API key to create an embed auth token
2. Your backend returns this token to your frontend
3. Your frontend passes the token to the <reeflow-provider>

See the Session Tokens documentation for complete implementation details and code examples.

Styling and theming (optional)

<reeflow-provider
  auth-token="your-token"
  theme="default"
  theme-mode="dark">
  <!-- components will use dark mode -->
</reeflow-provider>

CSS styles can also be used. See the Theming documentation for a complete list of available themes and customization options.

mock (optional)

Use mock data instead of making real API requests. Perfect for development, testing, and learning. Defaults to false.

<reeflow-provider mock>
  <!-- All components will use intelligent mock e-commerce data -->
  <reeflow-bar-chart>...</reeflow-bar-chart>
  <reeflow-table>...</reeflow-table>
</reeflow-provider>

The mock data system provides realistic e-commerce order data with automatic aggregations and time-based grouping. See the SDK Reference - Mock Data System for complete details on the mock dataset and capabilities.

debug (optional)

Enable debug logging to the console for troubleshooting. Defaults to false.

<reeflow-provider auth-token="your-token" debug>
  <!-- Components will log debug information to console -->
</reeflow-provider>

Programmatic API and events

You can interact with the Provider component using JavaScript, like any other component, listening and reacting to events.

See the SDK Reference for complete API documentation.

Multiple providers

You can have multiple providers in your application, each with different configurations:

<!-- Provider for public dashboard -->
<reeflow-provider auth-token="public-token" theme="default">
  <reeflow-bar-chart>...</reeflow-bar-chart>
</reeflow-provider>

<!-- Provider for admin panel -->
<reeflow-provider auth-token="admin-token" theme="ocean">
  <reeflow-table>...</reeflow-table>
</reeflow-provider>

Each provider operates independently and provides context only to its descendants.

Best practices

Token security

Never hardcode embed auth tokens in your HTML. Always fetch embed auth tokens dynamically from your backend:

async function initializeDashboard() {
  // Fetch embed auth token from YOUR backend API
  const response = await fetch('/api/reeflow-token');
  const { token } = await response.json();

  // Set the token on the provider
  const provider = document.querySelector('reeflow-provider');
  provider.updateAuth(token);
}

initializeDashboard();

For complete details on creating embed auth tokens in your backend, see the Session Tokens documentation.

TypeScript support

The Provider component is fully typed when using TypeScript:

import type { ReeflowProvider } from '@reeflow/core';

const provider = document.querySelector('reeflow-provider') as ReeflowProvider;

// TypeScript knows about all methods and properties
provider.updateAuth('new-token');
const apiClient = provider.getApiClient();

For complete type definitions and API documentation, see the SDK Reference.