Skip to content

Web SDK

Create the client in browser code after your application has authenticated the user. Your backend endpoint returns a structured user-bound credential.

import { StreaklineWebClient } from "@streakline/sdk/web";
const streakline = new StreaklineWebClient({
baseUrl: "https://api.qa.streakline.dev",
cacheNamespace: "my-product:qa",
userId: currentUser.internalId,
storage: {
getItem: (key) => localStorage.getItem(key),
setItem: (key, value) => localStorage.setItem(key, value),
removeItem: (key) => localStorage.removeItem(key),
},
getCredential: async () => {
const response = await fetch("/api/streakline/credential", {
method: "POST",
credentials: "same-origin",
});
if (!response.ok) throw new Error("Unable to obtain a Streakline credential");
return response.json();
},
});
await streakline.start();

/api/streakline/credential is an endpoint you implement in your own backend, including your normal session and request protections. It is not a Streakline route. The /web entrypoint has no React dependency. If you omit storage, state is held in memory.

const unsubscribe = streakline.subscribe(() => {
const profile = streakline.getProfileSnapshot();
renderProgress(profile); // your UI function
});
const prediction = await streakline.track("lesson.completed", {
idempotencyKey: `lesson:${completionId}`,
});
const committedBatch = await streakline.flush();

The result of track() is a local prediction and enqueue result. It is not proof that the API accepted the event. Use authoritative batch results and subsequent profile updates for reconciliation.

Call unsubscribe() and streakline.stop() when the integration unmounts. stop() stops background work without erasing the persisted queue.

After logout, account erasure, or a user switch, call await streakline.clearUserData() to clear the previous user’s local state. Create a new client for the new identity. Do not reuse a previous user’s credential.

See events and retries for failure and quarantine handling.