Skip to main content
Version: Config V2

OpenFeature Provider for JavaScript

ConfigCat OpenFeature Provider for JavaScript on GitHub

Getting started​

1. Install the provider​

npm i @openfeature/config-cat-web-provider

2. Initialize the provider​

The ConfigCatWebProvider.create() function takes the SDK key and an optional options argument containing additional configuration options for the ConfigCat Browser (JavaScript) SDK:

import { OpenFeature } from "@openfeature/web-sdk";
import { ConfigCatWebProvider } from '@openfeature/config-cat-web-provider';
import { createConsoleLogger, LogLevel } from "@configcat/sdk";

// Build options for the ConfigCat SDK.
const options = {
  logger: createConsoleLogger(LogLevel.Info),
  setupHooks: (hooks) => hooks.on('clientReady', () => console.log('Client is ready!')),
  // ...
}

// Configure the provider.
await OpenFeature.setProviderAndWait(ConfigCatWebProvider.create('#YOUR-SDK-KEY#', options));

// Create a client.
const client = OpenFeature.getClient();

For more information about all the configuration options, see the Browser (JavaScript) SDK documentation.

3. Evaluate your feature flag​

const isAwesomeFeatureEnabled = client.getBooleanValue('isAwesomeFeatureEnabled', false);
if (isAwesomeFeatureEnabled) {
  doTheNewThing();
} else {
  doTheOldThing();
}

4. Cleaning up​

On application shutdown, clean up the OpenFeature provider and the underlying ConfigCat client.

await OpenFeature.clearProviders();

Evaluation Context​

An evaluation context in the OpenFeature specification is a container for arbitrary contextual data that can be used as a basis for feature flag evaluation. The ConfigCat provider translates these evaluation contexts to ConfigCat User Objects.

The following table shows how the different context attributes are mapped to User Object attributes.

Evaluation contextUser ObjectRequired
targetingKey (identifier)identifier☑
emailemail
countrycountry
Any othercustom

Remarks:

  • If targetingKey is present in the evaluation context, it will be mapped to the Identifier property. Otherwise, identifier will be mapped. (If none of these keys are present, the ConfigCat SDK will fall back to using an empty string for the identifier.)
  • Predefined keys (i.e., targetingKey, identifier, email and country) are matched case-sensitively. (Despite this, never use the keys Identifier, Email or Country, as those are ignored for technical reasons.)
  • Predefined keys will also be included in the custom object. This allows them to be referenced using their original names in feature flag rules.
  • Other keys are mapped as custom user attributes with their values unchanged, except for objects and non-string arrays, which are converted to JSON for historical reasons. (Although the ConfigCat SDK handles value conversion internally, it's recommended to use the type expected by the referencing feature flag rules. Read more here.)

To evaluate feature flags for a context, use the OpenFeature Evaluation API:

await OpenFeature.setContext({
  targetingKey: '#SOME-USER-ID#',
  email: '[email protected]',
  country: 'CountryID',
});

const isAwesomeFeatureEnabled = client.getBooleanValue('isAwesomeFeatureEnabled', false);

Look under the hood​