@mandaitor/react

The official React UI component library and hooks for integrating Mandaitor delegation management into your application. This package provides drop-in, customizable components for creating, viewing, and managing delegation mandates.

Overview

Building trustworthy delegation interfaces requires careful attention to detail. Users must clearly understand what authority they are granting, to whom, and under what constraints. The @mandaitor/react package provides a suite of components designed specifically for this purpose, ensuring a consistent and secure user experience across all Mandaitor integrations.

Installation

Install the React package alongside the core SDK:

npm install @mandaitor/react @mandaitor/sdk

Initialization

Wrap your application (or the relevant part of your component tree) with the MandaitorProvider. This context provider initializes the underlying SDK client and makes it available to all child components.

import { MandaitorProvider } from "@mandaitor/react";

function App() {
  return (
    <MandaitorProvider
      apiKey={process.env.NEXT_PUBLIC_MANDAITOR_API_KEY}
      tenantId="tnt_your_tenant_id"
    >
      <YourApplication />
    </MandaitorProvider>
  );
}

Core Components

MandateCreator

The MandateCreator component provides a complete form for defining a new delegation mandate. It includes inputs for the delegate, allowed actions, target resources, and constraints.

import { MandateCreator } from "@mandaitor/react";

function DelegationPage() {
  return (
    <div className="delegation-container">
      <h2>Grant New Authority</h2>
      <MandateCreator 
        onSuccess={(mandate) => console.log("Created:", mandate.mandate_id)}
        defaultPrincipal={{ type: "NATURAL_PERSON", subject_id: "user:current" }}
      />
    </div>
  );
}

MandateViewer

The MandateViewer provides a read-only, human-readable display of an existing mandate, including its current status and defined scope.

import { MandateViewer } from "@mandaitor/react";

function MandateDetails({ id }) {
  return <MandateViewer mandateId={id} />;
}

MandateManager

For administrative interfaces, the MandateManager component provides a full CRUD interface. It lists all active and historical mandates and includes controls for revoking or suspending them.

import { MandateManager } from "@mandaitor/react";

function AdminDashboard() {
  return <MandateManager />;
}

Component Reference

| Component | Description | | :--- | :--- | | MandaitorProvider | Context provider that initializes the SDK client and manages authentication state | | MandateCreator | Interactive form for creating new delegation mandates | | MandateViewer | Read-only display of a single mandate with status indicators | | MandateManager | Full CRUD interface for managing mandates (list, revoke, suspend, reactivate) | | MandateVerifier | Interactive verification form for testing delegation claims (useful for developer tools) | | ApiKeyManager | API key display and management component for tenant administration | | WidgetConfigDashboard | Dashboard for configuring the embeddable consent widget branding and options | | MandateWizard | Step-by-step guided flow for complex mandate creation | | OverlayShell | Modal wrapper for presenting Mandaitor components over existing application content |

React Hooks

For custom UI implementations, the package exports several hooks that manage data fetching and state while letting you bring your own components.

| Hook | Description | | :--- | :--- | | useMandaitorSDK() | Access the underlying SDK client instance from the provider context | | useMandate(id) | Fetch and cache a single mandate, including loading and error states | | useMandates(options) | Fetch and cache a paginated list of mandates |

Theming and Customization

All components are built with Tailwind CSS and support standard class-based customization. You can override default styles by passing className props to the components.

License

Apache-2.0