fix(browser-sdk): include credentials on SSE connections

Author: roncohen

.changeset/brave-pandas-listen.md

@@ -0,0 +1,9 @@
+---
+"@reflag/browser-sdk": patch
+"@reflag/openfeature-browser-provider": patch
+"@reflag/react-native-sdk": patch
+"@reflag/react-sdk": patch
+"@reflag/vue-sdk": patch
+---
+
+Pass `credentials: "include"` through to EventSource connections so live updates and feedback SSE can include cookies when proxying through an authenticated backend.

packages/browser-sdk/README.md

@@ -99,6 +99,7 @@ Supply these to the constructor call:
 type Configuration = {
   logger: console; // by default only logs warn/error, by passing `console` you'll log everything
   apiBaseUrl?: "https://front.reflag.com";
+  credentials?: "include" | "same-origin" | "omit"; // forwarded to fetch requests; "include" also enables credentials for the default EventSource transport
   feedback?: undefined; // See FEEDBACK.md
   enableTracking?: true; // set to `false` to stop sending track events and user/company updates to Reflag servers. Useful when you're impersonating a user
   enableLiveFlagUpdates?: false; // Set to `true` to keep flags up to date over SSE (browser SDK default: false)
@@ -242,6 +243,7 @@ For server-side rendered applications, you can eliminate the initial network req
 type Configuration = {
   logger: console; // by default only logs warn/error, by passing `console` you'll log everything
   apiBaseUrl?: "https://front.reflag.com";
+  credentials?: "include" | "same-origin" | "omit"; // forwarded to fetch requests; "include" also enables credentials for the default EventSource transport
   feedback?: undefined; // See FEEDBACK.md
   enableTracking?: true; // set to `false` to stop sending track events and user/company updates to Reflag servers. Useful when you're impersonating a user
   offline?: boolean; // Use the SDK in offline mode. Offline mode is useful during testing and local development

packages/browser-sdk/src/client.ts

@@ -480,6 +480,7 @@ export class ReflagClient {
   private autoFeedbackInit: Promise<void> | undefined;
   private readonly enableLiveFlagUpdates: boolean;
   private readonly eventSourceFactory: EventSourceFactory | undefined;
+  private readonly credentials: RequestCredentials | undefined;
   private readonly sdkVersion: string;
   private pubSubChannel: AblySSEChannel | undefined;
   private pubSubInit: Promise<void> | undefined;
@@ -542,6 +543,7 @@ export class ReflagClient {
     this.enableLiveFlagUpdates =
       requestedEnableLiveFlagUpdates && !bootstrappedWithoutFlagStateVersion;
     this.eventSourceFactory = opts?.eventSourceFactory;
+    this.credentials = opts?.credentials;
     this.sdkVersion = opts?.sdkVersion ?? SDK_VERSION;
 
     this.requestFeedbackOptions = {
@@ -627,6 +629,7 @@ export class ReflagClient {
           opts?.feedback?.ui?.position,
           opts?.feedback?.ui?.translations,
           bulkQueue ? (event) => bulkQueue.enqueue(event) : undefined,
+          this.credentials,
         );
       }
     }
@@ -1387,6 +1390,7 @@ export class ReflagClient {
       sdkVersion: this.sdkVersion,
       path: "sse/client",
       context: this.context,
+      credentials: this.credentials,
     });
   }
 

packages/browser-sdk/src/feedback/feedback.ts

@@ -289,6 +289,7 @@ export class AutoFeedback {
     private position: Position = DEFAULT_POSITION,
     private feedbackTranslations: Partial<FeedbackTranslations> = {},
     private enqueueBulkEvent?: (event: BulkEvent) => Promise<void>,
+    private credentials?: RequestCredentials,
   ) {}
 
   /**
@@ -315,6 +316,7 @@ export class AutoFeedback {
           ),
         logger: this.logger,
         sseBaseUrl: this.sseBaseUrl,
+        credentials: this.credentials,
       });
       this.logger.debug(`automatic feedback connection established`);
     } catch (e) {

packages/browser-sdk/src/sse.ts

@@ -63,6 +63,7 @@ export class AblySSEChannel {
     private sdkVersion?: string,
     private path = "sse",
     private context?: ReflagContext,
+    private credentials?: RequestCredentials,
   ) {
     this.logger = loggerWithPrefix(logger, "[SSE]");
 
@@ -139,7 +140,9 @@ export class AblySSEChannel {
       return;
     }
 
-    return new EventSource(url);
+    return this.credentials === "include"
+      ? new EventSource(url, { withCredentials: true })
+      : new EventSource(url);
   }
 
   public async connect() {
@@ -270,6 +273,7 @@ export function openAblySSEChannel({
   sdkVersion,
   path,
   context,
+  credentials,
 }: {
   channel?: string;
   channels?: string[];
@@ -281,6 +285,7 @@ export function openAblySSEChannel({
   sdkVersion?: string;
   path?: string;
   context?: ReflagContext;
+  credentials?: RequestCredentials;
 }) {
   const subscribedChannels = channels ?? (channel ? [channel] : []);
   const sse = new AblySSEChannel(
@@ -293,6 +298,7 @@ export function openAblySSEChannel({
     sdkVersion,
     path,
     context,
+    credentials,
   );
 
   sse.open();

packages/browser-sdk/test/init.test.ts

@@ -156,6 +156,7 @@ describe("init", () => {
         enableLiveFlagUpdates: true,
         feedback: { enableAutoFeedback: false },
         sdkVersion: "browser-sdk/test",
+        credentials: "include",
       });
       await reflagInstance.initialize();
 
@@ -169,6 +170,7 @@ describe("init", () => {
         company: undefined,
         other: {},
       });
+      expect(spy.mock.calls[0][0].credentials).toBe("include");
 
       await reflagInstance.stop();
       expect(closeChannel).toHaveBeenCalledTimes(1);

packages/browser-sdk/test/sse.test.ts

@@ -115,6 +115,22 @@ describe("connection handling", () => {
     );
   });
 
+  test("enables EventSource credentials when credentials is include", async () => {
+    openAblySSEChannel({
+      channels: [],
+      callback: vi.fn(),
+      logger: testLogger,
+      sseBaseUrl: sseHost,
+      path: "sse/client",
+      credentials: "include",
+    });
+
+    expect(vi.mocked(window.EventSource)).toHaveBeenCalledWith(
+      `${sseHost}/sse/client`,
+      { withCredentials: true },
+    );
+  });
+
   test("passes parsed message envelopes to the callback", async () => {
     const callback = vi.fn();
     const sse = createSSEChannel(callback);

packages/react-sdk/README.md

@@ -552,6 +552,7 @@ The `<ReflagProvider>` initializes the Reflag SDK, fetches flags and starts list
 - `enableTracking`: Set to `false` to stop sending tracking events and user/company updates to Reflag. Useful when you're impersonating a user (defaults to `true`),
 - `enableLiveFlagUpdates`: Enables live flag updates over SSE. Defaults to `true` in the React SDK.
 - `apiBaseUrl`: Optional base URL for the Reflag API. This also controls the SSE origin used for live flag updates and automated feedback,
+- `credentials`: Optional fetch credentials mode. Set to `"include"` when proxying through your backend and authenticating with cookies; this also enables credentials for live-update SSE connections.
 - `appBaseUrl`: Optional base URL for the Reflag application. Use this to override the default app URL,
 
 - `logger`: Optional custom logger implementation (`debug`, `info`, `warn`, `error`) used by the underlying client,

packages/vue-sdk/README.md

@@ -183,6 +183,7 @@ The `<ReflagProvider>` initializes the Reflag SDK, fetches flags and starts list
 
 - `enableTracking`: Set to `false` to stop sending tracking events and user/company updates to Reflag. Useful when you're impersonating a user (defaults to `true`),
 - `apiBaseUrl`: Optional base URL for the Reflag API. This also controls the SSE origin used for live flag updates and automated feedback,
+- `credentials`: Optional fetch credentials mode. Set to `"include"` when proxying through your backend and authenticating with cookies; this also enables credentials for live-update SSE connections.
 - `appBaseUrl`: Optional base URL for the Reflag application. Use this to override the default app URL,
 
 - `debug`: Set to `true` to enable debug logging to the console. If both `logger` and `debug` are provided, `logger` takes precedence,