test: fix cloudflare tests on CI

Fix wrong name field on form in starter app

.changeset/heavy-socks-cover.md

@@ -0,0 +1,5 @@
+---
+"cojson": patch
+---
+
+Improve error logging on sync errors

.changeset/selfish-llamas-pump.md

@@ -0,0 +1,8 @@
+---
+"cojson-storage-indexeddb": patch
+"cojson-storage-rn-sqlite": patch
+"cojson-storage-sqlite": patch
+"cojson-storage": patch
+---
+
+Improve rollback on error when failing to add new content

.changeset/spotty-shoes-play.md

@@ -0,0 +1,9 @@
+---
+"jazz-react-auth-clerk": patch
+"jazz-auth-clerk": patch
+"jazz-browser": patch
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+Fixes clerk auth flow

.changeset/tough-cows-change.md

@@ -0,0 +1,5 @@
+---
+"jazz-nodejs": patch
+---
+
+Add crypto option to provide PureJSCrypto on the runtimes where wasm is not supported

examples/form/src/App.tsx

@@ -1,4 +1,5 @@
 import { useIframeHashRouter } from "hash-slash";
+import { useAccount } from "jazz-react";
 import { ID } from "jazz-tools";
 import { CreateOrder } from "./CreateOrder.tsx";
 import { EditOrder } from "./EditOrder.tsx";
@@ -6,10 +7,25 @@ import { Orders } from "./Orders.tsx";
 import { BubbleTeaOrder } from "./schema.ts";
 
 function App() {
+  const { me, logOut } = useAccount();
   const router = useIframeHashRouter();
 
   return (
     <>
+      <header>
+        <nav className="container py-2 border-b flex items-center justify-between">
+          <span>
+            You're logged in as <strong>{me?.profile?.name}</strong>
+          </span>
+          <button
+            className="bg-stone-100 py-1.5 px-3 text-sm rounded-md dark:bg-stone-900 dark:text-white"
+            onClick={() => logOut()}
+          >
+            Log out
+          </button>
+        </nav>
+      </header>
+
       <main className="container py-8 space-y-8">
         {router.route({
           "/": () => <Orders />,

examples/image-upload/src/App.tsx

@@ -1,8 +1,19 @@
+import { useAccount } from "jazz-react";
 import ImageUpload from "./ImageUpload.tsx";
 
 function App() {
+  const { me, logOut } = useAccount();
+
   return (
     <>
+      <header>
+        <nav className="container">
+          <span>
+            You're logged in as <strong>{me?.profile?.name}</strong>
+          </span>
+          <button onClick={() => logOut()}>Log out</button>
+        </nav>
+      </header>
       <main className="container">
         <ImageUpload />
       </main>

examples/image-upload/src/ImageUpload.tsx

@@ -46,12 +46,7 @@ export default function ImageUpload() {
         ) : (
           <div>
             <label>Upload image</label>
-            <input
-              ref={inputRef}
-              type="file"
-              accept="image/png, image/jpeg, image/gif"
-              onChange={onImageChange}
-            />
+            <input ref={inputRef} type="file" onChange={onImageChange} />
           </div>
         )}
       </div>

examples/image-upload/src/index.css

@@ -72,7 +72,8 @@ nav {
 .container {
   margin-right: auto;
   margin-left: auto;
-  padding: 2rem 0.75rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   max-width: 800px;
 }
 

examples/inspector/src/viewer/new-app.tsx

@@ -102,6 +102,7 @@ export default function CoJsonViewerApp() {
     if (coValueId) {
       setPage(coValueId);
     }
+    setCoValueId("");
   };
 
   if (
@@ -118,8 +119,22 @@ export default function CoJsonViewerApp() {
 
   return (
     <div className="w-full h-screen bg-gray-100 p-4 overflow-hidden flex flex-col">
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex items-center mb-4 gap-4">
         <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
+        <div className="flex-1">
+          <form onSubmit={handleCoValueIdSubmit}>
+            {path.length !== 0 && (
+              <input
+                className="border p-2 rounded-lg min-w-[21rem] font-mono"
+                placeholder="co_z1234567890abcdef123456789"
+                value={coValueId}
+                onChange={(e) =>
+                  setCoValueId(e.target.value as CoID<RawCoValue>)
+                }
+              />
+            )}
+          </form>
+        </div>
         <AccountSwitcher
           accounts={accounts}
           currentAccount={currentAccount}
@@ -172,7 +187,6 @@ export default function CoJsonViewerApp() {
                 type="button"
                 className="border inline-block px-2 py-1.5 text-black rounded"
                 onClick={() => {
-                  setCoValueId(currentAccount.id);
                   setPage(currentAccount.id);
                 }}
               >

examples/inspector/src/viewer/value-renderer.tsx

@@ -18,6 +18,8 @@ export function ValueRenderer({
   compact?: boolean;
   onCoIDClick?: (childNode: CoID<RawCoValue>) => void;
 }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
   if (typeof json === "undefined" || json === undefined) {
     return <span className="text-gray-400">undefined</span>;
   }
@@ -85,15 +87,31 @@ export function ValueRenderer({
     return (
       <span
         title={JSON.stringify(json, null, 2)}
-        className="inline-block max-w-64 truncate"
+        className="inline-block max-w-64"
       >
         {compact ? (
           <span>
             Object{" "}
             <span className="text-gray-500">({Object.keys(json).length})</span>
+            <pre className="mt-1 text-sm whitespace-pre-wrap">
+              {isExpanded
+                ? JSON.stringify(json, null, 2)
+                : JSON.stringify(json, null, 2)
+                    .split("\n")
+                    .slice(0, 3)
+                    .join("\n") + (Object.keys(json).length > 2 ? "\n..." : "")}
+            </pre>
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-gray-500 hover:text-gray-700"
+            >
+              {isExpanded ? "Show less" : "Show more"}
+            </button>
           </span>
         ) : (
-          JSON.stringify(json, null, 2)
+          <pre className="whitespace-pre-wrap">
+            {JSON.stringify(json, null, 2)}
+          </pre>
         )}
       </span>
     );

homepage/design-system/src/app/components/organisms/Footer.tsx

@@ -36,7 +36,9 @@ export function Footer({
       <div className="container grid gap-8 md:gap-12">
         <div className="grid grid-cols-12 gap-y-3 sm:items-center pb-8 border-b">
           <div className="col-span-full sm:col-span-6 md:col-span-8">
-            {logo}
+            <Link href="https://garden.co" target="_blank">
+              {logo}
+            </Link>
           </div>
           <p className="col-span-full sm:col-span-6 md:col-span-4 text-sm sm:text-base">
             Playful software for serious problems.

homepage/homepage/app/(docs)/docs/[framework]/(others)/page.mdx

@@ -47,12 +47,7 @@ Many of the packages provided are documented in the [API Reference](/api-referen
 
 ## LLM Docs
 
-We support the [llms.txt](https://llmstxt.org/) convention for making documentation available to large language models and the applications that make use of them.
-
-We currently have:
-
-- [/llms.txt](/llms.txt) - A overview listing of the available packages and their documentation
-- [/llms-full.txt](/llms-full.txt) - Full documentation for our packages
+Get better results with AI by [importing the Jazz docs](/docs/ai-tools) into your context window.
 
 ## Get support
 

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/ai-tools.mdx

@@ -0,0 +1,43 @@
+import { ContentByFramework, FileDownloadLink, CodeGroup } from '@/components/forMdx'
+
+# Using AI to build Jazz apps
+
+AI tools, particularly large language models (LLMs), can accelerate your development with Jazz. Searching docs, responding to questions and even helping you write code are all things that LLMs are starting to get good at.
+
+However, Jazz is a rapidly evolving framework, so sometimes AI might get things a little wrong.
+
+To help the LLMs, we provide the Jazz documentation in a txt file that is optimized for use with AI tools, like Cursor.
+
+<FileDownloadLink href="/llms-full.txt">llms-full.txt</FileDownloadLink>
+
+## Setting up AI tools
+
+Every tool is different, but generally, you'll need to either paste the contents of the [llms-full.txt](https://jazz.tools/llms-full.txt) file directly in your prompt, or attach the file to the tool.
+
+### ChatGPT and v0
+
+Upload the txt file in your prompt.
+
+![ChatGPT prompt with llms-full.txt attached](/chatgpt-with-llms-full-txt.jpg)
+
+### Cursor
+
+1. Go to Settings > Cursor Settings > Features > Docs
+2. Click "Add new doc"
+3. Enter the following URL:
+
+<CodeGroup>
+```
+https://jazz.tools/llms-full.txt
+```
+</CodeGroup>
+
+## llms.txt convention
+
+We follow the llms.txt [proposed standard](https://llmstxt.org/) for providing documentation to AI tools at inference time that helps them understand the context of the code you're writing.
+
+## Limitations and considerations
+
+AI is amazing, but it's not perfect. What works well this week could break next week (or be twice as good).
+
+We're keen to keep up with changes in tooling to help support you building the best apps, but if you need help from humans (or you have issues getting set up), please let us know on [Discord](https://discord.gg/utDMjHYg42).

homepage/homepage/components/FileDownloadLink.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
+
+import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
+
+export function FileDownloadLink(
+  props: DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  >,
+) {
+  if (!props.href) {
+    return props.children;
+  }
+
+  const { children, href } = props;
+
+  return (
+    <div className="inline-flex items-center font-medium text-stone-900 rounded-md border p-3 shadow-sm dark:text-white dark:bg-stone-925 flex py-2 rounded-lg ">
+      <Icon name="file" size="sm" className="mr-2" />
+      {children}
+
+      <a href={href} download className="ml-12">
+        Download
+      </a>
+    </div>
+  );
+}

homepage/homepage/components/forMdx.tsx

@@ -9,6 +9,8 @@ import {
 } from "@/components/docs/ContentByFramework";
 import { JazzLogo as JazzLogoClient } from "gcmp-design-system/src/app/components/atoms/logos/JazzLogo";
 import { CodeGroup as CodeGroupClient } from "gcmp-design-system/src/app/components/molecules/CodeGroup";
+import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
+import { FileDownloadLink as FileDownloadLinkClient } from "./FileDownloadLink";
 import { ComingSoon as ComingSoonClient } from "./docs/ComingSoon";
 import { IssueTrackerPreview as IssueTrackerPreviewClient } from "./docs/IssueTrackerPreview";
 
@@ -35,3 +37,12 @@ export function IssueTrackerPreview() {
 export function JazzLogo(props: { className?: string }) {
   return <JazzLogoClient {...props} />;
 }
+
+export function FileDownloadLink(
+  props: DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  >,
+) {
+  return <FileDownloadLinkClient {...props} />;
+}

homepage/homepage/components/nav.tsx

@@ -1,6 +1,5 @@
 import { ThemeToggle } from "@/components/ThemeToggle";
 import { socials } from "@/lib/socials";
-import { useFramework } from "@/lib/use-framework";
 import { JazzLogo } from "gcmp-design-system/src/app/components/atoms/logos/JazzLogo";
 import {
   Nav,

homepage/homepage/lib/docNavigationItems.js

@@ -24,6 +24,11 @@ export const docNavigationItems = [
         href: "/examples",
         done: 30,
       },
+      {
+        name: "AI tools",
+        href: "/docs/ai-tools",
+        done: 100,
+      },
     ],
   },
   {

homepage/homepage/lib/use-framework.ts

@@ -1,11 +1,9 @@
 import { DEFAULT_FRAMEWORK, isValidFramework } from "@/lib/framework";
-import { usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 
 export const useFramework = () => {
-  const pathname = usePathname();
-  const framework = pathname.startsWith("/docs/")
-    ? pathname.split("/")[2]
-    : null;
+  const { framework } = useParams<{ framework?: string }>();
+
   return framework && isValidFramework(framework)
     ? framework
     : DEFAULT_FRAMEWORK;

homepage/homepage/mdx-components.tsx

@@ -1,7 +1,9 @@
+import { DocsLink } from "@/components/docs/DocsLink";
 import type { MDXComponents } from "mdx/types";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
+    a: (props) => <DocsLink {...props} />,
     ...components,
     CodeWithInterpolation: ({
       highlightedCode,

package.json

@@ -23,7 +23,6 @@
     "lefthook": "^1.8.2",
     "pkg-pr-new": "^0.0.39",
     "playwright": "^1.50.1",
-    "ts-node": "^10.9.1",
     "turbo": "^2.3.1",
     "typedoc": "^0.25.13",
     "vitest": "3.0.5"

packages/cojson-storage-indexeddb/src/CoJsonIDBTransaction.ts

@@ -0,0 +1,111 @@
+export type StoreName =
+  | "coValues"
+  | "sessions"
+  | "transactions"
+  | "signatureAfter";
+
+// A access unit for the IndexedDB Jazz database
+// It's a wrapper around the IDBTransaction object that helps on batching multiple operations
+// in a single transaction.
+export class CoJsonIDBTransaction {
+  db: IDBDatabase;
+  tx: IDBTransaction;
+
+  pendingRequests: ((txEntry: this) => void)[] = [];
+  rejectHandlers: (() => void)[] = [];
+
+  id = Math.random();
+
+  running = false;
+  failed = false;
+  done = false;
+
+  constructor(db: IDBDatabase) {
+    this.db = db;
+
+    this.tx = this.db.transaction(
+      ["coValues", "sessions", "transactions", "signatureAfter"],
+      "readwrite",
+    );
+
+    this.tx.oncomplete = () => {
+      this.done = true;
+    };
+    this.tx.onabort = () => {
+      this.done = true;
+    };
+  }
+
+  startedAt = performance.now();
+  isReusable() {
+    const delta = performance.now() - this.startedAt;
+    return !this.done && delta <= 20;
+  }
+
+  getObjectStore(name: StoreName) {
+    return this.tx.objectStore(name);
+  }
+
+  private pushRequest<T>(
+    handler: (txEntry: this, next: () => void) => Promise<T>,
+  ) {
+    const next = () => {
+      const next = this.pendingRequests.shift();
+
+      if (next) {
+        next(this);
+      } else {
+        this.running = false;
+        this.done = true;
+      }
+    };
+
+    if (this.running) {
+      return new Promise<T>((resolve, reject) => {
+        this.rejectHandlers.push(reject);
+        this.pendingRequests.push(async () => {
+          try {
+            const result = await handler(this, next);
+            resolve(result);
+          } catch (error) {
+            reject(error);
+          }
+        });
+      });
+    }
+
+    this.running = true;
+    return handler(this, next);
+  }
+
+  handleRequest<T>(handler: (txEntry: this) => IDBRequest<T>) {
+    return this.pushRequest<T>((txEntry, next) => {
+      return new Promise<T>((resolve, reject) => {
+        const request = handler(txEntry);
+
+        request.onerror = () => {
+          this.failed = true;
+          this.tx.abort();
+          console.error(request.error);
+          reject(request.error);
+
+          // Don't leave any pending promise
+          for (const handler of this.rejectHandlers) {
+            handler();
+          }
+        };
+
+        request.onsuccess = () => {
+          resolve(request.result as T);
+          next();
+        };
+      });
+    });
+  }
+
+  commit() {
+    if (!this.done) {
+      this.tx.commit();
+    }
+  }
+}

packages/cojson-storage-indexeddb/src/idbClient.ts

@@ -1,4 +1,4 @@
-import type { CojsonInternalTypes, RawCoID } from "cojson";
+import type { CojsonInternalTypes, RawCoID, SessionID } from "cojson";
 import type {
   CoValueRow,
   DBClientInterface,
@@ -8,119 +8,60 @@ import type {
   StoredSessionRow,
   TransactionRow,
 } from "cojson-storage";
-import { SyncPromise } from "./syncPromises.js";
+import { CoJsonIDBTransaction } from "./CoJsonIDBTransaction.js";
 
 export class IDBClient implements DBClientInterface {
   private db;
 
-  currentTx:
-    | {
-        id: number;
-        tx: IDBTransaction;
-        stores: {
-          coValues: IDBObjectStore;
-          sessions: IDBObjectStore;
-          transactions: IDBObjectStore;
-          signatureAfter: IDBObjectStore;
-        };
-        startedAt: number;
-        pendingRequests: ((txEntry: {
-          stores: {
-            coValues: IDBObjectStore;
-            sessions: IDBObjectStore;
-            transactions: IDBObjectStore;
-            signatureAfter: IDBObjectStore;
-          };
-        }) => void)[];
-      }
-    | undefined;
-
-  currentTxID = 0;
+  activeTransaction: CoJsonIDBTransaction | undefined;
+  autoBatchingTransaction: CoJsonIDBTransaction | undefined;
 
   constructor(db: IDBDatabase) {
     this.db = db;
   }
 
   makeRequest<T>(
-    handler: (stores: {
-      coValues: IDBObjectStore;
-      sessions: IDBObjectStore;
-      transactions: IDBObjectStore;
-      signatureAfter: IDBObjectStore;
-    }) => IDBRequest,
-  ): SyncPromise<T> {
-    return new SyncPromise((resolve, reject) => {
-      let txEntry = this.currentTx;
+    handler: (txEntry: CoJsonIDBTransaction) => IDBRequest<T>,
+  ): Promise<T> {
+    if (this.activeTransaction) {
+      return this.activeTransaction.handleRequest<T>(handler);
+    }
 
-      const requestEntry = ({
-        stores,
-      }: {
-        stores: {
-          coValues: IDBObjectStore;
-          sessions: IDBObjectStore;
-          transactions: IDBObjectStore;
-          signatureAfter: IDBObjectStore;
-        };
-      }) => {
-        const request = handler(stores);
-        request.onerror = () => {
-          console.error("Error in request", request.error);
-          this.currentTx = undefined;
-          reject(request.error);
-        };
-        request.onsuccess = () => {
-          const value = request.result as T;
-          resolve(value);
+    if (this.autoBatchingTransaction?.isReusable()) {
+      return this.autoBatchingTransaction.handleRequest<T>(handler);
+    }
 
-          const next = txEntry?.pendingRequests.shift();
+    const tx = new CoJsonIDBTransaction(this.db);
 
-          if (next) {
-            next({ stores });
-          } else {
-            if (this.currentTx === txEntry) {
-              this.currentTx = undefined;
-            }
-          }
-        };
-      };
+    this.autoBatchingTransaction = tx;
 
-      // Transaction batching
-      if (!txEntry || performance.now() - txEntry.startedAt > 20) {
-        const tx = this.db.transaction(
-          ["coValues", "sessions", "transactions", "signatureAfter"],
-          "readwrite",
-        );
-        txEntry = {
-          id: this.currentTxID++,
-          tx,
-          stores: {
-            coValues: tx.objectStore("coValues"),
-            sessions: tx.objectStore("sessions"),
-            transactions: tx.objectStore("transactions"),
-            signatureAfter: tx.objectStore("signatureAfter"),
-          },
-          startedAt: performance.now(),
-          pendingRequests: [],
-        };
-
-        this.currentTx = txEntry;
-
-        requestEntry(txEntry);
-      } else {
-        txEntry.pendingRequests.push(requestEntry);
-      }
-    });
+    return tx.handleRequest<T>(handler);
   }
 
   async getCoValue(coValueId: RawCoID): Promise<StoredCoValueRow | undefined> {
-    return this.makeRequest<StoredCoValueRow | undefined>(({ coValues }) =>
-      coValues.index("coValuesById").get(coValueId),
+    return this.makeRequest<StoredCoValueRow | undefined>((tx) =>
+      tx.getObjectStore("coValues").index("coValuesById").get(coValueId),
     );
   }
 
   async getCoValueSessions(coValueRowId: number): Promise<StoredSessionRow[]> {
-    return this.makeRequest<StoredSessionRow[]>(({ sessions }) =>
-      sessions.index("sessionsByCoValue").getAll(coValueRowId),
+    return this.makeRequest<StoredSessionRow[]>((tx) =>
+      tx
+        .getObjectStore("sessions")
+        .index("sessionsByCoValue")
+        .getAll(coValueRowId),
+    );
+  }
+
+  async getSingleCoValueSession(
+    coValueRowId: number,
+    sessionID: SessionID,
+  ): Promise<StoredSessionRow | undefined> {
+    return this.makeRequest<StoredSessionRow>((tx) =>
+      tx
+        .getObjectStore("sessions")
+        .index("uniqueSessions")
+        .get([coValueRowId, sessionID]),
     );
   }
 
@@ -128,13 +69,15 @@ export class IDBClient implements DBClientInterface {
     sessionRowId: number,
     firstNewTxIdx: number,
   ): Promise<TransactionRow[]> {
-    return this.makeRequest<TransactionRow[]>(({ transactions }) =>
-      transactions.getAll(
-        IDBKeyRange.bound(
-          [sessionRowId, firstNewTxIdx],
-          [sessionRowId, Number.POSITIVE_INFINITY],
+    return this.makeRequest<TransactionRow[]>((tx) =>
+      tx
+        .getObjectStore("transactions")
+        .getAll(
+          IDBKeyRange.bound(
+            [sessionRowId, firstNewTxIdx],
+            [sessionRowId, Number.POSITIVE_INFINITY],
+          ),
         ),
-      ),
     );
   }
 
@@ -142,9 +85,10 @@ export class IDBClient implements DBClientInterface {
     sessionRowId: number,
     firstNewTxIdx: number,
   ): Promise<SignatureAfterRow[]> {
-    return this.makeRequest<SignatureAfterRow[]>(
-      ({ signatureAfter }: { signatureAfter: IDBObjectStore }) =>
-        signatureAfter.getAll(
+    return this.makeRequest<SignatureAfterRow[]>((tx) =>
+      tx
+        .getObjectStore("signatureAfter")
+        .getAll(
           IDBKeyRange.bound(
             [sessionRowId, firstNewTxIdx],
             [sessionRowId, Number.POSITIVE_INFINITY],
@@ -160,8 +104,8 @@ export class IDBClient implements DBClientInterface {
       throw new Error(`Header is required, coId: ${msg.id}`);
     }
 
-    return (await this.makeRequest<IDBValidKey>(({ coValues }) =>
-      coValues.put({
+    return (await this.makeRequest<IDBValidKey>((tx) =>
+      tx.getObjectStore("coValues").put({
         id: msg.id,
         // biome-ignore lint/style/noNonNullAssertion: TODO(JAZZ-561): Review
         header: msg.header!,
@@ -176,25 +120,26 @@ export class IDBClient implements DBClientInterface {
     sessionUpdate: SessionRow;
     sessionRow?: StoredSessionRow;
   }): Promise<number> {
-    return this.makeRequest<number>(({ sessions }) =>
-      sessions.put(
-        sessionRow?.rowID
-          ? {
-              rowID: sessionRow.rowID,
-              ...sessionUpdate,
-            }
-          : sessionUpdate,
-      ),
+    return this.makeRequest<number>(
+      (tx) =>
+        tx.getObjectStore("sessions").put(
+          sessionRow?.rowID
+            ? {
+                rowID: sessionRow.rowID,
+                ...sessionUpdate,
+              }
+            : sessionUpdate,
+        ) as IDBRequest<number>,
     );
   }
 
-  addTransaction(
+  async addTransaction(
     sessionRowID: number,
     idx: number,
     newTransaction: CojsonInternalTypes.Transaction,
   ) {
-    return this.makeRequest(({ transactions }) =>
-      transactions.add({
+    await this.makeRequest((tx) =>
+      tx.getObjectStore("transactions").add({
         ses: sessionRowID,
         idx,
         tx: newTransaction,
@@ -211,8 +156,8 @@ export class IDBClient implements DBClientInterface {
     idx: number;
     signature: CojsonInternalTypes.Signature;
   }) {
-    return this.makeRequest(({ signatureAfter }) =>
-      signatureAfter.put({
+    return this.makeRequest((tx) =>
+      tx.getObjectStore("signatureAfter").put({
         ses: sessionRowID,
         idx,
         signature,
@@ -220,7 +165,24 @@ export class IDBClient implements DBClientInterface {
     );
   }
 
-  async unitOfWork(operationsCallback: () => unknown[]) {
-    return Promise.all(operationsCallback());
+  closeTransaction(tx: CoJsonIDBTransaction) {
+    tx.commit();
+
+    if (tx === this.activeTransaction) {
+      this.activeTransaction = undefined;
+    }
+  }
+
+  async transaction(operationsCallback: () => unknown) {
+    const tx = new CoJsonIDBTransaction(this.db);
+
+    this.activeTransaction = tx;
+
+    try {
+      await operationsCallback();
+      tx.commit(); // Tells the browser to not wait for another possible request and commit the transaction immediately
+    } finally {
+      this.activeTransaction = undefined;
+    }
   }
 }

packages/cojson-storage-indexeddb/src/idbNode.ts

@@ -33,18 +33,7 @@ export class IDBNode {
           }
           await this.syncManager.handleSyncMessage(msg);
         } catch (e) {
-          console.error(
-            new Error(
-              `Error reading from localNode, handling msg\n\n${JSON.stringify(
-                msg,
-                (k, v) =>
-                  k === "changes" || k === "encryptedChanges"
-                    ? `${v.slice(0, 20)}...`
-                    : v,
-              )}`,
-              { cause: e },
-            ),
-          );
+          console.error(e);
         }
       }
     };

packages/cojson-storage-indexeddb/src/syncPromises.ts

@@ -1,224 +0,0 @@
-const isFunction = (func: any) => typeof func === "function";
-
-const isObject = (supposedObject: any) =>
-  typeof supposedObject === "object" &&
-  supposedObject !== null &&
-  !Array.isArray(supposedObject);
-
-const isThenable = (obj: any) => isObject(obj) && isFunction(obj.then);
-
-const identity = (co: any) => co;
-
-export { identity, isFunction, isObject, isThenable };
-
-enum States {
-  PENDING = "PENDING",
-  RESOLVED = "RESOLVED",
-  REJECTED = "REJECTED",
-}
-
-interface Handler<T, U> {
-  onSuccess: HandlerOnSuccess<T, U>;
-  onFail: HandlerOnFail<U>;
-}
-
-type HandlerOnSuccess<T, U = any> = (value: T) => U | Thenable<U>;
-type HandlerOnFail<U = any> = (reason: any) => U | Thenable<U>;
-type Finally<U> = () => U | Thenable<U>;
-
-interface Thenable<T> {
-  then<U>(
-    onSuccess?: HandlerOnSuccess<T, U>,
-    onFail?: HandlerOnFail<U>,
-  ): Thenable<U>;
-  then<U>(
-    onSuccess?: HandlerOnSuccess<T, U>,
-    onFail?: (reason: any) => void,
-  ): Thenable<U>;
-}
-
-type Resolve<R> = (value?: R | Thenable<R>) => void;
-type Reject = (value?: any) => void;
-
-export class SyncPromise<T> {
-  private state: States = States.PENDING;
-  private handlers: Handler<T, any>[] = [];
-  private value: T | any;
-
-  public constructor(callback: (resolve: Resolve<T>, reject: Reject) => void) {
-    try {
-      callback(this.resolve as Resolve<T>, this.reject);
-    } catch (e) {
-      this.reject(e);
-    }
-  }
-
-  private resolve = (value: T) => {
-    return this.setResult(value, States.RESOLVED);
-  };
-
-  private reject = (reason: any) => {
-    return this.setResult(reason, States.REJECTED);
-  };
-
-  private setResult = (value: T | any, state: States) => {
-    const set = () => {
-      if (this.state !== States.PENDING) {
-        return null;
-      }
-
-      if (isThenable(value)) {
-        return (value as Thenable<T>).then(this.resolve, this.reject);
-      }
-
-      this.value = value;
-      this.state = state;
-
-      return this.executeHandlers();
-    };
-
-    void set();
-  };
-
-  private executeHandlers = () => {
-    if (this.state === States.PENDING) {
-      return null;
-    }
-
-    for (const handler of this.handlers) {
-      if (this.state === States.REJECTED) {
-        handler.onFail(this.value);
-      } else {
-        handler.onSuccess(this.value);
-      }
-    }
-
-    this.handlers = [];
-  };
-
-  private attachHandler = (handler: Handler<T, any>) => {
-    this.handlers = [...this.handlers, handler];
-
-    this.executeHandlers();
-  };
-
-  // biome-ignore lint/suspicious/noThenProperty: TODO(JAZZ-561): Review
-  public then<U>(onSuccess: HandlerOnSuccess<T, U>, onFail?: HandlerOnFail<U>) {
-    return new SyncPromise<U>((resolve, reject) => {
-      return this.attachHandler({
-        onSuccess: (result) => {
-          try {
-            return resolve(onSuccess(result));
-          } catch (e) {
-            return reject(e);
-          }
-        },
-        onFail: (reason) => {
-          if (!onFail) {
-            return reject(reason);
-          }
-
-          try {
-            return resolve(onFail(reason));
-          } catch (e) {
-            return reject(e);
-          }
-        },
-      });
-    });
-  }
-
-  public catch<U>(onFail: HandlerOnFail<U>) {
-    return this.then<U>(identity, onFail);
-  }
-
-  // methods
-
-  public toString() {
-    return "[object SyncPromise]";
-  }
-
-  public finally<U>(cb: Finally<U>) {
-    return new SyncPromise<U>((resolve, reject) => {
-      let co: U | any;
-      let isRejected: boolean;
-
-      return this.then(
-        (value) => {
-          isRejected = false;
-          co = value;
-          return cb();
-        },
-        (reason) => {
-          isRejected = true;
-          co = reason;
-          return cb();
-        },
-      ).then(() => {
-        if (isRejected) {
-          return reject(co);
-        }
-
-        return resolve(co);
-      });
-    });
-  }
-
-  public spread<U>(handler: (...args: any[]) => U) {
-    return this.then<U>((collection) => {
-      if (Array.isArray(collection)) {
-        return handler(...collection);
-      }
-
-      return handler(collection);
-    });
-  }
-
-  // static
-
-  public static resolve<U = any>(value?: U | Thenable<U>) {
-    return new SyncPromise<U>((resolve) => {
-      return resolve(value);
-    });
-  }
-
-  public static reject<U>(reason?: any) {
-    return new SyncPromise<U>((_resolve, reject) => {
-      return reject(reason);
-    });
-  }
-
-  public static all<U = any>(collection: (U | Thenable<U>)[]) {
-    return new SyncPromise<U[]>((resolve, reject) => {
-      if (!Array.isArray(collection)) {
-        return reject(new TypeError("An array must be provided."));
-      }
-
-      if (collection.length === 0) {
-        return resolve([]);
-      }
-
-      let counter = collection.length;
-      const resolvedCollection: U[] = [];
-
-      const tryResolve = (value: U, index: number) => {
-        counter -= 1;
-        resolvedCollection[index] = value;
-
-        if (counter !== 0) {
-          return null;
-        }
-
-        return resolve(resolvedCollection);
-      };
-
-      return collection.forEach((item, index) => {
-        return SyncPromise.resolve(item)
-          .then((value) => {
-            return tryResolve(value, index);
-          })
-          .catch(reject);
-      });
-    });
-  }
-}

packages/cojson-storage-indexeddb/src/tests/CoJsonIDBTransaction.test.ts

@@ -0,0 +1,170 @@
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { CoJsonIDBTransaction } from "../CoJsonIDBTransaction";
+
+const TEST_DB_NAME = "test-cojson-idb-transaction";
+
+describe("CoJsonIDBTransaction", () => {
+  let db: IDBDatabase;
+
+  beforeEach(async () => {
+    // Create test database
+    await new Promise<void>((resolve, reject) => {
+      const request = indexedDB.open(TEST_DB_NAME, 1);
+
+      request.onerror = () => reject(request.error);
+
+      request.onupgradeneeded = (event) => {
+        const db = request.result;
+        // Create test stores
+        db.createObjectStore("coValues", { keyPath: "id" });
+        const sessions = db.createObjectStore("sessions", { keyPath: "id" });
+        sessions.createIndex("uniqueSessions", ["coValue", "sessionID"], {
+          unique: true,
+        });
+        db.createObjectStore("transactions", { keyPath: "id" });
+        db.createObjectStore("signatureAfter", { keyPath: "id" });
+      };
+
+      request.onsuccess = () => {
+        db = request.result;
+        resolve();
+      };
+    });
+  });
+
+  afterEach(async () => {
+    // Close and delete test database
+    db.close();
+    await new Promise<void>((resolve, reject) => {
+      const request = indexedDB.deleteDatabase(TEST_DB_NAME);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve();
+    });
+  });
+
+  test("handles successful write and read operations", async () => {
+    const tx = new CoJsonIDBTransaction(db);
+
+    // Write test
+    await tx.handleRequest((tx) =>
+      tx.getObjectStore("coValues").put({
+        id: "test1",
+        value: "hello",
+      }),
+    );
+
+    // Read test
+    const readTx = new CoJsonIDBTransaction(db);
+    const result = await readTx.handleRequest((tx) =>
+      tx.getObjectStore("coValues").get("test1"),
+    );
+
+    expect(result).toEqual({
+      id: "test1",
+      value: "hello",
+    });
+  });
+
+  test("handles multiple operations in single transaction", async () => {
+    const tx = new CoJsonIDBTransaction(db);
+
+    // Multiple writes
+    await Promise.all([
+      tx.handleRequest((tx) =>
+        tx.getObjectStore("coValues").put({
+          id: "test1",
+          value: "hello",
+        }),
+      ),
+      tx.handleRequest((tx) =>
+        tx.getObjectStore("coValues").put({
+          id: "test2",
+          value: "world",
+        }),
+      ),
+    ]);
+
+    // Read results
+    const readTx = new CoJsonIDBTransaction(db);
+    const [result1, result2] = await Promise.all([
+      readTx.handleRequest((tx) => tx.getObjectStore("coValues").get("test1")),
+      readTx.handleRequest((tx) => tx.getObjectStore("coValues").get("test2")),
+    ]);
+
+    expect(result1).toEqual({
+      id: "test1",
+      value: "hello",
+    });
+    expect(result2).toEqual({
+      id: "test2",
+      value: "world",
+    });
+  });
+
+  test("handles transaction across multiple stores", async () => {
+    const tx = new CoJsonIDBTransaction(db);
+
+    await Promise.all([
+      tx.handleRequest((tx) =>
+        tx.getObjectStore("coValues").put({
+          id: "value1",
+          data: "value data",
+        }),
+      ),
+      tx.handleRequest((tx) =>
+        tx.getObjectStore("sessions").put({
+          id: "session1",
+          data: "session data",
+        }),
+      ),
+    ]);
+
+    const readTx = new CoJsonIDBTransaction(db);
+    const [valueResult, sessionResult] = await Promise.all([
+      readTx.handleRequest((tx) => tx.getObjectStore("coValues").get("value1")),
+      readTx.handleRequest((tx) =>
+        tx.getObjectStore("sessions").get("session1"),
+      ),
+    ]);
+
+    expect(valueResult).toEqual({
+      id: "value1",
+      data: "value data",
+    });
+    expect(sessionResult).toEqual({
+      id: "session1",
+      data: "session data",
+    });
+  });
+
+  test("handles failed transactions", async () => {
+    const tx = new CoJsonIDBTransaction(db);
+
+    await expect(
+      tx.handleRequest((tx) =>
+        tx.getObjectStore("sessions").put({
+          id: 1,
+          coValue: "value1",
+          sessionID: "session1",
+          data: "session data",
+        }),
+      ),
+    ).resolves.toBe(1);
+
+    expect(tx.failed).toBe(false);
+
+    const badTx = new CoJsonIDBTransaction(db);
+    await expect(
+      badTx.handleRequest((tx) =>
+        tx.getObjectStore("sessions").put({
+          id: 2,
+          coValue: "value1",
+          sessionID: "session1",
+          data: "session data",
+        }),
+      ),
+    ).rejects.toThrow();
+
+    expect(badTx.failed).toBe(true);
+  });
+});

packages/cojson-storage-rn-sqlite/src/client.ts

@@ -1,5 +1,10 @@
 import { type DB as DatabaseT } from "@op-engineering/op-sqlite";
-import { CojsonInternalTypes, type OutgoingSyncQueue, RawCoID } from "cojson";
+import {
+  CojsonInternalTypes,
+  type OutgoingSyncQueue,
+  RawCoID,
+  SessionID,
+} from "cojson";
 import type {
   DBClientInterface,
   SessionRow,
@@ -48,6 +53,17 @@ export class SQLiteClient implements DBClientInterface {
     return rows as StoredSessionRow[];
   }
 
+  async getSingleCoValueSession(
+    coValueRowId: number,
+    sessionID: SessionID,
+  ): Promise<StoredSessionRow | undefined> {
+    const { rows } = await this.db.execute(
+      "SELECT * FROM sessions WHERE coValue = ? AND sessionID = ?",
+      [coValueRowId, sessionID],
+    );
+    return rows[0] as StoredSessionRow | undefined;
+  }
+
   async getNewTransactionInSession(
     sessionRowId: number,
     firstNewTxIdx: number,
@@ -142,12 +158,10 @@ export class SQLiteClient implements DBClientInterface {
     );
   }
 
-  async unitOfWork(
-    operationsCallback: () => Promise<unknown>[],
-  ): Promise<void> {
+  async transaction(operationsCallback: () => unknown) {
     try {
       await this.db.transaction(async () => {
-        await Promise.all(operationsCallback());
+        await operationsCallback();
       });
     } catch (e) {
       console.error("Transaction failed:", e);

packages/cojson-storage-rn-sqlite/src/sqlite-react-native.ts

@@ -42,18 +42,6 @@ export class SQLiteReactNative {
             await new Promise((resolve) => setTimeout(resolve, 0));
           }
         } catch (e) {
-          console.error(
-            new Error(
-              `Error reading from localNode, handling msg\n\n${JSON.stringify(
-                msg,
-                (k, v) =>
-                  k === "changes" || k === "encryptedChanges"
-                    ? `${v.slice(0, 20)}...`
-                    : v,
-              )}`,
-              { cause: e },
-            ),
-          );
           console.error(e);
         }
       }

packages/cojson-storage-sqlite/src/sqliteClient.ts

@@ -71,6 +71,17 @@ export class SQLiteClient implements DBClientInterface {
       .all(coValueRowId) as StoredSessionRow[];
   }
 
+  getSingleCoValueSession(
+    coValueRowId: number,
+    sessionID: SessionID,
+  ): StoredSessionRow | undefined {
+    return this.db
+      .prepare<[number, string]>(
+        `SELECT * FROM sessions WHERE coValue = ? AND sessionID = ?`,
+      )
+      .get(coValueRowId, sessionID) as StoredSessionRow | undefined;
+  }
+
   getNewTransactionInSession(
     sessionRowId: number,
     firstNewTxIdx: number,
@@ -159,7 +170,7 @@ export class SQLiteClient implements DBClientInterface {
       .run(sessionRowID, idx, signature);
   }
 
-  unitOfWork(operationsCallback: () => any[]) {
+  transaction(operationsCallback: () => unknown) {
     this.db.transaction(operationsCallback)();
   }
 }

packages/cojson-storage/src/syncManager.ts

@@ -200,15 +200,6 @@ export class SyncManager {
       ? coValueRow.rowID
       : await this.dbClient.addCoValue(msg);
 
-    const allOurSessionsEntries =
-      await this.dbClient.getCoValueSessions(storedCoValueRowID);
-
-    const allOurSessions: {
-      [sessionID: SessionID]: StoredSessionRow;
-    } = Object.fromEntries(
-      allOurSessionsEntries.map((row) => [row.sessionID, row]),
-    );
-
     const ourKnown: CojsonInternalTypes.CoValueKnownState = {
       id: msg.id,
       header: true,
@@ -217,9 +208,13 @@ export class SyncManager {
 
     let invalidAssumptions = false;
 
-    await this.dbClient.unitOfWork(() =>
-      (Object.keys(msg.new) as SessionID[]).map((sessionID) => {
-        const sessionRow = allOurSessions[sessionID];
+    for (const sessionID of Object.keys(msg.new) as SessionID[]) {
+      await this.dbClient.transaction(async () => {
+        const sessionRow = await this.dbClient.getSingleCoValueSession(
+          storedCoValueRowID,
+          sessionID,
+        );
+
         if (sessionRow) {
           ourKnown.sessions[sessionRow.sessionID] = sessionRow.lastIdx;
         }
@@ -229,8 +224,8 @@ export class SyncManager {
         } else {
           return this.putNewTxs(msg, sessionID, sessionRow, storedCoValueRowID);
         }
-      }),
-    );
+      });
+    }
 
     if (invalidAssumptions) {
       this.sendStateMessage({

packages/cojson-storage/src/tests/syncManager.test.ts

@@ -45,9 +45,11 @@ describe("DB sync manager", () => {
   const DBClient = vi.fn();
   DBClient.prototype.getCoValue = vi.fn();
   DBClient.prototype.getCoValueSessions = vi.fn();
+  DBClient.prototype.getSingleCoValueSession = vi.fn();
+  DBClient.prototype.getNewTransactionInSession = vi.fn();
   DBClient.prototype.addSessionUpdate = vi.fn();
   DBClient.prototype.addTransaction = vi.fn();
-  DBClient.prototype.unitOfWork = vi.fn((callback) => Promise.all(callback()));
+  DBClient.prototype.transaction = vi.fn((callback) => callback());
 
   beforeEach(async () => {
     const idbClient = new DBClient() as unknown as Mocked<DBClientInterface>;

packages/cojson-storage/src/types.ts

@@ -41,6 +41,11 @@ export interface DBClientInterface {
     coValueRowId: number,
   ): Promise<StoredSessionRow[]> | StoredSessionRow[];
 
+  getSingleCoValueSession(
+    coValueRowId: number,
+    sessionID: SessionID,
+  ): Promise<StoredSessionRow | undefined> | StoredSessionRow | undefined;
+
   getNewTransactionInSession(
     sessionRowId: number,
     firstNewTxIdx: number,
@@ -79,5 +84,5 @@ export interface DBClientInterface {
     signature: Signature;
   }): Promise<number> | void | unknown;
 
-  unitOfWork(operationsCallback: () => unknown[]): Promise<unknown> | void;
+  transaction(callback: () => unknown): Promise<unknown> | void;
 }

packages/cojson/src/sync.ts

@@ -341,20 +341,8 @@ export class SyncManager {
           });
           return;
         }
-        try {
-          await this.handleSyncMessage(msg, peerState);
-        } catch (e) {
-          throw new Error(
-            `Error reading from peer ${
-              peer.id
-            }, handling msg\n\n${JSON.stringify(msg, (k, v) =>
-              k === "changes" || k === "encryptedChanges"
-                ? v.slice(0, 20) + "..."
-                : v,
-            )}`,
-            { cause: e },
-          );
-        }
+
+        await this.handleSyncMessage(msg, peerState);
       }
     };
 

packages/jazz-auth-clerk/src/index.ts

@@ -1,21 +1,18 @@
-import { AgentSecret } from "cojson";
-import { AuthSecretStorage } from "jazz-tools";
 import {
   Account,
   AuthCredentials,
+  AuthSecretStorage,
   AuthenticateAccountFunction,
-  ID,
 } from "jazz-tools";
 import { getClerkUsername } from "./getClerkUsername.js";
-import { MinimalClerkClient } from "./types.js";
-
-type ClerkCredentials = {
-  jazzAccountID: ID<Account>;
-  jazzAccountSecret: AgentSecret;
-  jazzAccountSeed?: number[];
-};
+import {
+  ClerkCredentials,
+  MinimalClerkClient,
+  isClerkCredentials,
+} from "./types.js";
 
 export type { MinimalClerkClient };
+export { isClerkCredentials };
 
 export class JazzClerkAuth {
   constructor(
@@ -23,8 +20,27 @@ export class JazzClerkAuth {
     private authSecretStorage: AuthSecretStorage,
   ) {}
 
+  /**
+   * Loads the Jazz auth data from the Clerk user and sets it in the auth secret storage.
+   */
+  static loadClerkAuthData(
+    credentials: ClerkCredentials,
+    storage: AuthSecretStorage,
+  ) {
+    return storage.set({
+      accountID: credentials.jazzAccountID,
+      accountSecret: credentials.jazzAccountSecret,
+      secretSeed: credentials.jazzAccountSeed
+        ? Uint8Array.from(credentials.jazzAccountSeed)
+        : undefined,
+      provider: "clerk",
+    });
+  }
+
   onClerkUserChange = async (clerkClient: Pick<MinimalClerkClient, "user">) => {
-    if (!clerkClient.user) return;
+    if (!clerkClient.user) {
+      return;
+    }
 
     const isAuthenticated = this.authSecretStorage.isAuthenticated;
 
@@ -45,13 +61,8 @@ export class JazzClerkAuth {
       throw new Error("Not signed in on Clerk");
     }
 
-    const clerkCredentials = clerkClient.user
-      .unsafeMetadata as ClerkCredentials;
-
-    if (
-      !clerkCredentials.jazzAccountID ||
-      !clerkCredentials.jazzAccountSecret
-    ) {
+    const clerkCredentials = clerkClient.user.unsafeMetadata;
+    if (!isClerkCredentials(clerkCredentials)) {
       throw new Error("No credentials found on Clerk");
     }
 
@@ -66,7 +77,14 @@ export class JazzClerkAuth {
 
     await this.authenticate(credentials);
 
-    await this.authSecretStorage.set(credentials);
+    await JazzClerkAuth.loadClerkAuthData(
+      {
+        jazzAccountID: credentials.accountID,
+        jazzAccountSecret: credentials.accountSecret,
+        jazzAccountSeed: clerkCredentials.jazzAccountSeed,
+      },
+      this.authSecretStorage,
+    );
   };
 
   signIn = async (clerkClient: Pick<MinimalClerkClient, "user">) => {
@@ -76,13 +94,15 @@ export class JazzClerkAuth {
       throw new Error("No credentials found");
     }
 
+    const jazzAccountSeed = credentials.secretSeed
+      ? Array.from(credentials.secretSeed)
+      : undefined;
+
     await clerkClient.user?.update({
       unsafeMetadata: {
         jazzAccountID: credentials.accountID,
         jazzAccountSecret: credentials.accountSecret,
-        jazzAccountSeed: credentials.secretSeed
-          ? Array.from(credentials.secretSeed)
-          : undefined,
+        jazzAccountSeed,
       } satisfies ClerkCredentials,
     });
 
@@ -96,12 +116,14 @@ export class JazzClerkAuth {
       currentAccount.profile.name = username;
     }
 
-    await this.authSecretStorage.set({
-      accountID: credentials.accountID,
-      accountSecret: credentials.accountSecret,
-      secretSeed: credentials.secretSeed,
-      provider: "clerk",
-    });
+    await JazzClerkAuth.loadClerkAuthData(
+      {
+        jazzAccountID: credentials.accountID,
+        jazzAccountSecret: credentials.accountSecret,
+        jazzAccountSeed,
+      },
+      this.authSecretStorage,
+    );
   };
 }
 

packages/jazz-auth-clerk/src/tests/types.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { isClerkCredentials } from "../types";
+
+describe("isClerkCredentials", () => {
+  it.each([
+    {
+      metadata: {
+        jazzAccountID: "123",
+        jazzAccountSecret: "456",
+        jazzAccountSeed: [1, 2, 3],
+      },
+      description: "full credentials",
+    },
+    {
+      metadata: {
+        jazzAccountID: "123",
+        jazzAccountSecret: "456",
+      },
+      description: "missing jazzAccountSeed",
+    },
+  ])("succeeds for valid credentials: $description", ({ metadata }) => {
+    expect(isClerkCredentials(metadata)).toBe(true);
+  });
+
+  it.each([
+    {
+      metadata: {},
+      description: "empty object",
+    },
+    {
+      metadata: undefined,
+      description: "undefined",
+    },
+    {
+      metadata: {
+        jazzAccountSecret: "456",
+      },
+      description: "missing jazzAccountID",
+    },
+    {
+      metadata: {
+        jazzAccountID: "123",
+      },
+      description: "missing jazzAccountSecret",
+    },
+  ])("fails for invalid credentials: $description", ({ metadata }) => {
+    expect(isClerkCredentials(metadata)).toBe(false);
+  });
+});

packages/jazz-auth-clerk/src/types.ts

@@ -1,3 +1,6 @@
+import { AgentSecret } from "cojson";
+import { Account, ID } from "jazz-tools";
+
 export type MinimalClerkClient = {
   user:
     | {
@@ -21,3 +24,19 @@ export type MinimalClerkClient = {
   signOut: () => Promise<void>;
   addListener: (listener: (data: unknown) => void) => void;
 };
+
+export type ClerkCredentials = {
+  jazzAccountID: ID<Account>;
+  jazzAccountSecret: AgentSecret;
+  jazzAccountSeed?: number[];
+};
+
+/**
+ * Checks if the Clerk user metadata contains the necessary credentials for Jazz auth.
+ * **Note**: It does not validate the credentials, only checks if the necessary fields are present in the metadata object.
+ */
+export function isClerkCredentials(
+  data: NonNullable<MinimalClerkClient["user"]>["unsafeMetadata"] | undefined,
+): data is ClerkCredentials {
+  return !!data && "jazzAccountID" in data && "jazzAccountSecret" in data;
+}

packages/jazz-browser/src/BrowserContextManager.ts

@@ -26,6 +26,7 @@ export type JazzContextManagerProps<Acc extends Account> = {
 export class JazzBrowserContextManager<
   Acc extends Account,
 > extends JazzContextManager<Acc, JazzContextManagerProps<Acc>> {
+  // TODO: When the storage changes, if the user is changed, update the context
   getKvStore() {
     if (typeof window === "undefined") {
       // To handle running in SSR

packages/jazz-browser/src/index.ts

@@ -15,6 +15,8 @@ setupInspector();
 export * from "./createBrowserContext.js";
 export * from "./BrowserContextManager.js";
 
+export { LocalStorageKVStore } from "./auth/LocalStorageKVStore.js";
+
 /** @category Invite Links */
 export function createInviteLink<C extends CoValue>(
   value: C,

packages/jazz-nodejs/src/index.ts

@@ -1,4 +1,4 @@
-import { AgentSecret, LocalNode } from "cojson";
+import { AgentSecret, CryptoProvider, LocalNode } from "cojson";
 import { WasmCrypto } from "cojson/crypto/WasmCrypto";
 import {
   Account,
@@ -16,6 +16,7 @@ type WorkerOptions<Acc extends Account> = {
   syncServer?: string;
   WebSocket?: typeof WebSocket;
   AccountSchema?: AccountClass<Acc>;
+  crypto?: CryptoProvider;
 };
 
 /** @category Context Creation */
@@ -60,7 +61,7 @@ export async function startWorker<Acc extends Account>(
     // TODO: locked sessions similar to browser
     sessionProvider: randomSessionProvider,
     peersToLoadFrom: [wsPeer.peer],
-    crypto: await WasmCrypto.create(),
+    crypto: options.crypto ?? (await WasmCrypto.create()),
   });
 
   const account = context.account as Acc;

packages/jazz-react-auth-clerk/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "cojson": "workspace:*",
     "jazz-auth-clerk": "workspace:*",
+    "jazz-browser": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*"
   },

packages/jazz-react-auth-clerk/src/index.tsx

@@ -1,11 +1,17 @@
-import { JazzClerkAuth, type MinimalClerkClient } from "jazz-auth-clerk";
+import {
+  JazzClerkAuth,
+  type MinimalClerkClient,
+  isClerkCredentials,
+} from "jazz-auth-clerk";
+import { LocalStorageKVStore } from "jazz-browser";
 import {
   JazzProvider,
   JazzProviderProps,
   useAuthSecretStorage,
   useJazzContext,
 } from "jazz-react";
-import { useEffect, useMemo } from "react";
+import { AuthSecretStorage, InMemoryKVStore, KvStoreContext } from "jazz-tools";
+import { useEffect, useMemo, useState } from "react";
 
 function useJazzClerkAuth(clerk: MinimalClerkClient) {
   const context = useJazzContext();
@@ -39,6 +45,28 @@ function RegisterClerkAuth(props: {
 export const JazzProviderWithClerk = (
   props: { clerk: MinimalClerkClient } & JazzProviderProps,
 ) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  setupKvStore();
+  const secretStorage = new AuthSecretStorage();
+
+  useEffect(() => {
+    if (!isClerkCredentials(props.clerk.user?.unsafeMetadata)) {
+      setIsLoaded(true);
+      return;
+    }
+
+    JazzClerkAuth.loadClerkAuthData(
+      props.clerk.user.unsafeMetadata,
+      secretStorage,
+    ).then(() => {
+      setIsLoaded(true);
+    });
+  }, []);
+
+  if (!isLoaded) {
+    return null;
+  }
+
   return (
     <JazzProvider {...props} onLogOut={props.clerk.signOut}>
       <RegisterClerkAuth clerk={props.clerk}>
@@ -47,3 +75,11 @@ export const JazzProviderWithClerk = (
     </JazzProvider>
   );
 };
+
+function setupKvStore() {
+  KvStoreContext.getInstance().initialize(
+    typeof window === "undefined"
+      ? new InMemoryKVStore()
+      : new LocalStorageKVStore(),
+  );
+}

packages/jazz-react-auth-clerk/src/tests/JazzProviderWithClerk.test.tsx

@@ -1,9 +1,9 @@
 // @vitest-environment happy-dom
 
 import { act, render, waitFor } from "@testing-library/react";
-import type { MinimalClerkClient } from "jazz-auth-clerk";
+import { JazzClerkAuth, type MinimalClerkClient } from "jazz-auth-clerk";
 import { AuthSecretStorage, InMemoryKVStore, KvStoreContext } from "jazz-tools";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockInstance, beforeEach, describe, expect, it, vi } from "vitest";
 import { JazzProviderWithClerk } from "../index";
 
 vi.mock("jazz-react", async (importOriginal) => {
@@ -27,12 +27,24 @@ vi.mock("jazz-react", async (importOriginal) => {
   };
 });
 
+vi.mock("jazz-auth-clerk", async (importOriginal) => {
+  const { JazzClerkAuth } = await import("jazz-auth-clerk");
+
+  JazzClerkAuth.loadClerkAuthData = vi.fn().mockResolvedValue(undefined);
+
+  return {
+    ...(await importOriginal<typeof import("jazz-auth-clerk")>()),
+    JazzClerkAuth,
+  };
+});
+
 const authSecretStorage = new AuthSecretStorage();
 KvStoreContext.getInstance().initialize(new InMemoryKVStore());
 
 describe("JazzProviderWithClerk", () => {
   beforeEach(async () => {
     await authSecretStorage.clear();
+    vi.clearAllMocks();
   });
 
   const setup = (
@@ -94,4 +106,60 @@ describe("JazzProviderWithClerk", () => {
       },
     });
   });
+
+  it("should load the clerk credentials when the user is authenticated", async () => {
+    render(
+      <JazzProviderWithClerk
+        clerk={{
+          addListener: vi.fn(),
+          signOut: vi.fn(),
+          user: {
+            update: vi.fn(),
+            unsafeMetadata: {
+              jazzAccountID: "test",
+              jazzAccountSecret: "test",
+              jazzAccountSeed: "test",
+            },
+            firstName: "Test",
+            lastName: "User",
+            username: "test",
+            fullName: "Test User",
+            id: "test",
+            primaryEmailAddress: {
+              emailAddress: "test@test.com",
+            },
+          },
+        }}
+        sync={{ peer: "wss://test.jazz.tools" }}
+      >
+        <div data-testid="test-child">Test Content</div>
+      </JazzProviderWithClerk>,
+    );
+
+    expect(JazzClerkAuth.loadClerkAuthData).toHaveBeenCalledWith(
+      {
+        jazzAccountID: "test",
+        jazzAccountSecret: "test",
+        jazzAccountSeed: "test",
+      },
+      authSecretStorage,
+    );
+  });
+
+  it("should not load the clerk credentials when the user is not authenticated", async () => {
+    render(
+      <JazzProviderWithClerk
+        clerk={{
+          addListener: vi.fn(),
+          signOut: vi.fn(),
+          user: null,
+        }}
+        sync={{ peer: "wss://test.jazz.tools" }}
+      >
+        <div data-testid="test-child">Test Content</div>
+      </JazzProviderWithClerk>,
+    );
+
+    expect(JazzClerkAuth.loadClerkAuthData).not.toHaveBeenCalledWith();
+  });
 });

packages/jazz-react/src/provider.tsx

@@ -47,7 +47,8 @@ export function JazzProvider<Acc extends Account = RegisteredAccount>({
           defaultProfileName,
           onLogOut: onLogOutRefCallback,
           onAnonymousAccountDiscarded: onAnonymousAccountDiscardedRefCallback,
-        };
+        } satisfies JazzContextManagerProps<Acc>;
+
         if (contextManager.propsChanged(props)) {
           contextManager.createContext(props).catch((error) => {
             console.error("Error creating Jazz browser context:", error);

packages/jazz-tools/src/implementation/ContextManager.ts

@@ -14,7 +14,7 @@ export type JazzContextManagerAuthProps = {
 
 export type JazzContextManagerBaseProps<Acc extends Account> = {
   onAnonymousAccountDiscarded?: (anonymousAccount: Acc) => Promise<void>;
-  onLogOut?: () => void;
+  onLogOut?: () => void | Promise<unknown>;
 };
 
 type PlatformSpecificAuthContext<Acc extends Account> = {
@@ -96,8 +96,8 @@ export class JazzContextManager<
       return;
     }
 
+    await this.props.onLogOut?.();
     await this.context.logOut();
-    this.props.onLogOut?.();
     return this.createContext(this.props);
   };
 

starters/react-passkey-auth/src/App.tsx

@@ -13,9 +13,7 @@ function App() {
       <header>
         <nav className="container flex justify-between items-center py-3">
           {isAuthenticated ? (
-            <span>
-              You're logged in as <strong>{me?.profile?.name}</strong>
-            </span>
+            <span>You're logged in.</span>
           ) : (
             <span>Authenticate to share the data with another device.</span>
           )}
@@ -26,7 +24,10 @@ function App() {
         <Logo />
 
         <div className="text-center">
-          <h1>Welcome{me?.profile.name ? <>, {me?.profile.name}</> : ""}!</h1>
+          <h1>
+            Welcome{me?.profile.firstName ? <>, {me?.profile.firstName}</> : ""}
+            !
+          </h1>
           {!!me?.root.age && (
             <p>As of today, you are {me.root.age} years old.</p>
           )}

starters/react-passkey-auth/src/Form.tsx

@@ -9,15 +9,15 @@ export function Form() {
     <div className="grid gap-4 border p-8">
       <div className="flex items-center gap-3">
         <label htmlFor="firstName" className="sm:w-32">
-          Name
+          First name
         </label>
         <input
           type="text"
           id="firstName"
-          placeholder="Enter your name here..."
+          placeholder="Enter your first name here..."
           className="border border-stone-300 rounded shadow-sm py-1 px-2 flex-1"
-          value={me.profile.name || ""}
-          onChange={(e) => (me.profile.name = e.target.value)}
+          value={me.profile.firstName || ""}
+          onChange={(e) => (me.profile.firstName = e.target.value)}
         />
       </div>
 

starters/react-passkey-auth/tests/starter.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test("home page loads", async ({ page }) => {
   await page.goto("/");
-  await expect(page.getByText("Welcome, Anonymous user!")).toBeVisible();
+  await expect(page.getByText("Welcome!")).toBeVisible();
 
   await page.getByLabel("Name").fill("Bob");
   await expect(page.getByText("Welcome, Bob!")).toBeVisible();

tests/cloudflare-workers/.gitignore

@@ -0,0 +1,172 @@
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+
+# wrangler project
+
+.dev.vars
+.wrangler/

tests/cloudflare-workers/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "cloudflare-workers",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler deploy",
+		"dev": "wrangler dev",
+		"start": "wrangler dev",
+		"test": "vitest --watch --root ../../ --project cloudflare-workers",
+		"cf-typegen": "wrangler types"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-types": "^4.20250214.0",
+		"execa": "^9.5.2",
+		"typescript": "^5.5.2",
+		"wrangler": "^3.109.2"
+	},
+	"dependencies": {
+		"cojson": "workspace:*",
+		"cojson-transport-ws": "workspace:*",
+		"hono": "^4.7.2",
+		"jazz-nodejs": "workspace:*",
+		"jazz-tools": "workspace:*"
+	}
+}

tests/cloudflare-workers/src/index.ts

@@ -0,0 +1,62 @@
+import { createWebSocketPeer } from "cojson-transport-ws";
+import { PureJSCrypto } from "cojson/crypto/PureJSCrypto";
+import { Hono } from "hono";
+import { startWorker } from "jazz-nodejs";
+import { CoMap, co } from "jazz-tools";
+import { Account } from "jazz-tools";
+
+const app = new Hono();
+
+class MyAccountRoot extends CoMap {
+  text = co.string;
+}
+
+class MyAccount extends Account {
+  root = co.ref(MyAccountRoot);
+
+  migrate(): void {
+    if (this.root === undefined) {
+      this.root = MyAccountRoot.create({
+        text: "Hello world!",
+      });
+    }
+  }
+}
+
+const syncServer = "wss://cloud.jazz.tools/?key=jazz@jazz.tools";
+
+const crypto = await PureJSCrypto.create();
+
+app.get("/", async (c) => {
+  const peer = createWebSocketPeer({
+    id: "upstream",
+    websocket: new WebSocket(syncServer),
+    role: "server",
+  });
+
+  const account = await Account.create({
+    creationProps: { name: "Cloudflare test account" },
+    peersToLoadFrom: [peer],
+    crypto,
+  });
+
+  const admin = await startWorker({
+    accountID: account.id,
+    accountSecret: account._raw.core.node.account.agentSecret,
+    AccountSchema: MyAccount,
+    syncServer,
+    crypto,
+  });
+
+  await admin.worker.waitForAllCoValuesSync();
+
+  await admin.done();
+
+  const { root } = await admin.worker.ensureLoaded({ root: {} });
+
+  return c.json({
+    text: root.text,
+  });
+});
+
+export default app;

tests/cloudflare-workers/tests/integration.test.ts

@@ -0,0 +1,47 @@
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+import { execa } from "execa";
+import { expect, test } from "vitest";
+
+// @ts-ignore
+const packageRoot = join(dirname(fileURLToPath(import.meta.url)), "..");
+const projectRoot = join(packageRoot, "../..");
+
+test("server responds with hello world", async () => {
+  // Start the dev server
+  const server = execa(
+    join(projectRoot, "node_modules/.bin/wrangler"),
+    ["dev"],
+    {
+      cwd: packageRoot,
+      stderr: "inherit",
+    },
+  );
+
+  try {
+    // Wait for server to be ready
+    const url = await new Promise<URL>((resolve, reject) => {
+      server.stdout?.on("data", (data) => {
+        console.log(data.toString());
+        if (data.toString().includes("Ready on http://localhost:")) {
+          resolve(new URL(data.toString().split("Ready on ")[1].trim()));
+        }
+      });
+
+      // Reject if server fails to start within 10 seconds
+      setTimeout(() => {
+        reject(new Error("Server failed to start within timeout"));
+      }, 10000);
+    });
+
+    // Make request to server
+    const response = await fetch(url);
+    const data = await response.json();
+
+    // Verify response
+    expect(data).toEqual({ text: "Hello world!" });
+  } finally {
+    // Ensure server is killed even if test fails
+    server.kill();
+  }
+});

tests/cloudflare-workers/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2021",
+    /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "lib": ["es2021"],
+    /* Specify what JSX code is generated. */
+    "jsx": "react-jsx",
+
+    /* Specify what module code is generated. */
+    "module": "es2022",
+    /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "Bundler",
+    /* Specify type package names to be included without being referenced in a source file. */
+    "types": ["@cloudflare/workers-types/2023-07-01"],
+    /* Enable importing .json files */
+    "resolveJsonModule": true,
+
+    /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+    "allowJs": true,
+    /* Enable error reporting in type-checked JavaScript files. */
+    "checkJs": false,
+
+    /* Disable emitting files from a compilation. */
+    "noEmit": true,
+
+    /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "isolatedModules": true,
+    /* Allow 'import x from y' when a module doesn't have a default export. */
+    "allowSyntheticDefaultImports": true,
+    /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true,
+
+    /* Enable all strict type-checking options. */
+    "strict": true,
+
+    /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true
+  },
+  "exclude": ["test"],
+  "include": ["worker-configuration.d.ts", "src/**/*.ts"]
+}

tests/cloudflare-workers/worker-configuration.d.ts

@@ -0,0 +1,3 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
+interface Env {}

tests/cloudflare-workers/wrangler.jsonc

@@ -0,0 +1,47 @@
+/**
+ * For more details on how to configure Wrangler, refer to:
+ * https://developers.cloudflare.com/workers/wrangler/configuration/
+ */
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "cloudflare-workers",
+  "main": "src/index.ts",
+  "compatibility_date": "2025-02-04",
+  "observability": {
+    "enabled": true
+  }
+  /**
+   * Smart Placement
+   * Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+   */
+  // "placement": { "mode": "smart" },
+
+  /**
+   * Bindings
+   * Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
+   * databases, object storage, AI inference, real-time communication and more.
+   * https://developers.cloudflare.com/workers/runtime-apis/bindings/
+   */
+
+  /**
+   * Environment Variables
+   * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+   */
+  // "vars": { "MY_VARIABLE": "production_value" },
+  /**
+   * Note: Use secrets to store sensitive data.
+   * https://developers.cloudflare.com/workers/configuration/secrets/
+   */
+
+  /**
+   * Static Assets
+   * https://developers.cloudflare.com/workers/static-assets/binding/
+   */
+  // "assets": { "directory": "./public/", "binding": "ASSETS" },
+
+  /**
+   * Service Bindings (communicate between multiple Workers)
+   * https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
+   */
+  // "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
+}

tests/e2e/src/app.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { Link, RouterProvider, createBrowserRouter } from "react-router-dom";
 import { AuthAndJazz } from "./jazz";
+import { ConcurrentChanges } from "./pages/ConcurrentChanges";
 import { FileStreamTest } from "./pages/FileStream";
 import { InboxPage } from "./pages/Inbox";
 import { ResumeSyncState } from "./pages/ResumeSyncState";
@@ -31,6 +32,9 @@ function Index() {
       <li>
         <Link to="/write-only">Write Only</Link>
       </li>
+      <li>
+        <Link to="/concurrent-changes">Concurrent Changes</Link>
+      </li>
       <li>
         <Link to="/inbox">Inbox</Link>
       </li>
@@ -67,6 +71,10 @@ const router = createBrowserRouter([
     path: "/inbox",
     element: <InboxPage />,
   },
+  {
+    path: "/concurrent-changes",
+    element: <ConcurrentChanges />,
+  },
   {
     path: "/",
     element: <Index />,

tests/e2e/src/pages/ConcurrentChanges.tsx

@@ -0,0 +1,75 @@
+import { useAccount, useCoState } from "jazz-react";
+import { CoFeed, Group, ID, co } from "jazz-tools";
+import { useEffect, useState } from "react";
+
+export class Counter extends CoFeed.Of(co.json<{ value: number }>()) {}
+
+function getIdParam() {
+  const url = new URL(window.location.href);
+  return (url.searchParams.get("id") as ID<Counter>) ?? undefined;
+}
+
+export function ConcurrentChanges() {
+  const [id, setId] = useState(getIdParam);
+  const counter = useCoState(Counter, id, []);
+  const { me } = useAccount();
+
+  useEffect(() => {
+    if (id) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("id", id);
+      history.pushState({}, "", url.toString());
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (counter?.byMe) {
+      count(counter);
+    }
+  }, [counter?.byMe?.value !== undefined]);
+
+  const createCounter = () => {
+    if (!me) return;
+
+    const group = Group.create();
+
+    group.addMember("everyone", "writer");
+
+    const id = Counter.create([{ value: 0 }], group).id;
+
+    setId(id);
+
+    window.open(`?id=${id}`, "_blank");
+  };
+
+  const done = Object.entries(counter?.perSession ?? {}).every(
+    ([_, entry]) => entry.value.value === 300,
+  );
+
+  return (
+    <div>
+      <h1>Concurrent Changes</h1>
+      <p>
+        {Object.entries(counter?.perSession ?? {}).map(([sessionId, entry]) => (
+          <div key={sessionId}>
+            <p>{sessionId}</p>
+            <p data-testid="value">{entry.value.value}</p>
+          </div>
+        ))}
+      </p>
+      <button onClick={createCounter}>Create a new value!</button>
+      {done && <p data-testid="done">Done!</p>}
+    </div>
+  );
+}
+
+async function count(counter: Counter) {
+  if (!counter.byMe) return;
+
+  let value = counter.byMe.value?.value ?? 0;
+
+  while (value < 300) {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    counter.push({ value: ++value });
+  }
+}

tests/e2e/tests/ConcurrentChanges.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Concurrent Changes", () => {
+  test("should complete the task without incurring on InvalidSignature errors", async ({
+    page,
+    context,
+  }) => {
+    await page.goto("/concurrent-changes");
+    const newPage = await context.newPage();
+
+    await page.getByRole("button", { name: "Create a new value!" }).click();
+
+    await newPage.goto(page.url());
+
+    await page.getByTestId("done").waitFor();
+
+    await newPage.close();
+
+    const errorLogs: string[] = [];
+
+    page.on("console", (message) => {
+      if (message.type() === "error") {
+        errorLogs.push(message.text());
+      }
+    });
+
+    await page.reload();
+
+    await expect(page.getByTestId("done")).toBeVisible();
+
+    expect(
+      errorLogs.find((log) => log.includes("InvalidSignature")),
+    ).toBeUndefined();
+  });
+});

vite.config.ts

@@ -4,7 +4,11 @@ import { defineConfig } from "vitest/config";
 export default defineConfig({
   root: "./",
   test: {
-    workspace: ["packages/*", "tests/browser-integration"],
+    workspace: [
+      "packages/*",
+      "tests/browser-integration",
+      "tests/cloudflare-workers",
+    ],
     coverage: {
       enabled: false,
       provider: "istanbul",