OpenFeature Browser Provider | FeatureGate Docs

Use @featuregate/openfeature-web-provider when browser code already evaluates flags through OpenFeature. The provider wraps the FeatureGate Browser SDK, so it uses publishable client keys and remote evaluation through POST /v1/evaluate.

Publishable client keys only

Browser OpenFeature evaluation uses client keys, exact allowed origins, and client-exposed flags. It cannot fetch snapshots, targeting rules, runtime streams, or management routes.

Install

terminal

npm install @featuregate/openfeature-web-provider @openfeature/web-sdk @openfeature/core

For React, add the official OpenFeature React SDK:

terminal

npm install @openfeature/react-sdk react react-dom

Register the provider

OpenFeature browser providers resolve flags synchronously. FeatureGate keeps an in-memory cache and refreshes it through the browser-safe evaluation API. Use initialFlags for values the provider should prefetch during setup and when the OpenFeature context changes.

featuregate-openfeature.browser.ts

import { OpenFeature } from "@openfeature/web-sdk";
import { FeatureGateOpenFeatureWebProvider } from "@featuregate/openfeature-web-provider";

await OpenFeature.setProviderAndWait(
new FeatureGateOpenFeatureWebProvider({
  clientApiKey: "fg_pk_test_0123456789abcdef0123456789abcdef0123456789abcdef",
  initialFlags: [
    { key: "new-checkout", defaultValue: false },
    { key: "checkout-title", defaultValue: "Checkout" },
  ],
}),
{
  user: { id: "user_123" },
  account: { plan: "pro" },
},
);

export const featuregate = OpenFeature.getClient();

Evaluate flags

Use the standard OpenFeature browser client methods. Cache misses return the caller default with STALE, then refresh in the background and notify OpenFeature when remote values arrive.

checkout.ts

const enabled = featuregate.getBooleanValue("new-checkout", false);

const details = featuregate.getBooleanDetails("new-checkout", false);
console.log(details.reason, details.flagMetadata.featuregateReason);

React

Use the official @openfeature/react-sdk on top of the registered FeatureGate browser provider.

checkout.tsx

import { OpenFeatureProvider, useBooleanFlagValue } from "@openfeature/react-sdk";

export function AppFeatureProvider(props: { children: React.ReactNode }) {
return <OpenFeatureProvider>{props.children}</OpenFeatureProvider>;
}

export function CheckoutButton() {
const enabled = useBooleanFlagValue("new-checkout", false);

return (
  <button type="button">
    {enabled ? "New checkout" : "Classic checkout"}
  </button>
);
}

When user or account attributes change, update the OpenFeature context with OpenFeature.setContext(...) or useContextMutator() from @openfeature/react-sdk. The FeatureGate provider refreshes the configured initialFlags for the new context.

Next steps

OpenFeature Server Provider

Use OpenFeature from trusted server-side JavaScript with secret server keys.

Browser SDK

Use the native FeatureGate browser client without OpenFeature.

React SDK

Use FeatureGate's native React hooks over the Browser SDK.