docs: add docs about worker storage

Version Packages

.changeset/breezy-cats-yawn.md

@@ -0,0 +1,5 @@
+---
+"jazz-nodejs": patch
+---
+
+Add storage peer option

biome.json

@@ -42,6 +42,15 @@
     }
   },
   "overrides": [
+    {
+      "include": ["**/package.json"],
+      "linter": {
+        "enabled": false
+      },
+      "formatter": {
+        "enabled": false
+      }
+    },
     {
       "include": ["packages/**/src/**"],
       "linter": {

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,22 @@
 # chat-rn-clerk
 
+## 1.0.63
+
+### Patch Changes
+
+- jazz-react-native@0.9.22
+- jazz-react-native-auth-clerk@0.9.22
+
+## 1.0.62
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-react-native@0.9.21
+  - jazz-react-native-auth-clerk@0.9.21
+  - jazz-react-native-media-images@0.9.21
+
 ## 1.0.61
 
 ### Patch Changes

examples/chat-rn-clerk/app/(app)/_layout.tsx

@@ -1,9 +1,9 @@
 import { Redirect, Stack } from "expo-router";
-import { useIsAuthenticated } from "jazz-react-native";
 import React from "react";
+import { useAuth } from "../../src/auth-context";
 
 export default function HomeLayout() {
-  const isAuthenticated = useIsAuthenticated();
+  const { isAuthenticated } = useAuth();
 
   if (isAuthenticated) {
     return <Redirect href={"/chat"} />;

examples/chat-rn-clerk/app/(auth)/_layout.tsx

@@ -1,8 +1,8 @@
 import { Redirect, Stack } from "expo-router";
-import { useIsAuthenticated } from "jazz-react-native";
+import { useAuth } from "../../src/auth-context";
 
 export default function UnAuthenticatedLayout() {
-  const isAuthenticated = useIsAuthenticated();
+  const { isAuthenticated } = useAuth();
 
   if (isAuthenticated) {
     return <Redirect href={"/chat"} />;

examples/chat-rn-clerk/app/chat/index.tsx

@@ -20,15 +20,10 @@ export default function ChatScreen() {
   const navigation = useNavigation();
   const { user } = useUser();
 
-  function handleLogOut() {
-    logOut();
-    router.navigate("/");
-  }
-
   useLayoutEffect(() => {
     navigation.setOptions({
       headerTitle: "Chat",
-      headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
+      headerRight: () => <Button onPress={logOut} title="Logout" />,
     });
   }, [navigation]);
 

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",

examples/chat-rn-clerk/src/auth-context.tsx

@@ -1,20 +1,49 @@
-import { useClerk } from "@clerk/clerk-expo";
-import { JazzProviderWithClerk } from "jazz-react-native-auth-clerk";
-import React, { PropsWithChildren } from "react";
+import { useClerk, useUser } from "@clerk/clerk-expo";
+import { JazzProvider, setupKvStore } from "jazz-react-native";
+import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
+import React, { createContext, PropsWithChildren, useContext } from "react";
+import { Text, View } from "react-native";
+const AuthContext = createContext<{
+  isAuthenticated: boolean;
+  isLoading: boolean;
+}>({
+  isAuthenticated: false,
+  isLoading: true,
+});
+
+export function useAuth() {
+  return useContext(AuthContext);
+}
+
+const kvStore = setupKvStore();
 
 export function JazzAndAuth({ children }: PropsWithChildren) {
+  const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
   const clerk = useClerk();
+  const [auth, state] = useJazzClerkAuth(clerk, kvStore);
+  const isAuthenticated = Boolean(isSignedIn && isClerkLoaded && auth);
 
   return (
-    <JazzProviderWithClerk
-      clerk={clerk}
-      storage="sqlite"
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co",
-        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
-      }}
+    <AuthContext.Provider
+      value={{ isAuthenticated, isLoading: !isClerkLoaded || !auth }}
     >
-      {children}
-    </JazzProviderWithClerk>
+      {state?.errors?.length > 0 &&
+        state.errors.map((error) => (
+          <View key={error}>
+            <Text style={{ color: "red" }}>{error}</Text>
+          </View>
+        ))}
+      {auth && clerk.user ? (
+        <JazzProvider
+          auth={auth}
+          storage="sqlite"
+          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
+        >
+          {children}
+        </JazzProvider>
+      ) : (
+        children
+      )}
+    </AuthContext.Provider>
   );
 }

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,19 @@
 # chat-rn
 
+## 1.0.60
+
+### Patch Changes
+
+- jazz-react-native@0.9.22
+
+## 1.0.59
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-react-native@0.9.21
+
 ## 1.0.58
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.58",
+  "version": "1.0.60",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",

examples/chat-rn/src/App.tsx

@@ -9,7 +9,7 @@ import * as Linking from "expo-linking";
 import React, { StrictMode, useEffect, useState } from "react";
 import HandleInviteScreen from "./invite";
 
-import { JazzProvider } from "jazz-react-native";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react-native";
 import ChatScreen from "./chat";
 
 const Stack = createNativeStackNavigator();
@@ -28,6 +28,7 @@ const linking = {
 };
 
 function App() {
+  const [auth, state] = useDemoAuth();
   const [initialRoute, setInitialRoute] = useState<
     "ChatScreen" | "HandleInviteScreen"
   >("ChatScreen");
@@ -42,13 +43,16 @@ function App() {
     });
   }, []);
 
+  if (!auth) {
+    return null;
+  }
+
   return (
     <StrictMode>
       <JazzProvider
+        auth={auth}
         storage="sqlite"
-        sync={{
-          peer: "wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co",
-        }}
+        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
       >
         <NavigationContainer linking={linking} ref={navigationRef}>
           <Stack.Navigator initialRouteName={initialRoute}>
@@ -65,6 +69,9 @@ function App() {
           </Stack.Navigator>
         </NavigationContainer>
       </JazzProvider>
+      {state.state !== "signedIn" ? (
+        <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+      ) : null}
     </StrictMode>
   );
 }

examples/chat-rn/src/chat.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import * as Clipboard from "expo-clipboard";
-import { Group, ID, Profile } from "jazz-tools";
+import { Group, ID } from "jazz-tools";
 import { useEffect, useState } from "react";
 import React, {
   Button,
@@ -22,16 +22,10 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
   const [chatId, setChatId] = useState<ID<Chat>>();
   const loadedChat = useCoState(Chat, chatId, [{}]);
   const [message, setMessage] = useState("");
-  const profile = useCoState(Profile, me._refs.profile?.id, {});
-
-  function handleLogOut() {
-    setChatId(undefined);
-    logOut();
-  }
 
   useEffect(() => {
     navigation.setOptions({
-      headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
+      headerRight: () => <Button onPress={logOut} title="Logout" />,
       headerLeft: () =>
         loadedChat ? (
           <Button
@@ -137,18 +131,6 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
     <View className="flex flex-col h-full">
       {!loadedChat ? (
         <View className="flex flex-col h-full items-center justify-center">
-          <Text className="text-m font-bold mb-6">Username</Text>
-          <TextInput
-            className="rounded h-12 p-2 mb-12 w-40 border border-gray-200 block"
-            value={profile?.name ?? ""}
-            onChangeText={(value) => {
-              if (profile) {
-                profile.name = value;
-              }
-            }}
-            textAlignVertical="center"
-            onSubmitEditing={sendMessage}
-          />
           <TouchableOpacity
             onPress={createChat}
             className="bg-blue-500 p-4 rounded-md"

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,21 @@
 # chat-vue
 
+## 0.0.47
+
+### Patch Changes
+
+- jazz-browser@0.9.22
+- jazz-vue@0.9.22
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-browser@0.9.21
+  - jazz-vue@0.9.21
+
 ## 0.0.45
 
 ### Patch Changes

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "private": true,
   "type": "module",
   "scripts": {

examples/chat-vue/src/main.ts

@@ -1,4 +1,4 @@
-import { DemoAuthBasicUI, JazzProvider } from "jazz-vue";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-vue";
 import { createApp, defineComponent, h } from "vue";
 import App from "./App.vue";
 import "./index.css";
@@ -7,24 +7,26 @@ import router from "./router";
 const RootComponent = defineComponent({
   name: "RootComponent",
   setup() {
-    return () =>
+    const { authMethod, state } = useDemoAuth();
+
+    return () => [
       h(
         JazzProvider,
         {
-          sync: {
-            peer: "wss://cloud.jazz.tools/?key=vue-todo-example-jazz@garden.co",
-          },
+          auth: authMethod.value,
+          peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
         },
-        h(
-          DemoAuthBasicUI,
-          {
-            appName: "Jazz Vue Chat",
-          },
-          {
-            default: () => h(App),
-          },
-        ),
-      );
+        {
+          default: () => h(App),
+        },
+      ),
+
+      state.state !== "signedIn" &&
+        h(DemoAuthBasicUI, {
+          appName: "Jazz Chat",
+          state,
+        }),
+    ];
   },
 });
 

examples/chat/CHANGELOG.md

@@ -1,5 +1,21 @@
 # jazz-example-chat
 
+## 0.0.143
+
+### Patch Changes
+
+- jazz-browser-media-images@0.9.22
+- jazz-react@0.9.22
+
+## 0.0.142
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-browser-media-images@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.141
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.141",
+  "version": "0.0.143",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/chat/src/app.tsx

@@ -1,10 +1,11 @@
-import { getRandomUsername, inIframe, onChatLoad } from "@/util.ts";
+import { inIframe, onChatLoad } from "@/util.ts";
 import { useIframeHashRouter } from "hash-slash";
-import { JazzProvider, useAccount } from "jazz-react";
+import { useAccount } from "jazz-react";
 import { Group, ID } from "jazz-tools";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { ChatScreen } from "./chatScreen.tsx";
+import { JazzAndAuth } from "./jazz.tsx";
 import { Chat } from "./schema.ts";
 import { ThemeProvider } from "./themeProvider.tsx";
 import { AppContainer, TopBar } from "./ui.tsx";
@@ -27,15 +28,7 @@ export function App() {
   return (
     <AppContainer>
       <TopBar>
-        <input
-          type="text"
-          value={me?.profile?.name ?? ""}
-          onChange={(e) => {
-            if (!me?.profile) return;
-            me.profile.name = e.target.value;
-          }}
-          placeholder="Set username"
-        />
+        <p>{me?.profile?.name}</p>
         {!inIframe && <button onClick={logOut}>Log out</button>}
       </TopBar>
       {router.route({
@@ -46,20 +39,12 @@ export function App() {
   );
 }
 
-const url = new URL(window.location.href);
-const defaultProfileName = url.searchParams.get("user") ?? getRandomUsername();
-
 createRoot(document.getElementById("root")!).render(
   <ThemeProvider>
     <StrictMode>
-      <JazzProvider
-        sync={{
-          peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
-        }}
-        defaultProfileName={defaultProfileName}
-      >
+      <JazzAndAuth>
         <App />
-      </JazzProvider>
+      </JazzAndAuth>
     </StrictMode>
   </ThemeProvider>,
 );

examples/chat/src/jazz.tsx

@@ -0,0 +1,19 @@
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+
+export function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, state] = useDemoAuth();
+
+  return (
+    <>
+      <JazzProvider
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
+      >
+        {children}
+      </JazzProvider>
+      {state.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+      )}
+    </>
+  );
+}

examples/chat/src/util.ts

@@ -15,20 +15,3 @@ export function onChatLoad(chat: Chat) {
 }
 
 export const inIframe = window.self !== window.top;
-
-const animals = [
-  "elephant",
-  "penguin",
-  "giraffe",
-  "octopus",
-  "kangaroo",
-  "dolphin",
-  "cheetah",
-  "koala",
-  "platypus",
-  "pangolin",
-];
-
-export function getRandomUsername() {
-  return `Anonymous ${animals[Math.floor(Math.random() * animals.length)]}`;
-}

examples/chat/tests/chat.spec.ts

@@ -1,35 +1,48 @@
 import { test } from "@playwright/test";
 import { ChatPage } from "./pages/ChatPage";
+import { LoginPage } from "./pages/LoginPage";
 
-test("chat between two users", async ({ page: marioPage, browser }) => {
-  const context = await browser.newContext();
-  const luigiPage = await context.newPage();
+test("chat between two users", async ({ page }) => {
+  const loginPage = new LoginPage(page);
 
-  await marioPage.goto("/");
+  const mario = "S. Mario";
+  const luigi = "Luigi";
 
-  const marioChat = new ChatPage(marioPage);
-  const luigiChat = new ChatPage(luigiPage);
+  await loginPage.goto();
+  await loginPage.fillUsername(mario);
+  await loginPage.signup();
 
-  await marioChat.setUsername("Mario");
+  const chatPage = new ChatPage(page);
 
   const message1ByMario = "Hello Luigi, are you ready to save the princess?";
 
-  await marioChat.sendMessage(message1ByMario);
-  await marioChat.expectMessageRow(message1ByMario);
+  await chatPage.sendMessage(message1ByMario);
+  await chatPage.expectMessageRow(message1ByMario);
 
-  const roomURL = marioPage.url();
-  await luigiPage.goto(roomURL);
+  const roomURL = page.url();
 
-  await luigiChat.setUsername("Luigi");
+  await chatPage.logout();
 
-  await luigiChat.expectMessageRow(message1ByMario);
+  await loginPage.expectLoaded();
+
+  await loginPage.fillUsername(luigi);
+  await loginPage.signup();
+
+  await page.goto(roomURL);
+
+  await chatPage.expectMessageRow(message1ByMario);
 
   const message2ByLuigi =
     "No, I'm not ready yet. I'm still trying to find the key to the castle.";
 
-  await luigiChat.sendMessage(message2ByLuigi);
-  await luigiChat.expectMessageRow(message2ByLuigi);
+  await chatPage.sendMessage(message2ByLuigi);
+  await chatPage.expectMessageRow(message2ByLuigi);
 
-  await marioChat.expectMessageRow(message1ByMario);
-  await luigiChat.expectMessageRow(message2ByLuigi);
+  await chatPage.logout();
+  await loginPage.loginAs(mario);
+
+  await page.goto(roomURL);
+
+  await chatPage.expectMessageRow(message1ByMario);
+  await chatPage.expectMessageRow(message2ByLuigi);
 });

examples/chat/tests/pages/ChatPage.ts

@@ -4,7 +4,7 @@ export class ChatPage {
   readonly page: Page;
   readonly messageInput: Locator;
   readonly logoutButton: Locator;
-  readonly usernameInput: Locator;
+
   constructor(page: Page) {
     this.page = page;
     this.messageInput = page.getByRole("textbox", {
@@ -13,11 +13,6 @@ export class ChatPage {
     this.logoutButton = page.getByRole("button", {
       name: "Log out",
     });
-    this.usernameInput = page.getByPlaceholder("Set username");
-  }
-
-  async setUsername(username: string) {
-    await this.usernameInput.fill(username);
   }
 
   async sendMessage(message: string) {

examples/chat/tests/pages/LoginPage.ts

@@ -0,0 +1,40 @@
+import { Locator, Page, expect } from "@playwright/test";
+
+export class LoginPage {
+  readonly page: Page;
+  readonly usernameInput: Locator;
+  readonly signupButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.usernameInput = page.getByRole("textbox");
+    this.signupButton = page.getByRole("button", {
+      name: "Sign up",
+    });
+  }
+
+  async goto() {
+    this.page.goto("/");
+  }
+
+  async fillUsername(value: string) {
+    await this.usernameInput.clear();
+    await this.usernameInput.fill(value);
+  }
+
+  async loginAs(value: string) {
+    await this.page
+      .getByRole("button", {
+        name: value,
+      })
+      .click();
+  }
+
+  async signup() {
+    await this.signupButton.click();
+  }
+
+  async expectLoaded() {
+    await expect(this.signupButton).toBeVisible();
+  }
+}

examples/clerk/CHANGELOG.md

@@ -1,5 +1,21 @@
 # minimal-auth-clerk
 
+## 0.0.42
+
+### Patch Changes
+
+- jazz-react@0.9.22
+- jazz-react-auth-clerk@0.9.22
+
+## 0.0.41
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-react@0.9.21
+  - jazz-react-auth-clerk@0.9.21
+
 ## 0.0.40
 
 ### Patch Changes

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.40",
+  "version": "0.0.42",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.9.20",
+    "jazz-react-auth-clerk": "workspace:0.9.22",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/clerk/src/App.tsx

@@ -1,25 +1,13 @@
-import { SignInButton } from "@clerk/clerk-react";
-import { useAccount, useIsAuthenticated } from "jazz-react";
+import { useAccount } from "jazz-react";
 
 function App() {
   const { me, logOut } = useAccount();
 
-  const isAuthenticated = useIsAuthenticated();
-
-  if (isAuthenticated) {
-    return (
-      <div className="container">
-        <h1>You're logged in</h1>
-        <p>Welcome back, {me?.profile?.name}</p>
-        <button onClick={() => logOut()}>Logout</button>
-      </div>
-    );
-  }
-
   return (
     <div className="container">
-      <h1>You're not logged in</h1>
-      <SignInButton />
+      <h1>You're logged in</h1>
+      <p>Welcome back, {me?.profile?.name}</p>
+      <button onClick={() => logOut()}>Logout</button>
     </div>
   );
 }

examples/clerk/src/index.css

@@ -62,7 +62,7 @@ button {
 }
 
 .container {
-  max-width: 400px;
+  max-width: 200px;
   margin: 0 auto;
   padding: 0 1rem;
   display: flex;

examples/clerk/src/main.tsx

@@ -1,9 +1,10 @@
-import { ClerkProvider, useClerk } from "@clerk/clerk-react";
+import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
+import { useJazzClerkAuth } from "jazz-react-auth-clerk";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { JazzProviderWithClerk } from "jazz-react-auth-clerk";
+import { JazzProvider } from "jazz-react";
 
 // Import your publishable key
 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
@@ -12,28 +13,35 @@ if (!PUBLISHABLE_KEY) {
   throw new Error("Add your Clerk publishable key to the .env.local file");
 }
 
-function JazzProvider({ children }: { children: React.ReactNode }) {
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
   const clerk = useClerk();
+  const [auth, state] = useJazzClerkAuth(clerk);
 
   return (
-    <JazzProviderWithClerk
-      clerk={clerk}
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co",
-        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
-      }}
-    >
-      {children}
-    </JazzProviderWithClerk>
+    <main className="container">
+      {state?.errors?.map((error) => (
+        <div key={error}>{error}</div>
+      ))}
+      {clerk.user && auth ? (
+        <JazzProvider
+          auth={auth}
+          peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
+        >
+          {children}
+        </JazzProvider>
+      ) : (
+        <SignInButton />
+      )}
+    </main>
   );
 }
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-      <JazzProvider>
+      <JazzAndAuth>
         <App />
-      </JazzProvider>
+      </JazzAndAuth>
     </ClerkProvider>
   </StrictMode>,
 );

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,19 @@
 # file-share-svelte
 
+## 0.0.27
+
+### Patch Changes
+
+- jazz-svelte@0.9.22
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-svelte@0.9.21
+
 ## 0.0.25
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "private": true,
   "type": "module",
   "scripts": {

examples/file-share-svelte/src/lib/utils.ts

@@ -17,6 +17,6 @@ export function formatFileSize(bytes: number): string {
  * @param createdAt The creation date
  * @returns A unique file ID string
  */
-export function generateTempFileId(fileName: string | undefined, createdAt: Date | undefined): string {
-  return `file-${fileName ?? 'unknown'}-${createdAt?.getTime() ?? 0}`;
+export function generateTempFileId(fileName: string, createdAt: Date): string {
+  return `file-${fileName}-${createdAt.getTime()}`;
 }

examples/file-share-svelte/src/routes/+layout.svelte

@@ -14,6 +14,9 @@
   import { FileShareAccount } from '$lib/schema';
 
   let { children } = $props();
+  const auth = usePasskeyAuth({
+    appName: 'File Share'
+  });
 </script>
 
 <svelte:head>
@@ -22,16 +25,21 @@
 
 <Toaster richColors />
 
-<JazzProvider
-  AccountSchema={FileShareAccount}
-  sync={{
-    peer: "wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co",
-    when: "signedUp",
-  }}
->
-  <PasskeyAuthBasicUI appName="File Share">
+{#if auth.state.state === 'ready'}
+  <div class="fixed inset-0 flex items-center justify-center bg-gray-50/80">
+    <div class="rounded-lg bg-white p-8 shadow-lg">
+      <PasskeyAuthBasicUI state={auth.state} />
+    </div>
+  </div>
+{/if}
+{#if auth.current}
+  <JazzProvider
+    AccountSchema={FileShareAccount}
+    auth={auth.current}
+    peer="wss://cloud.jazz.tools/?key=file-share-svelte@garden.co"
+  >
     <div class="min-h-screen bg-gray-100">
       {@render children()}
     </div>
-  </PasskeyAuthBasicUI>
-</JazzProvider>
+  </JazzProvider>
+{/if}

examples/file-share-svelte/src/routes/+page.svelte

@@ -28,7 +28,7 @@
     const input = event.target as HTMLInputElement;
     const files = input.files;
 
-    if (!files || !files.length || !me.root?.sharedFiles || !me.root.publicGroup) return;
+    if (!files || !files.length || !me?.root?.sharedFiles || !me.root.publicGroup) return;
 
     const file = files[0];
     const fileName = file.name;
@@ -129,14 +129,12 @@
       {#if sharedFiles.current}
         {#if !(sharedFiles.current.length === 0 && uploadingFiles.size === 0)}
           {#each [...sharedFiles.current, ...uploadingFiles.values()] as file (generateTempFileId(file?.name, file?.createdAt))}
-            {#if file}
-              <FileItem
-                {file}
-                loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
-                onShare={shareFile}
-                onDelete={deleteFile}
-              />
-            {/if}
+            <FileItem
+              {file}
+              loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
+              onShare={shareFile}
+              onDelete={deleteFile}
+            />
           {/each}
         {:else}
           <p class="text-center text-gray-500">No files yet</p>

examples/form/CHANGELOG.md

@@ -1,5 +1,21 @@
 # form
 
+## 0.0.38
+
+### Patch Changes
+
+- jazz-browser-media-images@0.9.22
+- jazz-react@0.9.22
+
+## 0.0.37
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-browser-media-images@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.36
 
 ### Patch Changes

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.0.36",
+  "version": "0.0.38",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/form/src/main.tsx

@@ -1,10 +1,30 @@
-import { JazzProvider } from "jazz-react";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { JazzAccount } from "./schema.ts";
 
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <JazzProvider
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=form-example@garden.co"
+        AccountSchema={JazzAccount}
+      >
+        {children}
+      </JazzProvider>
+
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Form" state={authState} />
+      )}
+    </>
+  );
+}
+
 declare module "jazz-react" {
   interface Register {
     Account: JazzAccount;
@@ -13,13 +33,8 @@ declare module "jazz-react" {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzProvider
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=form-example@garden.co",
-      }}
-      AccountSchema={JazzAccount}
-    >
+    <JazzAndAuth>
       <App />
-    </JazzProvider>
+    </JazzAndAuth>
   </StrictMode>,
 );

examples/form/tests/form.spec.ts

@@ -1,7 +1,13 @@
 import { expect, test } from "@playwright/test";
+import { LoginPage } from "./pages/LoginPage";
 
 test("create and edit an order", async ({ page }) => {
-  await page.goto("/");
+  const loginPage = new LoginPage(page);
+
+  await loginPage.goto();
+  await loginPage.fillUsername("Alice");
+  await loginPage.signup();
+
   // start an order
   await page.getByRole("link", { name: "Add new order" }).click();
   await page.getByLabel("Base tea").selectOption("Oolong");

examples/form/tests/pages/LoginPage.ts

@@ -0,0 +1,40 @@
+import { Locator, Page, expect } from "@playwright/test";
+
+export class LoginPage {
+  readonly page: Page;
+  readonly usernameInput: Locator;
+  readonly signupButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.usernameInput = page.getByRole("textbox");
+    this.signupButton = page.getByRole("button", {
+      name: "Sign up",
+    });
+  }
+
+  async goto() {
+    this.page.goto("/");
+  }
+
+  async fillUsername(value: string) {
+    await this.usernameInput.clear();
+    await this.usernameInput.fill(value);
+  }
+
+  async loginAs(value: string) {
+    await this.page
+      .getByRole("button", {
+        name: value,
+      })
+      .click();
+  }
+
+  async signup() {
+    await this.signupButton.click();
+  }
+
+  async expectLoaded() {
+    await expect(this.signupButton).toBeVisible();
+  }
+}

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,21 @@
 # image-upload
 
+## 0.0.40
+
+### Patch Changes
+
+- jazz-browser-media-images@0.9.22
+- jazz-react@0.9.22
+
+## 0.0.39
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-browser-media-images@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.38
 
 ### Patch Changes

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.38",
+  "version": "0.0.40",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/image-upload/src/main.tsx

@@ -1,10 +1,30 @@
-import { JazzProvider } from "jazz-react";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { JazzAccount } from "./schema.ts";
 
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <JazzProvider
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=image-upload-example@garden.co"
+        AccountSchema={JazzAccount}
+      >
+        {children}
+      </JazzProvider>
+
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Image upload" state={authState} />
+      )}
+    </>
+  );
+}
+
 declare module "jazz-react" {
   interface Register {
     Account: JazzAccount;
@@ -13,13 +33,8 @@ declare module "jazz-react" {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzProvider
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=image-upload-example@garden.co",
-      }}
-      AccountSchema={JazzAccount}
-    >
+    <JazzAndAuth>
       <App />
-    </JazzProvider>
+    </JazzAndAuth>
   </StrictMode>,
 );

examples/inspector/CHANGELOG.md

@@ -1,5 +1,12 @@
 # jazz-example-inspector
 
+## 0.0.101
+
+### Patch Changes
+
+- Updated dependencies [14b6149]
+  - cojson-transport-ws@0.9.22
+
 ## 0.0.100
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.100",
+  "version": "0.0.101",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cojson": "workspace:0.9.19",
-    "cojson-transport-ws": "workspace:0.9.19",
+    "cojson-transport-ws": "workspace:0.9.22",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/music-player/CHANGELOG.md

@@ -1,5 +1,20 @@
 # jazz-example-musicplayer
 
+## 0.0.64
+
+### Patch Changes
+
+- jazz-react@0.9.22
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-inspector@0.9.22
+  - jazz-react@0.9.21
+
 ## 0.0.62
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.62",
+  "version": "0.0.64",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,16 +13,13 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
-    "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.9.20",
-    "jazz-tools": "workspace:0.9.20",
+    "jazz-react": "workspace:0.9.22",
+    "jazz-tools": "workspace:0.9.21",
     "jazz-inspector": "workspace:*",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",

examples/music-player/src/1_schema.ts

@@ -86,7 +86,7 @@ export class MusicaAccount extends Account {
    *  You can use it to set up the account root and any other initial CoValues you need.
    */
   migrate() {
-    if (this.root === undefined) {
+    if (!this._refs.root) {
       const ownership = { owner: this };
 
       const tracks = ListOfTracks.create([], ownership);

examples/music-player/src/2_main.tsx

@@ -11,7 +11,7 @@ import { PlayerControls } from "./components/PlayerControls";
 import "./index.css";
 
 import { MusicaAccount } from "@/1_schema";
-import { JazzProvider } from "jazz-react";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
 import { useUploadExampleData } from "./lib/useUploadExampleData";
 
 /**
@@ -54,11 +54,30 @@ function Main() {
   );
 }
 
-const peer =
-  (new URL(window.location.href).searchParams.get(
-    "peer",
-  ) as `ws://${string}`) ??
-  "wss://cloud.jazz.tools/?key=music-player-example-jazz@garden.co";
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, state] = useDemoAuth();
+
+  const peer =
+    (new URL(window.location.href).searchParams.get(
+      "peer",
+    ) as `ws://${string}`) ??
+    "wss://cloud.jazz.tools/?key=music-player-example-jazz@garden.co";
+
+  return (
+    <>
+      <JazzProvider
+        storage="indexedDB"
+        auth={auth}
+        peer={peer}
+        AccountSchema={MusicaAccount}
+      >
+        {children}
+        <JazzInspector />
+      </JazzProvider>
+      <DemoAuthBasicUI appName="Jazz Music Player" state={state} />
+    </>
+  );
+}
 
 declare module "jazz-react" {
   interface Register {
@@ -68,17 +87,8 @@ declare module "jazz-react" {
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <JazzProvider
-      sync={{
-        peer,
-        when: "signedUp", // This makes the app work in local mode when the user is anonymous
-      }}
-      storage="indexedDB"
-      AccountSchema={MusicaAccount}
-      defaultProfileName="Anonymous unicorn"
-    >
+    <JazzAndAuth>
       <Main />
-      <JazzInspector />
-    </JazzProvider>
+    </JazzAndAuth>
   </React.StrictMode>,
 );

examples/music-player/src/3_HomePage.tsx

@@ -1,17 +1,12 @@
 import { useToast } from "@/hooks/use-toast";
-import {
-  createInviteLink,
-  useAccount,
-  useCoState,
-  useIsAuthenticated,
-} from "jazz-react";
+import { createInviteLink, useAccount, useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { useNavigate, useParams } from "react-router";
 import { Playlist } from "./1_schema";
 import { createNewPlaylist, uploadMusicTracks } from "./4_actions";
 import { MediaPlayer } from "./5_useMediaPlayer";
-import { AuthButton } from "./components/AuthButton";
 import { FileUploadButton } from "./components/FileUploadButton";
+import { LogoutButton } from "./components/LogoutButton";
 import { MusicTrackRow } from "./components/MusicTrackRow";
 import { PlaylistTitleInput } from "./components/PlaylistTitleInput";
 import { SidePanel } from "./components/SidePanel";
@@ -71,8 +66,6 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
     });
   };
 
-  const isAuthenticated = useIsAuthenticated();
-
   return (
     <div className="flex flex-col h-screen text-gray-800 bg-blue-50">
       <div className="flex flex-1 overflow-hidden">
@@ -93,12 +86,12 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
                   <Button onClick={handleCreatePlaylist}>New playlist</Button>
                 </>
               )}
-              {!isRootPlaylist && isAuthenticated && (
+              {!isRootPlaylist && (
                 <Button onClick={handlePlaylistShareClick}>
                   Share playlist
                 </Button>
               )}
-              <AuthButton />
+              <LogoutButton />
             </div>
           </div>
           <ul className="flex flex-col">

examples/music-player/src/components/AuthButton.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useAccount, useIsAuthenticated } from "jazz-react";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { AuthModal } from "./AuthModal";
-
-export function AuthButton() {
-  const [open, setOpen] = useState(false);
-  const { logOut } = useAccount();
-  const navigate = useNavigate();
-
-  const isAuthenticated = useIsAuthenticated();
-
-  function handleSignOut() {
-    logOut();
-    navigate("/");
-  }
-
-  if (isAuthenticated) {
-    return (
-      <Button variant="outline" onClick={handleSignOut}>
-        Sign out
-      </Button>
-    );
-  }
-
-  return (
-    <>
-      <Button
-        onClick={() => setOpen(true)}
-        className="bg-white text-black hover:bg-gray-100"
-      >
-        Sign up
-      </Button>
-      <AuthModal open={open} onOpenChange={setOpen} />
-    </>
-  );
-}

examples/music-player/src/components/AuthModal.tsx

@@ -1,97 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { usePasskeyAuth } from "jazz-react";
-import { useState } from "react";
-
-interface AuthModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function AuthModal({ open, onOpenChange }: AuthModalProps) {
-  const [username, setUsername] = useState("");
-  const [isSignUp, setIsSignUp] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const auth = usePasskeyAuth({
-    appName: "Jazz Music Player",
-  });
-
-  const handleViewChange = () => {
-    setIsSignUp(!isSignUp);
-    setError(null);
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    try {
-      if (isSignUp) {
-        await auth.signUp(username);
-      } else {
-        await auth.logIn();
-      }
-      onOpenChange(false);
-    } catch (error) {
-      setError(error instanceof Error ? error.message : "Unknown error");
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle className="text-2xl font-bold">
-            {isSignUp ? "Create account" : "Welcome back"}
-          </DialogTitle>
-          <DialogDescription>
-            {isSignUp
-              ? "Sign up to enable network sync and share your playlists with others"
-              : "Changes done before logging in will be lost"}
-          </DialogDescription>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {isSignUp && (
-            <div className="space-y-2">
-              <Label htmlFor="username">Username</Label>
-              <Input
-                id="username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder="Enter your username"
-                required
-              />
-            </div>
-          )}
-          {error && <div className="text-sm text-red-500">{error}</div>}
-          <div className="space-y-4">
-            <Button
-              type="submit"
-              className="w-full bg-blue-600 hover:bg-blue-700"
-            >
-              {isSignUp ? "Sign up with passkey" : "Login with passkey"}
-            </Button>
-            <div className="text-center text-sm">
-              {isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
-              <button
-                type="button"
-                onClick={handleViewChange}
-                className="text-blue-600 hover:underline"
-              >
-                {isSignUp ? "Login" : "Sign up"}
-              </button>
-            </div>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}

examples/music-player/src/components/LocalOnlyTag.tsx

@@ -1,37 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useIsAuthenticated } from "jazz-react";
-import { Info } from "lucide-react";
-
-export function LocalOnlyTag() {
-  const isAuthenticated = useIsAuthenticated();
-
-  if (isAuthenticated) {
-    return null;
-  }
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div className="inline-flex items-center gap-1.5 cursor-help">
-            <Badge variant="default" className="h-5 text-xs font-normal">
-              Local only
-            </Badge>
-            <Info className="h-3.5 w-3.5 text-muted-foreground" />
-          </div>
-        </TooltipTrigger>
-        <TooltipContent className="max-w-[250px]">
-          <p>
-            Sign up to enable network sync and share your playlists with others
-          </p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}

examples/music-player/src/components/SidePanel.tsx

@@ -1,6 +1,5 @@
 import { useAccount } from "jazz-react";
 import { useNavigate, useParams } from "react-router";
-import { LocalOnlyTag } from "./LocalOnlyTag";
 
 export function SidePanel() {
   const { playlistId } = useParams();
@@ -26,7 +25,7 @@ export function SidePanel() {
 
   return (
     <aside className="w-64 p-6 bg-white overflow-y-auto">
-      <div className="flex items-center mb-1">
+      <div className="flex items-center mb-6">
         <svg
           className="w-8 h-8 mr-2"
           viewBox="0 0 24 24"
@@ -47,9 +46,6 @@ export function SidePanel() {
         </svg>
         <span className="text-xl font-bold text-blue-600">Music Player</span>
       </div>
-      <div className="mb-6">
-        <LocalOnlyTag />
-      </div>
       <nav>
         <h2 className="mb-2 text-sm font-semibold text-gray-600">Playlists</h2>
         <ul className="space-y-1">

examples/music-player/src/components/ui/badge.tsx

@@ -1,36 +0,0 @@
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

examples/music-player/src/components/ui/dialog.tsx

@@ -1,120 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};

examples/music-player/src/components/ui/input.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };

examples/music-player/src/components/ui/label.tsx

@@ -1,24 +0,0 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };

examples/music-player/src/components/ui/tooltip.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

examples/music-player/src/lib/useUploadExampleData.ts

@@ -1,14 +1,11 @@
 import { MusicaAccount } from "@/1_schema";
-import { useAccount } from "jazz-react";
 import { useEffect } from "react";
 import { uploadMusicTracks } from "../4_actions";
 
 export function useUploadExampleData() {
-  const { me } = useAccount();
-
   useEffect(() => {
     uploadOnboardingData();
-  }, [me.id]);
+  }, []);
 }
 
 async function uploadOnboardingData() {

examples/music-player/tests/createAndShare.spec.ts

@@ -1,84 +1,44 @@
-import { BrowserContext, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import { HomePage } from "./pages/HomePage";
+import { LoginPage } from "./pages/LoginPage";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-async function mockAuthenticator(context: BrowserContext) {
-  await context.addInitScript(() => {
-    Object.defineProperty(window.navigator, "credentials", {
-      value: {
-        ...window.navigator.credentials,
-        create: async () => ({
-          type: "public-key",
-          id: new Uint8Array([1, 2, 3, 4]),
-          rawId: new Uint8Array([1, 2, 3, 4]),
-          response: {
-            clientDataJSON: new Uint8Array([1]),
-            attestationObject: new Uint8Array([2]),
-          },
-        }),
-        get: async () => ({
-          type: "public-key",
-          id: new Uint8Array([1, 2, 3, 4]),
-          rawId: new Uint8Array([1, 2, 3, 4]),
-          response: {
-            authenticatorData: new Uint8Array([1]),
-            clientDataJSON: new Uint8Array([2]),
-            signature: new Uint8Array([3]),
-          },
-        }),
-      },
-      configurable: true,
-    });
-  });
-}
+test("create a new playlist and share", async ({ page }) => {
+  const loginPage = new LoginPage(page);
 
-// Configure the authenticator
-test.beforeEach(async ({ context }) => {
-  // Enable virtual authenticator environment
-  await mockAuthenticator(context);
-});
+  await loginPage.goto();
+  await loginPage.fillUsername("S. Mario");
+  await loginPage.signup();
 
-test("create a new playlist and share", async ({
-  page: marioPage,
-  browser,
-}) => {
-  await marioPage.goto("/");
-
-  const marioHome = new HomePage(marioPage);
+  const homePage = new HomePage(page);
 
   // The example song should be loaded
-  await marioHome.expectMusicTrack("Example song");
-  await marioHome.editTrackTitle("Example song", "Super Mario World");
+  await homePage.expectMusicTrack("Example song");
+  await homePage.editTrackTitle("Example song", "Super Mario World");
 
-  await marioHome.createPlaylist();
-  await marioHome.editPlaylistTitle("Save the princess");
+  await homePage.createPlaylist();
+  await homePage.editPlaylistTitle("Save the princess");
 
-  await marioHome.navigateToPlaylist("All tracks");
-  await marioHome.addTrackToPlaylist("Super Mario World", "Save the princess");
+  await homePage.navigateToPlaylist("All tracks");
+  await homePage.addTrackToPlaylist("Super Mario World", "Save the princess");
 
-  await marioHome.navigateToPlaylist("Save the princess");
-  await marioHome.expectMusicTrack("Super Mario World");
+  await homePage.navigateToPlaylist("Save the princess");
+  await homePage.expectMusicTrack("Super Mario World");
 
-  await marioHome.signUp("Mario");
-
-  const url = await marioHome.getShareLink();
+  const url = await homePage.getShareLink();
 
   await sleep(4000); // Wait for the sync to complete
 
-  const luigiContext = await browser.newContext();
-  await mockAuthenticator(luigiContext);
+  await homePage.logout();
 
-  const luigiPage = await luigiContext.newPage();
-  await luigiPage.goto("/");
+  await loginPage.goto();
+  await loginPage.fillUsername("Luigi");
+  await loginPage.signup();
 
-  const luigiHome = new HomePage(luigiPage);
+  await page.goto(url);
 
-  await luigiHome.signUp("Luigi");
-
-  await luigiPage.goto(url);
-
-  await luigiHome.expectMusicTrack("Super Mario World");
-  await luigiHome.playMusicTrack("Super Mario World");
-  await luigiHome.expectActiveTrackPlaying();
+  await homePage.expectMusicTrack("Super Mario World");
+  await homePage.playMusicTrack("Super Mario World");
+  await homePage.expectActiveTrackPlaying();
 });

examples/music-player/tests/pages/HomePage.ts

@@ -95,17 +95,6 @@ export class HomePage {
       .click();
   }
 
-  async signUp(name: string) {
-    await this.page.getByRole("button", { name: "Sign up" }).click();
-    await this.page.getByRole("textbox", { name: "Username" }).fill(name);
-    await this.page
-      .getByRole("button", { name: "Sign up with passkey" })
-      .click();
-    await expect(
-      this.page.getByRole("button", { name: "Sign out" }),
-    ).toBeVisible();
-  }
-
   async logout() {
     await this.logoutButton.click();
   }

examples/music-player/tests/pages/LoginPage.ts

@@ -0,0 +1,40 @@
+import { Locator, Page, expect } from "@playwright/test";
+
+export class LoginPage {
+  readonly page: Page;
+  readonly usernameInput: Locator;
+  readonly signupButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.usernameInput = page.getByRole("textbox");
+    this.signupButton = page.getByRole("button", {
+      name: "Sign up",
+    });
+  }
+
+  async goto() {
+    this.page.goto("/");
+  }
+
+  async fillUsername(value: string) {
+    await this.usernameInput.clear();
+    await this.usernameInput.fill(value);
+  }
+
+  async loginAs(value: string) {
+    await this.page
+      .getByRole("button", {
+        name: value,
+      })
+      .click();
+  }
+
+  async signup() {
+    await this.signupButton.click();
+  }
+
+  async expectLoaded() {
+    await expect(this.signupButton).toBeVisible();
+  }
+}

examples/onboarding/CHANGELOG.md

@@ -1,5 +1,21 @@
 # jazz-example-onboarding
 
+## 0.0.44
+
+### Patch Changes
+
+- jazz-browser-media-images@0.9.22
+- jazz-react@0.9.22
+
+## 0.0.43
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-browser-media-images@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.42
 
 ### Patch Changes

examples/onboarding/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-onboarding",
   "private": true,
-  "version": "0.0.42",
+  "version": "0.0.44",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/onboarding/src/main.tsx

@@ -1,7 +1,7 @@
 import App from "@/App.tsx";
 import "@/index.css";
 import { HRAccount } from "@/schema.ts";
-import { JazzProvider } from "jazz-react";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
 import React from "react";
 import ReactDOM from "react-dom/client";
 
@@ -11,6 +11,20 @@ const peer =
   ) as `ws://${string}`) ??
   "wss://cloud.jazz.tools/?key=onboarding-example-jazz@garden.co";
 
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+  return (
+    <>
+      <JazzProvider AccountSchema={HRAccount} auth={auth} peer={peer}>
+        {children}
+      </JazzProvider>
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Jazz Onboarding" state={authState} />
+      )}
+    </>
+  );
+}
+
 declare module "jazz-react" {
   interface Register {
     Account: HRAccount;
@@ -19,13 +33,8 @@ declare module "jazz-react" {
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <JazzProvider
-      AccountSchema={HRAccount}
-      sync={{
-        peer,
-      }}
-    >
+    <JazzAndAuth>
       <App />
-    </JazzProvider>
+    </JazzAndAuth>
   </React.StrictMode>,
 );

examples/onboarding/tests/onboardingFlow.spec.ts

@@ -16,6 +16,25 @@ async function scrollToBottom(page: Page) {
   });
 }
 
+const login = async ({
+  page,
+  userName,
+  loginAs = false,
+}: {
+  page: Page;
+  userName: string;
+  loginAs?: boolean;
+}) => {
+  const loginPage = new LoginPage(page);
+  await loginPage.goto("/");
+  if (loginAs) {
+    await loginPage.loginAs(userName);
+  } else {
+    await loginPage.fillUsername(userName);
+    await loginPage.signup();
+  }
+};
+
 test.describe("Admin onboarding flow", () => {
   let browser: Browser;
   let adminContext: BrowserContext;
@@ -35,7 +54,7 @@ test.describe("Admin onboarding flow", () => {
 
   test("Create and delete flow", async () => {
     const adminPage = await adminContext.newPage();
-    await adminPage.goto("/");
+    await login({ page: adminPage, userName: "HR specialist" });
     const adminHomePage = new HomePage(adminPage);
     await adminHomePage.createEmployee("Paul");
     await adminHomePage.createEmployee("Sean");
@@ -51,8 +70,10 @@ test.describe("Admin onboarding flow", () => {
     const adminPage = await adminContext.newPage();
     const writerPage = await writerContext.newPage();
 
-    await adminPage.goto("/");
-    await writerPage.goto("/");
+    const adminUser = "HR specialist";
+    const writerUser = "Invitee";
+    await login({ page: adminPage, userName: adminUser });
+    await login({ page: writerPage, userName: writerUser });
 
     const adminHomePage = new HomePage(adminPage);
     await adminHomePage.createEmployee("Paul");

examples/onboarding/vite.config.ts.timestamp-1738123585435-c5f316a1877fb.mjs

@@ -1,20 +0,0 @@
-// vite.config.ts
-import path from "path";
-import react from "file:///Users/brad/dev/jazz/node_modules/@vitejs/plugin-react-swc/index.mjs";
-import topLevelAwait from "file:///Users/brad/dev/jazz/node_modules/vite-plugin-top-level-await/exports/import.mjs";
-import { defineConfig } from "file:///Users/brad/dev/jazz/node_modules/vite/dist/node/index.js";
-var __vite_injected_original_dirname =
-  "/Users/brad/dev/jazz/examples/onboarding";
-var vite_config_default = defineConfig({
-  plugins: [react(), topLevelAwait()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__vite_injected_original_dirname, "./src"),
-    },
-  },
-  build: {
-    minify: false,
-  },
-});
-export { vite_config_default as default };
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYnJhZC9kZXYvamF6ei9leGFtcGxlcy9vbmJvYXJkaW5nXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvYnJhZC9kZXYvamF6ei9leGFtcGxlcy9vbmJvYXJkaW5nL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9icmFkL2Rldi9qYXp6L2V4YW1wbGVzL29uYm9hcmRpbmcvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgcGF0aCBmcm9tIFwicGF0aFwiO1xuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdC1zd2NcIjtcbmltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gXCJ2aXRlXCI7XG5pbXBvcnQgdG9wTGV2ZWxBd2FpdCBmcm9tIFwidml0ZS1wbHVnaW4tdG9wLWxldmVsLWF3YWl0XCI7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbcmVhY3QoKSwgdG9wTGV2ZWxBd2FpdCgpXSxcbiAgcmVzb2x2ZToge1xuICAgIGFsaWFzOiB7XG4gICAgICBcIkBcIjogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSwgXCIuL3NyY1wiKSxcbiAgICB9LFxuICB9LFxuICBidWlsZDoge1xuICAgIG1pbmlmeTogZmFsc2UsXG4gIH0sXG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBMFMsT0FBTyxVQUFVO0FBQzNULE9BQU8sV0FBVztBQUNsQixTQUFTLG9CQUFvQjtBQUM3QixPQUFPLG1CQUFtQjtBQUgxQixJQUFNLG1DQUFtQztBQU16QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxHQUFHLGNBQWMsQ0FBQztBQUFBLEVBQ2xDLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssS0FBSyxRQUFRLGtDQUFXLE9BQU87QUFBQSxJQUN0QztBQUFBLEVBQ0Y7QUFBQSxFQUNBLE9BQU87QUFBQSxJQUNMLFFBQVE7QUFBQSxFQUNWO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

examples/organization/CHANGELOG.md

@@ -1,5 +1,19 @@
 # organization
 
+## 0.0.36
+
+### Patch Changes
+
+- jazz-react@0.9.22
+
+## 0.0.35
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.34
 
 ### Patch Changes

examples/organization/package.json

@@ -1,7 +1,7 @@
 {
   "name": "organization",
   "private": true,
-  "version": "0.0.34",
+  "version": "0.0.36",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/organization/src/main.tsx

@@ -1,4 +1,4 @@
-import { JazzProvider } from "jazz-react";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
@@ -27,6 +27,26 @@ function Router() {
   return <RouterProvider router={router}></RouterProvider>;
 }
 
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <JazzProvider
+        AccountSchema={JazzAccount}
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=organization-example@garden.co"
+      >
+        {children}
+      </JazzProvider>
+
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Organization" state={authState} />
+      )}
+    </>
+  );
+}
+
 declare module "jazz-react" {
   interface Register {
     Account: JazzAccount;
@@ -35,13 +55,8 @@ declare module "jazz-react" {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzProvider
-      AccountSchema={JazzAccount}
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=organization-example@garden.co",
-      }}
-    >
+    <JazzAndAuth>
       <Router />
-    </JazzProvider>
+    </JazzAndAuth>
   </StrictMode>,
 );

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,17 @@
 # passkey-svelte
 
+## 0.0.31
+
+### Patch Changes
+
+- jazz-svelte@0.9.22
+
+## 0.0.30
+
+### Patch Changes
+
+- jazz-svelte@0.9.21
+
 ## 0.0.29
 
 ### Patch Changes

examples/passkey-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passkey-svelte",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "private": true,
   "scripts": {

examples/passkey-svelte/src/routes/+layout.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
-  import { JazzProvider, PasskeyAuthBasicUI } from 'jazz-svelte';
+  import { JazzProvider, PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
 
   let { children } = $props();
+
+  let auth = usePasskeyAuth({ appName: 'minimal-svelte-auth-passkey' });
+
+  $inspect(auth.state);
 </script>
 
-<JazzProvider
-  sync={{
-    peer: "wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co",
-    when: "signedUp",
-  }}
+<div
+  style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;"
 >
-  <PasskeyAuthBasicUI appName="minimal-svelte-auth-passkey">
-    {@render children?.()}
-  </PasskeyAuthBasicUI>
-</JazzProvider>
+  <PasskeyAuthBasicUI state={auth.state} />
+
+  {#if auth.current}
+    <JazzProvider
+      auth={auth.current}
+      peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co"
+    >
+      {@render children?.()}
+    </JazzProvider>
+  {/if}
+</div>
 
 <style>
   :global(html, body) {

examples/passkey/CHANGELOG.md

@@ -1,5 +1,19 @@
 # minimal-auth-passkey
 
+## 0.0.41
+
+### Patch Changes
+
+- jazz-react@0.9.22
+
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.39
 
 ### Patch Changes

examples/passkey/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passkey",
   "private": true,
-  "version": "0.0.39",
+  "version": "0.0.41",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passkey/src/main.tsx

@@ -1,21 +1,24 @@
-import { JazzProvider, PasskeyAuthBasicUI } from "jazz-react";
+import { JazzProvider, PasskeyAuthBasicUI, usePasskeyAuth } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, state] = usePasskeyAuth({
+    appName: "Jazz Minimal Auth Passkey Example",
+  });
+
   return (
-    <JazzProvider
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=minimal-auth-passkey-example@garden.co",
-        when: "signedUp",
-      }}
-    >
-      <PasskeyAuthBasicUI appName="Jazz Minimal Auth Passkey Example">
+    <>
+      <JazzProvider
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=minimal-auth-passkey-example@garden.co"
+      >
         {children}
-      </PasskeyAuthBasicUI>
-    </JazzProvider>
+      </JazzProvider>
+      <PasskeyAuthBasicUI state={state} />
+    </>
   );
 }
 

examples/passphrase/.gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

examples/passphrase/README.md

@@ -1,56 +0,0 @@
-# Passphrase authentication example with Jazz and React
-
-This is an example of how to use passphrase authentication with Jazz.
-
-## Getting started
-
-You can either
-1. Clone the jazz repository, and run the app within the monorepo.
-2. Or create a new Jazz project using this example as a template.
-
-### Using the example as a template
-
-Create a new Jazz project, and use this example as a template.
-```bash
-npx create-jazz-app@latest --example passphrase --project-name passphrase
-```
-
-Go to the new project directory.
-```bash
-cd passphrase
-```
-
-Run the dev server.
-```bash
-npm run dev
-```
-
-### Using the monorepo
-
-This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
-
-Clone the jazz repository.
-```bash
-git clone https://github.com/garden-co/jazz.git
-```
-
-Install and build dependencies.
-```bash
-pnpm i && npx turbo build
-```
-
-Go to the example directory.
-```bash
-cd jazz/examples/passphrase/
-```
-
-Start the dev server.
-```bash
-pnpm dev
-```
-
-Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
-## Questions / problems / feedback
-
-If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
-

examples/passphrase/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz | Minimal Auth Passphrase Example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

examples/passphrase/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "passphrase",
-  "private": true,
-  "version": "0.0.39",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write"
-  },
-  "dependencies": {
-    "jazz-react": "workspace:*",
-    "jazz-tools": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "1.9.4",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "globals": "^15.11.0",
-    "typescript": "~5.6.2",
-    "vite": "^5.4.10"
-  }
-}

examples/passphrase/src/App.tsx

@@ -1,14 +0,0 @@
-import { useAccount } from "jazz-react";
-
-function App() {
-  const { logOut } = useAccount();
-
-  return (
-    <main>
-      <h1>You're logged in</h1>
-      <button onClick={() => logOut()}>Logout</button>
-    </main>
-  );
-}
-
-export default App;

examples/passphrase/src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
-  width: 100%;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 0;
-  padding: 0.6em 1.2em;
-  font-weight: 500;
-  background-color: #1a1a1a;
-  cursor: pointer;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
-main {
-  padding: 1rem;
-  margin: 0 auto;
-  text-align: center;
-}

examples/passphrase/src/main.tsx

@@ -1,32 +0,0 @@
-import { JazzProvider, PassphraseAuthBasicUI } from "jazz-react";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
-import { wordlist } from "./wordlist.ts";
-
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  return (
-    <JazzProvider
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=minimal-auth-passphrase-example@garden.co",
-        when: "signedUp",
-      }}
-    >
-      <PassphraseAuthBasicUI
-        appName="Jazz Minimal Auth Passphrase Example"
-        wordlist={wordlist}
-      >
-        {children}
-      </PassphraseAuthBasicUI>
-    </JazzProvider>
-  );
-}
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <JazzAndAuth>
-      <App />
-    </JazzAndAuth>
-  </StrictMode>,
-);

examples/passphrase/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

examples/passphrase/tsconfig.app.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

examples/passphrase/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

examples/passphrase/tsconfig.node.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

examples/passphrase/vercel.json

@@ -1,8 +0,0 @@
-{
-  "build": {
-    "env": {
-      "APP_NAME": "passphrase-demo"
-    }
-  },
-  "ignoreCommand": "node ../../ignore-vercel-build.js"
-}

examples/passphrase/vite.config.ts

@@ -1,7 +0,0 @@
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-});

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,19 @@
 # jazz-password-manager
 
+## 0.0.62
+
+### Patch Changes
+
+- jazz-react@0.9.22
+
+## 0.0.61
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.60
 
 ### Patch Changes

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.60",
+  "version": "0.0.62",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,8 +12,8 @@
     "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
   },
   "dependencies": {
-    "jazz-react": "workspace:0.9.20",
-    "jazz-tools": "workspace:0.9.20",
+    "jazz-react": "workspace:0.9.22",
+    "jazz-tools": "workspace:0.9.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.41.5",

examples/password-manager/src/2_main.tsx

@@ -1,4 +1,4 @@
-import { JazzProvider, PasskeyAuthBasicUI } from "jazz-react";
+import { JazzProvider, PasskeyAuthBasicUI, usePasskeyAuth } from "jazz-react";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { PasswordManagerAccount } from "./1_schema.ts";
@@ -6,18 +6,21 @@ import App from "./5_App.tsx";
 import "./index.css";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, state] = usePasskeyAuth({
+    appName: "Jazz Password Manager",
+  });
+
   return (
-    <JazzProvider
-      AccountSchema={PasswordManagerAccount}
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=password-manager-example-jazz@garden.co",
-        when: "signedUp",
-      }}
-    >
-      <PasskeyAuthBasicUI appName="Jazz Password Manager">
+    <>
+      <JazzProvider
+        AccountSchema={PasswordManagerAccount}
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=password-manager-example-jazz@garden.co"
+      >
         {children}
-      </PasskeyAuthBasicUI>
-    </JazzProvider>
+      </JazzProvider>
+      <PasskeyAuthBasicUI state={state} />
+    </>
   );
 }
 

examples/pets/CHANGELOG.md

@@ -1,5 +1,21 @@
 # jazz-example-pets
 
+## 0.0.160
+
+### Patch Changes
+
+- jazz-browser-media-images@0.9.22
+- jazz-react@0.9.22
+
+## 0.0.159
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-browser-media-images@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.158
 
 ### Patch Changes

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.158",
+  "version": "0.0.160",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,9 +19,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.9.20",
-    "jazz-react": "workspace:0.9.20",
-    "jazz-tools": "workspace:0.9.20",
+    "jazz-browser-media-images": "workspace:0.9.22",
+    "jazz-react": "workspace:0.9.22",
+    "jazz-tools": "workspace:0.9.21",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",
@@ -41,7 +41,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
-    "jazz-run": "workspace:0.9.20",
+    "jazz-run": "workspace:0.9.22",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.15",
     "typescript": "~5.6.2",

examples/pets/src/2_main.tsx

@@ -9,10 +9,11 @@ import {
 import "./index.css";
 
 import {
+  DemoAuthBasicUI,
   JazzProvider,
-  PasskeyAuthBasicUI,
   useAcceptInvite,
   useAccount,
+  useDemoAuth,
 } from "jazz-react";
 
 import { PetAccount, PetPost } from "./1_schema.ts";
@@ -30,36 +31,42 @@ const peer =
   ) as `ws://${string}`) ??
   "wss://cloud.jazz.tools/?key=pets-example-jazz@garden.co";
 
+/** Walkthrough: The top-level provider `<JazzProvider/>`
+ *
+ *  This shows how to use the top-level provider `<JazzProvider/>`,
+ *  which provides the rest of the app with a `LocalNode` (used through `useJazz` later),
+ *  based on `LocalAuth` that uses PassKeys (aka WebAuthn) to store a user's account secret
+ *  - no backend needed. */
+
 const appName = "Jazz Rate My Pet Example";
 
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <JazzProvider auth={auth} peer={peer} AccountSchema={PetAccount}>
+        {children}
+      </JazzProvider>
+      <DemoAuthBasicUI appName={appName} state={authState} />
+    </>
+  );
+}
+
 declare module "jazz-react" {
   interface Register {
     Account: PetAccount;
   }
 }
 
-/** Walkthrough: The top-level provider `<JazzProvider/>`
- *
- *  This shows how to use the top-level provider `<JazzProvider/>`,
- *  which provides the rest of the app with a `LocalNode` (used through `useCoState` later),
- *  based on `PasskeyAuth` that uses PassKeys (aka WebAuthn) to store a user's account secret
- *  - no backend needed. */
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <ThemeProvider>
       <TitleAndLogo name={appName} />
       <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-        <JazzProvider
-          sync={{
-            peer,
-            when: "signedUp",
-          }}
-          AccountSchema={PetAccount}
-        >
-          <PasskeyAuthBasicUI appName={appName}>
-            <App />
-          </PasskeyAuthBasicUI>
-        </JazzProvider>
+        <JazzAndAuth>
+          <App />
+        </JazzAndAuth>
       </div>
     </ThemeProvider>
   </React.StrictMode>,
@@ -71,6 +78,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
  *  on the CoValue ID (CoID) of our PetPost, stored in the URL hash
  *  - which can also contain invite links.
  */
+
 export default function App() {
   const { logOut } = useAccount();
 

examples/pets/tests/createAndShare.spec.ts

@@ -1,4 +1,4 @@
-import { BrowserContext, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import { HomePage } from "./pages/HomePage";
 import { LoginPage } from "./pages/LoginPage";
 import { NewPostPage } from "./pages/NewPostPage";
@@ -6,80 +6,50 @@ import { PostPage } from "./pages/PostPage";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-test("create a new post and share", async ({ page: luigiPage, browser }) => {
-  const context = await browser.newContext();
-  await mockAuthenticator(context);
+test("create a new post and share", async ({ page }) => {
+  const loginPage = new LoginPage(page);
 
-  const marioPage = await context.newPage();
-  await marioPage.goto("/");
-  await luigiPage.goto("/");
+  await loginPage.goto();
+  await loginPage.fillUsername("S. Mario");
+  await loginPage.signup();
 
-  const marioLoginPage = new LoginPage(marioPage);
-  await marioLoginPage.fillUsername("S. Mario");
-  await marioLoginPage.signup();
+  const homePage = new HomePage(page);
 
-  const luigiLoginPage = new LoginPage(luigiPage);
-  await luigiLoginPage.fillUsername("Luigi");
-  await luigiLoginPage.signup();
+  await homePage.navigateToNewPost();
 
-  const marioHomePage = new HomePage(marioPage);
-  await marioHomePage.navigateToNewPost();
-
-  const newPostPage = new NewPostPage(marioPage);
+  const newPostPage = new NewPostPage(page);
 
   await newPostPage.fillPetName("Yoshi");
   await newPostPage.uploadFile("./public/jazz-logo-low-res.jpg");
   await newPostPage.submit();
 
-  const marioPostPage = new PostPage(marioPage);
-  await marioPostPage.expectPetName("Yoshi");
+  const postPage = new PostPage(page);
 
-  const invitation = await marioPostPage.getShareLink();
+  await postPage.expectPetName("Yoshi");
+
+  const invitation = await postPage.getShareLink();
 
   await sleep(1000);
-  await luigiPage.goto(invitation);
 
-  const luigiPostPage = new PostPage(luigiPage);
-  await luigiPostPage.expectPetName("Yoshi");
-  await luigiPostPage.expectReactionSelectedByCurrentUser("😍", false);
-  await luigiPostPage.toggleReaction("😍");
-  await luigiPostPage.expectReactionSelectedByCurrentUser("😍", true);
+  await postPage.logout();
 
-  await marioPostPage.expectReactionByUser("😍", "Luigi");
-});
-
-async function mockAuthenticator(context: BrowserContext) {
-  await context.addInitScript(() => {
-    Object.defineProperty(window.navigator, "credentials", {
-      value: {
-        ...window.navigator.credentials,
-        create: async () => ({
-          type: "public-key",
-          id: new Uint8Array([1, 2, 3, 4]),
-          rawId: new Uint8Array([1, 2, 3, 4]),
-          response: {
-            clientDataJSON: new Uint8Array([1]),
-            attestationObject: new Uint8Array([2]),
-          },
-        }),
-        get: async () => ({
-          type: "public-key",
-          id: new Uint8Array([1, 2, 3, 4]),
-          rawId: new Uint8Array([1, 2, 3, 4]),
-          response: {
-            authenticatorData: new Uint8Array([1]),
-            clientDataJSON: new Uint8Array([2]),
-            signature: new Uint8Array([3]),
-          },
-        }),
-      },
-      configurable: true,
-    });
-  });
-}
-
-// Configure the authenticator
-test.beforeEach(async ({ context }) => {
-  // Enable virtual authenticator environment
-  await mockAuthenticator(context);
+  await loginPage.expectLoaded();
+
+  await loginPage.fillUsername("Luigi");
+  await loginPage.signup();
+
+  await page.goto(invitation);
+
+  await postPage.expectPetName("Yoshi");
+  await postPage.expectReactionSelectedByCurrentUser("😍", false);
+  await postPage.toggleReaction("😍");
+  await postPage.expectReactionSelectedByCurrentUser("😍", true);
+
+  await postPage.logout();
+  await loginPage.expectLoaded();
+  await loginPage.loginAs("S. Mario");
+
+  await homePage.navigateToPost("Yoshi");
+  await postPage.expectPetName("Yoshi");
+  await postPage.expectReactionByUser("😍", "Luigi");
 });

examples/reactions/CHANGELOG.md

@@ -1,5 +1,21 @@
 # reactions
 
+## 0.0.40
+
+### Patch Changes
+
+- jazz-browser-media-images@0.9.22
+- jazz-react@0.9.22
+
+## 0.0.39
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-browser-media-images@0.9.21
+  - jazz-react@0.9.21
+
 ## 0.0.38
 
 ### Patch Changes

examples/reactions/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactions",
   "private": true,
-  "version": "0.0.38",
+  "version": "0.0.40",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/reactions/src/main.tsx

@@ -1,20 +1,32 @@
-import { JazzProvider, PasskeyAuthBasicUI } from "jazz-react";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <JazzProvider
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=reactions-example@garden.co"
+      >
+        {children}
+      </JazzProvider>
+
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Reactions" state={authState} />
+      )}
+    </>
+  );
+}
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzProvider
-      sync={{
-        peer: "wss://cloud.jazz.tools/?key=reactions-example@garden.co",
-        when: "signedUp",
-      }}
-    >
-      <PasskeyAuthBasicUI appName="Jazz Reactions Example">
-        <App />
-      </PasskeyAuthBasicUI>
-    </JazzProvider>
+    <JazzAndAuth>
+      <App />
+    </JazzAndAuth>
   </StrictMode>,
 );

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,21 @@
 # todo-vue
 
+## 0.0.45
+
+### Patch Changes
+
+- jazz-browser@0.9.22
+- jazz-vue@0.9.22
+
+## 0.0.44
+
+### Patch Changes
+
+- Updated dependencies [1be017d]
+  - jazz-tools@0.9.21
+  - jazz-browser@0.9.21
+  - jazz-vue@0.9.21
+
 ## 0.0.43
 
 ### Patch Changes