Chore: Add changesets to bump Npm

.changeset/pink-cheetahs-train.md

@@ -0,0 +1,5 @@
+---
+"jazz-react-auth-clerk": patch
+---
+
+Document usage in readme

.changeset/smooth-cows-own.md

@@ -0,0 +1,5 @@
+---
+"jazz-browser-auth-clerk": patch
+---
+
+Document usage in readme

homepage/homepage/components/home/ChatDemoSection.tsx

@@ -63,15 +63,11 @@ export function ChatDemoSection() {
 
     const isLocal = window.location.hostname === "localhost";
 
-    const url1 = isLocal
-      ? "http://localhost:5173"
-      : "https://jazz-chat-1.vercel.app";
-
     if (chatId) {
       const shareServer = isLocal
         ? "http://localhost:5173"
         : "https://chat.jazz.tools";
-      const url = `${shareServer}/#${chatId}`;
+      const url = `${shareServer}/${chatId}`;
       setShareUrl(url);
 
       QRCode.toDataURL(url, {
@@ -83,7 +79,10 @@ export function ChatDemoSection() {
       return; // Once the chatId is set, we don't need to listen for messages anymore
     }
 
-    setServer1(url1 + `?user=${user1}`);
+    setServer1(
+      (isLocal ? "http://localhost:5173" : "https://jazz-chat-1.vercel.app") +
+        `?user=${user1}`,
+    );
     setServer2(
       (isLocal ? "http://localhost:5174" : "https://jazz-chat-2.vercel.app") +
         `?user=${user2}`,
@@ -96,8 +95,8 @@ export function ChatDemoSection() {
     const listener = (e: MessageEvent) => {
       const isValidOrigin = e.origin === server1Url.origin;
 
-      if (e.data.type === "chat-load" && isValidOrigin && e.data.id) {
-        setChatId(e.data.id);
+      if (e.data.type === "navigate" && isValidOrigin) {
+        setChatId(new URL(e.data.url).hash);
       }
     };
     window.addEventListener("message", listener);

packages/jazz-browser-auth-clerk/README.md

@@ -2,40 +2,30 @@
 
 This package provides a [Clerk-based](https://clerk.com/) authentication strategy for Jazz.
 
+Looking for a React integration? Check out [`jazz-react-auth-clerk`](https://www.npmjs.com/package/jazz-react-auth-clerk).
+
 ## Usage
 
-`useJazzClerkAuth` is a hook that returns a `JazzAuth` object and a `JazzAuthState` object. Provide a Clerk instance to `useJazzClerkAuth`, and it will return the appropriate `JazzAuth` object. Once authenticated, authentication will persist across page reloads, even if the device is offline.
+`BrowserClerkAuth` is a class that provides a `JazzAuth` object. Provide a Clerk instance to `BrowserClerkAuth`, and it will return the appropriate `JazzAuth` object. Once authenticated, authentication will persist across page reloads, even if the device is offline.
 
 
 From [the example chat app](https://github.com/gardencmp/jazz/tree/main/examples/chat-clerk):
 
-```typescript
-import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+```ts
+import { BrowserClerkAuth } from "jazz-browser-auth-clerk";
 
-const Jazz = createJazzReactApp();
-export const { useAccount, useCoState } = Jazz;
+// ...
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk);
-
-  return (
-    <>
-      {state.errors.map((error) => (
-        <div key={error}>{error}</div>
-      ))}
-      {auth ? (
-        <Jazz.Provider
-          auth={auth}
-          peer="wss://cloud.jazz.tools/?key=chat-example-jazz-clerk@gcmp.io"
-        >
-          {children}
-        </Jazz.Provider>
-      ) : (
-        <SignInButton />
-      )}
-    </>
-  );
-}
+const auth = new BrowserClerkAuth(
+  {
+    onError: (error) => {
+      void clerk.signOut();
+      setState((state) => ({
+        ...state,
+        errors: [...state.errors, error.toString()],
+      }));
+    },
+  },
+  clerk,
+);
 ```

packages/jazz-react-auth-clerk/README.md

@@ -1,5 +1,54 @@
-# `jazz-browser-media-images`
+# `jazz-react-auth-clerk`
 
-This is an optional add-on for `jazz-browser` or `jazz-react` that provides support for creating `ImageDefinition`-compatible image sets from images provided as `File` or `Blob` objects.
+This package provides a [Clerk-based](https://clerk.com/) authentication strategy for Jazz's React bindings.
 
-In particular, it implements multi-resolution resizing based on `pica`.
+## Usage
+
+`useJazzClerkAuth` is a hook that returns a `JazzAuth` object and a `JazzAuthState` object. Provide a Clerk instance to `useJazzClerkAuth`, and it will return the appropriate `JazzAuth` object. Once authenticated, authentication will persist across page reloads, even if the device is offline.
+
+
+See the full [minimal example app](https://github.com/gardencmp/jazz/tree/main/examples/minimal-auth-clerk) for a complete example.
+
+```tsx
+import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
+import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+const Jazz = createJazzReactApp();
+export const { useAccount, useCoState } = Jazz;
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const clerk = useClerk();
+  const [auth, state] = useJazzClerkAuth(clerk);
+
+  return (
+    <>
+      {state?.errors?.map((error) => (
+        <div key={error}>{error}</div>
+      ))}
+      {clerk.user && auth ? (
+        <Jazz.Provider
+          auth={auth}
+          peer="wss://cloud.jazz.tools/?key=your-email-address"
+        >
+          {children}
+        </Jazz.Provider>
+      ) : (
+        <SignInButton />
+      )}
+    </>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+      <JazzAndAuth>
+        <App />
+      </JazzAndAuth>
+    </ClerkProvider>
+  </StrictMode>,
+);
+
+```