jazz-tools 0.14.27 → 0.15.0

package/src/react-core/tests/usePassPhraseAuth.test.ts

@@ -0,0 +1,180 @@
+// @vitest-environment happy-dom
+
+import { mnemonicToEntropy } from "@scure/bip39";
+import { AuthSecretStorage, KvStoreContext } from "jazz-tools";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { usePassphraseAuth } from "../auth/PassphraseAuth";
+import { useAccount } from "../hooks";
+import {
+  createJazzTestAccount,
+  createJazzTestGuest,
+  setupJazzTestSync,
+} from "../testing";
+import { testWordlist } from "./fixtures.js";
+import { act, renderHook, waitFor } from "./testUtils";
+
+describe("usePassphraseAuth", () => {
+  beforeEach(async () => {
+    await setupJazzTestSync();
+    await createJazzTestAccount({
+      isCurrentActiveAccount: true,
+    });
+  });
+
+  afterEach(() => {
+    KvStoreContext.getInstance().getStorage().clearAll();
+  });
+
+  it("throws error when using guest account", async () => {
+    const guestAccount = await createJazzTestGuest();
+
+    expect(() =>
+      renderHook(() => usePassphraseAuth({ wordlist: testWordlist }), {
+        account: guestAccount,
+      }),
+    ).toThrow();
+  });
+
+  it("should show signed in state with authenticated account", async () => {
+    const { result } = renderHook(
+      () => usePassphraseAuth({ wordlist: testWordlist }),
+      {
+        isAuthenticated: true,
+      },
+    );
+
+    expect(result.current.state).toBe("signedIn");
+  });
+
+  it("should sign up with the current credentials", async () => {
+    const { result } = renderHook(() =>
+      usePassphraseAuth({ wordlist: testWordlist }),
+    );
+
+    const authSecretStorage = new AuthSecretStorage();
+    const credentialsBefore = await authSecretStorage.get();
+
+    let passphrase = "";
+
+    await act(async () => {
+      passphrase = await result.current.signUp();
+    });
+
+    expect(result.current.state).toBe("signedIn");
+    expect(await authSecretStorage.get()).toEqual({
+      ...credentialsBefore,
+      provider: "passphrase",
+    });
+    expect(mnemonicToEntropy(passphrase, testWordlist)).toEqual(
+      credentialsBefore?.secretSeed,
+    );
+  });
+
+  it("should log in with the previous passphrase", async () => {
+    const { result } = renderHook(() =>
+      usePassphraseAuth({ wordlist: testWordlist }),
+    );
+
+    const authSecretStorage = new AuthSecretStorage();
+    const credentialsBefore = await authSecretStorage.get();
+
+    let passphrase = "";
+
+    await act(async () => {
+      passphrase = await result.current.signUp();
+    });
+
+    await act(async () => {
+      await result.current.logIn(passphrase);
+    });
+
+    expect(result.current.state).toBe("signedIn");
+    expect(await authSecretStorage.get()).toMatchObject({
+      ...credentialsBefore,
+      provider: "passphrase",
+    });
+  });
+
+  it("should return the current account passphrase", async () => {
+    const { result } = renderHook(() =>
+      usePassphraseAuth({ wordlist: testWordlist }),
+    );
+
+    await waitFor(() => result.current.passphrase !== "");
+
+    const passphrase = result.current.passphrase;
+
+    expect(await result.current.signUp()).toBe(passphrase);
+  });
+
+  it("should be able to logout after sign up", async () => {
+    const account = await createJazzTestAccount({});
+
+    const accounts: string[] = [];
+    const updates: { state: string; accountIndex: number }[] = [];
+
+    const { result } = renderHook(
+      () => {
+        const passphraseAuth = usePassphraseAuth({ wordlist: testWordlist });
+        const account = useAccount();
+
+        if (account.me) {
+          if (!accounts.includes(account.me.id)) {
+            accounts.push(account.me.id);
+          }
+
+          updates.push({
+            state: passphraseAuth.state,
+            accountIndex: accounts.indexOf(account.me.id),
+          });
+        }
+
+        return { passphraseAuth, account };
+      },
+      {
+        account,
+        isAuthenticated: false,
+      },
+    );
+
+    expect(result.current?.passphraseAuth.state).toBe("anonymous");
+    expect(result.current?.account?.me).toBeDefined();
+
+    const id = result.current?.account?.me?.id;
+
+    await act(async () => {
+      await result.current?.passphraseAuth.signUp();
+    });
+
+    expect(result.current?.passphraseAuth.state).toBe("signedIn");
+    expect(result.current?.account?.me?.id).toBe(id);
+
+    await act(async () => {
+      await result.current?.account?.logOut();
+    });
+
+    expect(result.current?.passphraseAuth.state).toBe("anonymous");
+    expect(result.current?.account?.me?.id).not.toBe(id);
+
+    expect(updates).toMatchInlineSnapshot(`
+      [
+        {
+          "accountIndex": 0,
+          "state": "anonymous",
+        },
+        {
+          "accountIndex": 0,
+          "state": "signedIn",
+        },
+        {
+          "accountIndex": 0,
+          "state": "anonymous",
+        },
+        {
+          "accountIndex": 1,
+          "state": "anonymous",
+        },
+      ]
+    `);
+  });
+});

package/src/react-core/utils.ts

@@ -0,0 +1,28 @@
+import { Account, JazzContextManager } from "jazz-tools";
+
+export function getCurrentAccountFromContextManager<Acc extends Account>(
+  contextManager: JazzContextManager<Acc, any>,
+) {
+  const context = contextManager.getCurrentValue();
+
+  if (!context) {
+    throw new Error("No context found");
+  }
+
+  return "me" in context ? context.me : context.guest;
+}
+
+export function subscribeToContextManager<Acc extends Account>(
+  contextManager: JazzContextManager<Acc, any>,
+  callback: () => () => void,
+) {
+  let unsub = () => {};
+
+  const handler = () => {
+    unsub();
+    unsub = callback();
+  };
+
+  handler();
+  return contextManager.subscribe(handler);
+}

package/src/react-native/crypto.ts

@@ -0,0 +1 @@
+export * from "jazz-tools/react-native-core/crypto";

package/src/react-native/index.ts

@@ -0,0 +1,5 @@
+export * from "jazz-tools/react-native-core";
+
+export * from "./provider.js";
+export * from "./storage/mmkv-store-adapter.js";
+export * from "./storage/op-sqlite-adapter.js";

package/src/react-native/provider.tsx

@@ -0,0 +1,30 @@
+import {
+  Account,
+  AccountClass,
+  AnyAccountSchema,
+  CoValueFromRaw,
+} from "jazz-tools";
+import {
+  JazzProviderCore,
+  JazzProviderProps,
+} from "jazz-tools/react-native-core";
+import React, { useMemo } from "react";
+import { MMKVStore } from "./storage/mmkv-store-adapter.js";
+import { OPSQLiteAdapter } from "./storage/op-sqlite-adapter.js";
+
+export function JazzReactNativeProvider<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+>(props: JazzProviderProps<S>) {
+  // Destructure kvStore and pass everything else via rest
+  const storage = useMemo(() => {
+    return props.storage ?? new OPSQLiteAdapter();
+  }, [props.storage]);
+
+  const kvStore = useMemo(() => {
+    return props.kvStore ?? new MMKVStore();
+  }, [props.kvStore]);
+
+  return <JazzProviderCore {...props} storage={storage} kvStore={kvStore} />;
+}

package/src/react-native/storage/mmkv-store-adapter.ts

@@ -0,0 +1,24 @@
+import { KvStore } from "jazz-tools/react-native-core";
+import { MMKV } from "react-native-mmkv";
+
+const storage = new MMKV({
+  id: "jazz-react-native.default",
+});
+
+export class MMKVStore implements KvStore {
+  async get(key: string): Promise<string | null> {
+    return storage.getString(key) ?? null;
+  }
+
+  async set(key: string, value: string): Promise<void> {
+    return storage.set(key, value);
+  }
+
+  async delete(key: string): Promise<void> {
+    return storage.delete(key);
+  }
+
+  async clearAll(): Promise<void> {
+    return storage.clearAll();
+  }
+}

package/src/react-native/storage/op-sqlite-adapter.ts

@@ -0,0 +1,79 @@
+import * as opSQLite from "@op-engineering/op-sqlite";
+import {
+  ANDROID_DATABASE_PATH,
+  IOS_LIBRARY_PATH,
+} from "@op-engineering/op-sqlite";
+import { Platform } from "react-native";
+
+type OPSQLiteDB = ReturnType<typeof opSQLite.open>;
+
+import { type SQLiteDatabaseDriverAsync } from "jazz-tools/react-native-core";
+
+export class OPSQLiteAdapter implements SQLiteDatabaseDriverAsync {
+  private db: OPSQLiteDB | null = null;
+  private dbName: string;
+
+  public constructor(dbName: string = "jazz-storage") {
+    this.dbName = dbName;
+  }
+
+  public async initialize(): Promise<void> {
+    if (this.db) {
+      return;
+    }
+
+    const dbPath =
+      Platform.OS === "ios" ? IOS_LIBRARY_PATH : ANDROID_DATABASE_PATH;
+
+    const db = (this.db = opSQLite.open({
+      name: this.dbName,
+      location: dbPath,
+    }));
+
+    await db.execute("PRAGMA journal_mode=WAL");
+  }
+
+  public async query<T>(sql: string, params?: unknown[]): Promise<T[]> {
+    if (!this.db) {
+      throw new Error("Database not initialized");
+    }
+
+    const result = await this.db.execute(sql, params as any[]);
+
+    return result.rows as T[];
+  }
+
+  public async get<T>(sql: string, params?: unknown[]): Promise<T | undefined> {
+    if (!this.db) {
+      throw new Error("Database not initialized");
+    }
+
+    const result = await this.db.execute(sql, params as any[]);
+
+    return result.rows[0] as T | undefined;
+  }
+
+  public async run(sql: string, params?: unknown[]) {
+    if (!this.db) {
+      throw new Error("Database not initialized");
+    }
+
+    await this.db.executeRaw(sql, params as any[]);
+  }
+
+  public async transaction(callback: () => unknown) {
+    await this.run("BEGIN TRANSACTION");
+
+    try {
+      await callback();
+      await this.run("COMMIT");
+    } catch (error) {
+      await this.run("ROLLBACK");
+      throw error;
+    }
+  }
+
+  public async closeDb(): Promise<void> {
+    // Keeping the database open and reusing the same connection over multiple ctx instances.
+  }
+}

package/src/react-native/testing.ts

@@ -0,0 +1 @@
+export * from "jazz-tools/react-native-core/testing";

package/src/react-native-core/ReactNativeContextManager.ts

@@ -0,0 +1,84 @@
+import {
+  Account,
+  AccountClass,
+  CoValueFromRaw,
+  JazzContextManager,
+  KvStore,
+  SyncConfig,
+} from "jazz-tools";
+import type {
+  AnyAccountSchema,
+  InstanceOfSchema,
+  JazzContextManagerAuthProps,
+} from "jazz-tools";
+import {
+  BaseReactNativeContextOptions,
+  createJazzReactNativeContext,
+  createJazzReactNativeGuestContext,
+} from "./platform.js";
+import { KvStoreContext } from "./storage/kv-store-context.js";
+
+export type JazzContextManagerProps<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+> = {
+  guestMode?: boolean;
+  sync: SyncConfig;
+  onLogOut?: () => void;
+  logOutReplacement?: () => void;
+  storage?: BaseReactNativeContextOptions["storage"];
+  AccountSchema?: S;
+  defaultProfileName?: string;
+  onAnonymousAccountDiscarded?: (
+    anonymousAccount: InstanceOfSchema<S>,
+  ) => Promise<void>;
+  CryptoProvider?: BaseReactNativeContextOptions["CryptoProvider"];
+};
+
+export class ReactNativeContextManager<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+> extends JazzContextManager<InstanceOfSchema<S>, JazzContextManagerProps<S>> {
+  async getNewContext(
+    props: JazzContextManagerProps<S>,
+    authProps?: JazzContextManagerAuthProps,
+  ) {
+    if (props.guestMode) {
+      return createJazzReactNativeGuestContext({
+        sync: props.sync,
+        storage: props.storage,
+        authSecretStorage: this.authSecretStorage,
+        CryptoProvider: props.CryptoProvider,
+      });
+    } else {
+      return createJazzReactNativeContext<S>({
+        sync: props.sync,
+        storage: props.storage,
+        AccountSchema: props.AccountSchema,
+        credentials: authProps?.credentials,
+        newAccountProps: authProps?.newAccountProps,
+        defaultProfileName: props.defaultProfileName,
+        authSecretStorage: this.authSecretStorage,
+        CryptoProvider: props.CryptoProvider,
+      });
+    }
+  }
+
+  getKvStore(): KvStore {
+    return KvStoreContext.getInstance().getStorage();
+  }
+
+  propsChanged(props: JazzContextManagerProps<S>) {
+    if (!this.props) {
+      return true;
+    }
+
+    return (
+      this.props.sync.when !== props.sync.when ||
+      this.props.sync.peer !== props.sync.peer ||
+      this.props.guestMode !== props.guestMode
+    );
+  }
+}

package/src/react-native-core/auth/DemoAuthUI.tsx

@@ -0,0 +1,202 @@
+import { useDemoAuth } from "jazz-tools/react-core";
+import React, { useState } from "react";
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  useColorScheme,
+} from "react-native";
+
+export const DemoAuthBasicUI = ({
+  appName,
+  auth,
+  children,
+}: {
+  appName: string;
+  auth: ReturnType<typeof useDemoAuth>;
+  children: React.ReactNode;
+}) => {
+  const colorScheme = useColorScheme();
+  const darkMode = colorScheme === "dark";
+  const [username, setUsername] = useState<string>("");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleSignUp = () => {
+    setErrorMessage(null);
+
+    auth.signUp(username).catch((error) => {
+      setErrorMessage(error.message);
+    });
+  };
+
+  const handleLogIn = (username: string) => {
+    setErrorMessage(null);
+
+    auth.logIn(username).catch((error) => {
+      setErrorMessage(error.message);
+    });
+  };
+
+  if (auth.state === "signedIn") {
+    return children;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        darkMode ? styles.darkBackground : styles.lightBackground,
+      ]}
+    >
+      <View style={styles.formContainer}>
+        <Text
+          style={[
+            styles.headerText,
+            darkMode ? styles.darkText : styles.lightText,
+          ]}
+        >
+          {appName}
+        </Text>
+
+        {errorMessage && <Text style={styles.errorText}>{errorMessage}</Text>}
+
+        <TextInput
+          placeholder="Display name"
+          value={username}
+          onChangeText={setUsername}
+          placeholderTextColor={darkMode ? "#fff" : "#000"}
+          style={[
+            styles.textInput,
+            darkMode ? styles.darkInput : styles.lightInput,
+          ]}
+        />
+
+        <TouchableOpacity
+          onPress={handleSignUp}
+          style={[
+            styles.button,
+            darkMode ? styles.darkButton : styles.lightButton,
+          ]}
+        >
+          <Text
+            style={darkMode ? styles.darkButtonText : styles.lightButtonText}
+          >
+            Sign Up as new account
+          </Text>
+        </TouchableOpacity>
+
+        <View style={styles.existingUsersContainer}>
+          {auth.existingUsers.map((user) => (
+            <TouchableOpacity
+              key={user}
+              onPress={() => handleLogIn(user)}
+              style={[
+                styles.existingUserButton,
+                darkMode ? styles.darkUserButton : styles.lightUserButton,
+              ]}
+            >
+              <Text style={darkMode ? styles.darkText : styles.lightText}>
+                Log In as "{user}"
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  formContainer: {
+    width: "80%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  headerText: {
+    fontSize: 24,
+    marginBottom: 20,
+  },
+  errorText: {
+    color: "red",
+    marginVertical: 5,
+    textAlign: "center",
+  },
+  textInput: {
+    borderWidth: 1,
+    padding: 10,
+    marginVertical: 10,
+    width: "100%",
+    borderRadius: 6,
+  },
+  darkInput: {
+    borderColor: "#444",
+    backgroundColor: "#000",
+    color: "#fff",
+  },
+  lightInput: {
+    borderColor: "#ddd",
+    backgroundColor: "#fff",
+    color: "#000",
+  },
+  button: {
+    paddingVertical: 15,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    width: "100%",
+    marginVertical: 10,
+  },
+  darkButton: {
+    backgroundColor: "#444",
+  },
+  lightButton: {
+    backgroundColor: "#ddd",
+  },
+  darkButtonText: {
+    color: "#fff",
+    textAlign: "center",
+  },
+  lightButtonText: {
+    color: "#000",
+    textAlign: "center",
+  },
+  existingUsersContainer: {
+    width: "100%",
+    marginTop: 20,
+  },
+  existingUserButton: {
+    paddingVertical: 15,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginVertical: 5,
+  },
+  darkUserButton: {
+    backgroundColor: "#222",
+  },
+  lightUserButton: {
+    backgroundColor: "#eee",
+  },
+  loadingText: {
+    fontSize: 18,
+    color: "#888",
+  },
+  darkText: {
+    color: "#fff",
+  },
+  lightText: {
+    color: "#000",
+  },
+  darkBackground: {
+    backgroundColor: "#000",
+  },
+  lightBackground: {
+    backgroundColor: "#fff",
+  },
+});

package/src/react-native-core/auth/auth.ts

@@ -0,0 +1,14 @@
+import { KvStoreContext } from "../storage/kv-store-context.js";
+
+export * from "./DemoAuthUI.js";
+
+export function clearUserCredentials() {
+  const kvStore = KvStoreContext.getInstance().getStorage();
+
+  // TODO: Migrate the Auth methods to use the same storage key/interface
+  return Promise.all([
+    kvStore.delete("demo-auth-logged-in-secret"),
+    kvStore.delete("jazz-clerk-auth"),
+    kvStore.delete("jazz-logged-in-secret"),
+  ]);
+}