OpenFeature Web Provider - Usage

Register the provider

Call setProviderAndWait once at application startup. This performs the initial /v1/sync call and opens the SSE stream before the promise resolves, so all subsequent evaluations are backed by a warm cache.

import { OpenFeature } from '@openfeature/web-sdk';
import { NexusProvider } from '@westyx-nexus/openfeature-web-provider';

await OpenFeature.setProviderAndWait(
  new NexusProvider({
    endpoint: 'https://api.westyx.dev', // Nexus API base URL
    apiKey: 'wxp_...',              // public (browser) key
  })
);

Evaluating flags

const client = OpenFeature.getClient();

// Boolean feature flag
const showBanner = client.getBooleanValue('banner.enabled', false);

// String config
const welcomeText = client.getStringValue('welcome.text', 'Welcome!');

// Number config
const maxItems = client.getNumberValue('list.max_items', 10);

// Object config
const theme = client.getObjectValue('ui.theme', { color: 'blue' });

Reacting to live updates (SSE)

The provider maintains an SSE connection to Nexus. When a flag or config changes, it re-syncs and emits PROVIDER_CONFIGURATION_CHANGED.

import { ProviderEvents } from '@openfeature/web-sdk';

client.addHandler(ProviderEvents.ConfigurationChanged, () => {
  const updatedValue = client.getBooleanValue('banner.enabled', false);
  console.log('banner.enabled is now', updatedValue);
});

Type resolution rules

OpenFeature method	Nexus source	Notes
`getBooleanValue`	Feature flag cache	Returns `defaultValue` if the flag is absent
`getStringValue`	Config cache	`TYPE_MISMATCH` if value is not a string; `FLAG_NOT_FOUND` if absent
`getNumberValue`	Config cache (via `Number()`)	`TYPE_MISMATCH` if result is `NaN`; `FLAG_NOT_FOUND` if absent
`getObjectValue`	Config cache	`TYPE_MISMATCH` if value is not an object; `FLAG_NOT_FOUND` if absent

All evaluations return reason: STATIC - Nexus does not perform per-user targeting. EvaluationContext is accepted by the API but silently ignored.

Framework examples

Angular

// app.config.ts
import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
import { OpenFeature } from '@openfeature/web-sdk';
import { NexusProvider } from '@westyx-nexus/openfeature-web-provider';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => () =>
        OpenFeature.setProviderAndWait(
          new NexusProvider({ endpoint: 'https://api.westyx.dev', apiKey: 'wxp_...' })
        ),
      multi: true,
    },
  ],
};

React (with `@openfeature/react-sdk`)

import { OpenFeatureProvider, useBooleanFlagValue } from '@openfeature/react-sdk';
import { OpenFeature } from '@openfeature/web-sdk';
import { NexusProvider } from '@westyx-nexus/openfeature-web-provider';

OpenFeature.setProvider(new NexusProvider({ endpoint: 'https://api.westyx.dev', apiKey: 'wxp_...' }));

function MyComponent() {
  const showBeta = useBooleanFlagValue('beta.enabled', false);
  return showBeta ? <BetaUI /> : <StableUI />;
}

export function App() {
  return (
    <OpenFeatureProvider>
      <MyComponent />
    </OpenFeatureProvider>
  );
}

Stopping the provider

await OpenFeature.clearProviders();

This calls onClose() on the provider, which aborts the SSE connection and cleans up resources.

Limitations

EvaluationContext is ignored. Nexus does not perform per-user flag targeting server-side. All evaluations return reason: STATIC.
Public key only. Use a wxp_... browser key. Secret backend keys (wxs_...) are not accepted.
No secrets. Secret values are never exposed via browser SDK endpoints. Only feature flags and configs are available.

Overview

Backend SDKs

Browser SDKs

OpenFeature Providers

OpenFeature Web Provider - Usage

Register the provider

Evaluating flags

Reacting to live updates (SSE)

Type resolution rules

Framework examples

Angular

React (with `@openfeature/react-sdk`)

Stopping the provider

Limitations

​Register the provider

​Evaluating flags

​Reacting to live updates (SSE)

​Type resolution rules

​Framework examples

​Angular

​React (with @openfeature/react-sdk)

​Stopping the provider

​Limitations

Register the provider

Evaluating flags

Reacting to live updates (SSE)

Type resolution rules

Framework examples

Angular

React (with `@openfeature/react-sdk`)

Stopping the provider

Limitations