Statsig Flags SDK Adapter

We now have the summer-sale flag defined in Statsig and are ready to start implementing the Statsig Flags SDK adapter

Install the Statsig Flags SDK Adapter

pnpm i @flags-sdk/statsig

Pull down env variables set by the Statsig app

vercel env pull

We'll implement a new identify function that will provide a StatsigUser object to use as the evaluation context for our flags.

flags.ts

import { flag, dedupe } from "flags/next";
import { getStableId } from "./lib/get-stable-id"; 
import { Identify } from "flags";
import { StatsigUser } from "@flags-sdk/statsig"; 
import { headers } from "next/headers"; 

export const identify = dedupe(async () => {
  const stableId = await getStableId(); 
  const header = await headers(); 
  const ua = header.get("user-agent") || ""; 
  const isSafari = ua.includes("Safari") && !ua.includes("Chrome");
  return {
    userID: stableId.value, 
    custom: { browser: isSafari ? "Safari" : "Chrome" }, 
  }; 
}) satisfies Identify<StatsigUser>; 

export const enableSummerSale = flag<boolean, StatsigUser>({
  key: "summer-sale",
  description: "Shows a bright yellow banner for a 20% discount",
  defaultValue: false,
  identify,
  decide({ entities }) {
    return entities?.custom?.browser === "Safari"; 
  },
});

export const productFlags = [enableSummerSale] as const;

We're using a simple identify function for the demo, but in production you'd want to wire in other user properties you want to target on here like country, tier, etc.

Update the flag definition to use the new identify function and Statsig adapter method

flags.ts

import { flag, dedupe } from "flags/next";
import { getStableId } from "./lib/get-stable-id";
import { Identify } from "flags";
import { statsigAdapter, StatsigUser } from "@flags-sdk/statsig"; 
import { headers } from "next/headers";

export const identify = dedupe(async () => {
  const stableId = await getStableId();
  const header = await headers();
  const ua = header.get("user-agent") || "";
  const isSafari = ua.includes("Safari") && !ua.includes("Chrome");
  return {
    userID: stableId.value,
    custom: { browser: isSafari ? "Safari" : "Chrome" },
  };
}) satisfies Identify<StatsigUser>;

export const enableSummerSale = flag<boolean, StatsigUser>({
  key: "summer-sale",
  description: "Shows a bright yellow banner for a 20% discount",
  defaultValue: false,
  identify,
  adapter: statsigAdapter.featureGate((gate) => gate.value), 
});

export const productFlags = [enableSummerSale] as const;

The Statsig adapter provides convenience methods for grabbing Statsig entities defined at the flag key to use for flag evaluations.

We're now powering the summer-sale flag through Statsig!

Note that we didn't need to update any of the callsites of the flag when updating the implementation of the flag.

Optional: Set up Flags Explorer with Statsig

Add the following environment variables to your project:

STATSIG_PROJECT_ID: Your Statsig Project Id (In the Statsig Console URL)
STATSIG_CONSOLE_API_KEY: A Statsig Console API Key (Settings -> Keys & Environments)