Host bridge overview

CDP never reads the host window directly. Instead, the host registers a HostBridgeV1 implementation with @segmentify/common, and CDP consumes it for HTTP, account context, and navigation. This keeps the contract versioned and lets the same MFE run in the Segmentify dashboard, an iframe, or a Module Federation host.

Architecture

flowchart TD
  subgraph host [Host application]
    direction TB
    A[Dashboard: registerSegmentifyHostApi]
    B[iframe parent: bindPostMessageHost]
    C[Federation host: createDirectConfigBridge]
  end

  Store[hostBridgeStore in @segmentify/common]

  subgraph mfe [CDP micro frontend]
    Api[createMfeApi cdpApi]
    Data[BridgeHostDataProvider]
    Nav[navigateHost / router sync]
  end

  A --> Store
  B --> Store
  C --> Store
  Store --> Api
  Store --> Data
  Store --> Nav

Design principles

Principle	Implementation
Host owns HTTP	Dashboard keeps its axios + interceptors; partners pass a token or inject a client.
MFE never reads window	createMfeApi() waits for the bridge via waitForHostBridge().
Versioned contract	HostBridgeV1 with version: '1'.
Multiple adapters	Dashboard, direct config (mount), postMessage (iframe).

The three adapters

Adapter	Registered by	Used for
registerSegmentifyHostApi()	Segmentify dashboard	Internal host shell
bindPostMessageHost(iframe, payload, options)	iframe parent	iframe embed
createDirectConfigBridge(config)	React host code	Module Federation mount

All three publish the bridge into a shared store (also exposed on window.SEGMENTIFY_HOST_BRIDGE so federated bundles can find it across module graphs).

What CDP reads from the bridge

• HTTP client — cdpApi is built with createMfeApi({ useCdpApi: true }) and resolves its base URL from bridge.resolveApiBaseUrl('cdp', { datacenter }).
• Account context — BridgeHostDataProvider subscribes to host data updates and exposes useApiKey() / useHostData() to the app.
• Navigation — in dashboard mode the router syncs with the host URL; in embed mode navigation requests are forwarded to the parent (onNavigate).

Host data shape (minimum for API calls)

{
  user?: {
    user?: {
      account?: {
        apiKey?: string;
        dataCenter?: "eq" | "gc" | string;
        mainCurrency?: { code?: string; symbol?: string };
      };
      lang?: string;
      privileges?: string[];
    };
  };
  switchedUser?: { /* optional multi-account */ };
  switchRegion?: { selectedRegion?: string };
}

The dataCenter field matters in production: it selects the CDP API host (eq → api-eq, gc → api-gcp).