Client provider

The FlagshipClientProvider implements the OpenFeature web provider interface for browser applications. It pre-fetches a declared set of flag values on initialization and resolves evaluations synchronously from an in-memory cache.

This makes the provider suitable for client-side rendering where synchronous access to flag values is required.

Important

The client provider requires an API token to fetch flag values. This token is not scoped to a single app, so anyone with the token can evaluate flags across all apps in your account. Use the client provider with caution in public-facing applications.

prefetchFlags

prefetchFlags is a required array of flag keys that the provider fetches during initialization and on every context change. Only flags listed in this array are available for synchronous evaluation — any flag key not included returns a FLAG_NOT_FOUND error at resolution time.

Fetch behavior:

• On initialization — all flags in prefetchFlags are fetched in parallel and stored in an in-memory cache. The provider transitions to READY once all fetches complete (individual failures are non-fatal).
• On context change — the cache is invalidated and all flags are re-fetched for the new context. This is required by the static context paradigm ↗ used by the OpenFeature web SDK, where context is set globally and providers are expected to re-evaluate when it changes.
• At resolution time — evaluations are served synchronously from the cache. No network request is made during getBooleanValue, getStringValue, etc.

Setup

The following example initializes the provider with a set of pre-fetched flags and evaluates them in a browser application.

JavaScript

JavaScript

import { OpenFeature } from "@openfeature/web-sdk";
import { FlagshipClientProvider } from "@cloudflare/flagship";

await OpenFeature.setProviderAndWait(
  new FlagshipClientProvider({
    appId: "<APP_ID>",
    accountId: "<ACCOUNT_ID>",
    authToken: "<API_TOKEN>",
    prefetchFlags: ["promo-banner", "dark-mode", "max-uploads"],
  }),
);

// Set evaluation context globally. The provider re-fetches all prefetchFlags
// whenever the context changes.
await OpenFeature.setContext({ targetingKey: "user-42", plan: "enterprise" });

const client = OpenFeature.getClient();

// Synchronous — served from the in-memory cache.
const showBanner = client.getBooleanValue("promo-banner", false);

if (showBanner) {
  document.getElementById("banner").style.display = "block";
}

Explain Code

TypeScript

TypeScript

import { OpenFeature } from "@openfeature/web-sdk";
import { FlagshipClientProvider } from "@cloudflare/flagship";

await OpenFeature.setProviderAndWait(
  new FlagshipClientProvider({
    appId: "<APP_ID>",
    accountId: "<ACCOUNT_ID>",
    authToken: "<API_TOKEN>",
    prefetchFlags: ["promo-banner", "dark-mode", "max-uploads"],
  }),
);

// Set evaluation context globally. The provider re-fetches all prefetchFlags
// whenever the context changes.
await OpenFeature.setContext({ targetingKey: "user-42", plan: "enterprise" });

const client = OpenFeature.getClient();

// Synchronous — served from the in-memory cache.
const showBanner = client.getBooleanValue("promo-banner", false);

if (showBanner) {
  document.getElementById("banner").style.display = "block";
}

Explain Code

Note

getBooleanValue on the client provider is synchronous and does not require await, unlike the server provider.

Configuration options

Option	Type	Required	Description
appId	string	Yes	The Flagship app ID from the Cloudflare dashboard.
accountId	string	Yes	Your Cloudflare account ID.
authToken	string	Yes	A Cloudflare API token with Flagship read permissions.
prefetchFlags	string[]	Yes	Flag keys to fetch on initialization and on every context change. Flags not in this list return FLAG_NOT_FOUND at evaluation time.

When to use the client provider

Use the client provider in browser applications, single-page apps, or any client-side JavaScript environment.

Evaluations are synchronous, so they do not block rendering. Flag values are fetched once during initialization and re-fetched whenever the evaluation context changes. To force a refresh, update the context via OpenFeature.setContext(...).