---
title: Client provider
description: 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.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/flagship/sdk/client-provider.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# 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 ↗](https://openfeature.dev/specification/glossary/#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 ](#tab-panel-6867)
* [  TypeScript ](#tab-panel-6868)

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

```

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](https://developers.cloudflare.com/flagship/sdk/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](https://developers.cloudflare.com/fundamentals/api/get-started/create-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(...)`.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/flagship/","name":"Flagship"}},{"@type":"ListItem","position":3,"item":{"@id":"/flagship/sdk/","name":"OpenFeature SDK"}},{"@type":"ListItem","position":4,"item":{"@id":"/flagship/sdk/client-provider/","name":"Client provider"}}]}
```