jazz-tools 0.14.27 → 0.15.0

package/src/react-native-core/crypto/RNQuickCrypto.ts

@@ -0,0 +1,92 @@
+import { base58 } from "@scure/base";
+import {
+  JsonValue,
+  Stringified,
+  base64URLtoBytes,
+  bytesToBase64url,
+} from "cojson";
+import { CojsonInternalTypes, cojsonInternals } from "cojson";
+import { PureJSCrypto } from "cojson/dist/crypto/PureJSCrypto"; // Importing from dist to not rely on the exports field
+import { Ed, xsalsa20 } from "react-native-quick-crypto";
+const { stableStringify } = cojsonInternals;
+
+export class RNQuickCrypto extends PureJSCrypto {
+  ed: Ed;
+
+  constructor() {
+    super();
+    this.ed = new Ed("ed25519", {});
+  }
+
+  static async create(): Promise<RNQuickCrypto> {
+    return new RNQuickCrypto();
+  }
+
+  newEd25519SigningKey(): Uint8Array {
+    this.ed.generateKeyPairSync();
+    return new Uint8Array(this.ed.getPrivateKey());
+  }
+
+  sign(
+    secret: CojsonInternalTypes.SignerSecret,
+    message: JsonValue,
+  ): CojsonInternalTypes.Signature {
+    const signature = new Uint8Array(
+      this.ed.signSync(
+        cojsonInternals.textEncoder.encode(stableStringify(message)),
+        base58.decode(secret.substring("signerSecret_z".length)),
+      ),
+    );
+    return `signature_z${base58.encode(signature)}`;
+  }
+
+  verify(
+    signature: CojsonInternalTypes.Signature,
+    message: JsonValue,
+    id: CojsonInternalTypes.SignerID,
+  ): boolean {
+    return this.ed.verifySync(
+      base58.decode(signature.substring("signature_z".length)),
+      cojsonInternals.textEncoder.encode(stableStringify(message)),
+      base58.decode(id.substring("signer_z".length)),
+    );
+  }
+
+  encrypt<T extends JsonValue, N extends JsonValue>(
+    value: T,
+    keySecret: CojsonInternalTypes.KeySecret,
+    nOnceMaterial: N,
+  ): CojsonInternalTypes.Encrypted<T, N> {
+    const keySecretBytes = base58.decode(
+      keySecret.substring("keySecret_z".length),
+    );
+    const nOnce = this.generateJsonNonce(nOnceMaterial);
+
+    const plaintext = cojsonInternals.textEncoder.encode(
+      stableStringify(value),
+    );
+    const ciphertext = xsalsa20(keySecretBytes, nOnce, plaintext);
+    return `encrypted_U${bytesToBase64url(ciphertext)}` as CojsonInternalTypes.Encrypted<
+      T,
+      N
+    >;
+  }
+
+  decryptRaw<T extends JsonValue, N extends JsonValue>(
+    encrypted: CojsonInternalTypes.Encrypted<T, N>,
+    keySecret: CojsonInternalTypes.KeySecret,
+    nOnceMaterial: N,
+  ): Stringified<T> {
+    const keySecretBytes = base58.decode(
+      keySecret.substring("keySecret_z".length),
+    );
+    const nOnce = this.generateJsonNonce(nOnceMaterial);
+
+    const ciphertext = base64URLtoBytes(
+      encrypted.substring("encrypted_U".length),
+    );
+    const plaintext = xsalsa20(keySecretBytes, nOnce, ciphertext);
+
+    return cojsonInternals.textDecoder.decode(plaintext) as Stringified<T>;
+  }
+}

package/src/react-native-core/crypto/index.ts

@@ -0,0 +1 @@
+export { RNQuickCrypto } from "./RNQuickCrypto.js";

package/src/react-native-core/hooks.tsx

@@ -0,0 +1,64 @@
+import { useEffect } from "react";
+
+import { CoValueOrZodSchema, parseInviteLink } from "jazz-tools";
+import { useJazzContext } from "jazz-tools/react-core";
+import { Linking } from "react-native";
+
+export {
+  useCoState,
+  experimental_useInboxSender,
+  useDemoAuth,
+  usePassphraseAuth,
+  useJazzContext,
+  useAuthSecretStorage,
+  useIsAuthenticated,
+  useAccount,
+} from "jazz-tools/react-core";
+
+export function useAcceptInviteNative<S extends CoValueOrZodSchema>({
+  invitedObjectSchema,
+  onAccept,
+  forValueHint,
+}: {
+  invitedObjectSchema: S;
+  onAccept: (projectID: string) => void;
+  forValueHint?: string;
+}): void {
+  const context = useJazzContext();
+
+  if (!("me" in context)) {
+    throw new Error(
+      "useAcceptInviteNative can't be used in a JazzProvider with auth === 'guest'.",
+    );
+  }
+
+  useEffect(() => {
+    const handleDeepLink = ({ url }: { url: string }) => {
+      const result = parseInviteLink(url);
+      if (result && result.valueHint === forValueHint) {
+        context.me
+          .acceptInvite(
+            result.valueID,
+            result.inviteSecret,
+            invitedObjectSchema,
+          )
+          .then(() => {
+            onAccept(result.valueID);
+          })
+          .catch((e) => {
+            console.error("Failed to accept invite", e);
+          });
+      }
+    };
+
+    const linkingListener = Linking.addEventListener("url", handleDeepLink);
+
+    void Linking.getInitialURL().then((url) => {
+      if (url) handleDeepLink({ url });
+    });
+
+    return () => {
+      linkingListener.remove();
+    };
+  }, [context, onAccept, invitedObjectSchema, forValueHint]);
+}

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

@@ -0,0 +1,9 @@
+export * from "./provider.js";
+export * from "./auth/auth.js";
+export * from "./hooks.js";
+export * from "./media.js";
+export * from "./storage/kv-store-context.js";
+
+export { SQLiteDatabaseDriverAsync } from "cojson-storage";
+export { parseInviteLink } from "jazz-tools";
+export { createInviteLink, setupKvStore } from "./platform.js";

package/src/react-native-core/media.tsx

@@ -0,0 +1,99 @@
+import { ImageDefinition, Loaded } from "jazz-tools";
+import React, { useEffect, useState } from "react";
+
+/** @category Media */
+export function useProgressiveImgNative({
+  image,
+  maxWidth,
+  targetWidth,
+}: {
+  image: Loaded<typeof ImageDefinition> | null | undefined;
+  maxWidth?: number;
+  targetWidth?: number;
+}) {
+  const [current, setCurrent] = useState<
+    { src?: string; res?: `${number}x${number}` | "placeholder" } | undefined
+  >(undefined);
+
+  useEffect(() => {
+    let lastHighestRes: string | undefined;
+    if (!image) return;
+    const unsub = image.subscribe({}, (update) => {
+      const highestRes = ImageDefinition.highestResAvailable(update, {
+        maxWidth,
+        targetWidth,
+      });
+      if (highestRes && highestRes.res !== lastHighestRes) {
+        lastHighestRes = highestRes.res;
+        // use the base64 data directly
+        const chunks = highestRes.stream.getChunks();
+        if (chunks?.chunks && chunks.chunks.length > 0) {
+          // convert chunks to base64
+          const totalLength = chunks.chunks.reduce(
+            (acc, chunk) => acc + chunk.length,
+            0,
+          );
+          const combinedArray = new Uint8Array(totalLength);
+          let offset = 0;
+          chunks.chunks.forEach((chunk) => {
+            combinedArray.set(chunk, offset);
+            offset += chunk.length;
+          });
+
+          // Create data URL
+          const base64 = btoa(
+            Array.from(combinedArray, (byte) => String.fromCharCode(byte)).join(
+              "",
+            ),
+          );
+          const dataUrl = `data:${chunks.mimeType};base64,${base64}`;
+
+          setCurrent({
+            src: dataUrl,
+            res: highestRes.res,
+          });
+        } else {
+          // Fallback to placeholder if chunks aren't available
+          console.warn("No chunks available for image", image.id);
+          setCurrent({
+            src: update?.placeholderDataURL,
+            res: "placeholder",
+          });
+        }
+      } else if (!highestRes) {
+        setCurrent({
+          src: update?.placeholderDataURL,
+          res: "placeholder",
+        });
+      }
+    });
+
+    return unsub;
+  }, [image?.id, maxWidth]);
+
+  return {
+    src: current?.src,
+    res: current?.res,
+    originalSize: image?.originalSize,
+  };
+}
+
+/** @category Media */
+export function ProgressiveImgNative({
+  children,
+  image,
+  maxWidth,
+  targetWidth,
+}: {
+  children: (result: {
+    src: string | undefined;
+    res: `${number}x${number}` | "placeholder" | undefined;
+    originalSize: readonly [number, number] | undefined;
+  }) => React.ReactNode;
+  image: Loaded<typeof ImageDefinition> | null | undefined;
+  maxWidth?: number;
+  targetWidth?: number;
+}) {
+  const result = useProgressiveImgNative({ image, maxWidth, targetWidth });
+  return result && children(result);
+}

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

@@ -0,0 +1,250 @@
+import NetInfo from "@react-native-community/netinfo";
+import { LocalNode, Peer, RawAccountID } from "cojson";
+import { PureJSCrypto } from "cojson/dist/crypto/PureJSCrypto"; // Importing from dist to not rely on the exports field
+import {
+  Account,
+  AccountClass,
+  AccountSchema,
+  AgentID,
+  AnyAccountSchema,
+  AuthCredentials,
+  AuthSecretStorage,
+  CoValue,
+  CoValueClass,
+  CoValueFromRaw,
+  CryptoProvider,
+  ID,
+  InstanceOfSchema,
+  NewAccountProps,
+  SessionID,
+  SyncConfig,
+  createInviteLink as baseCreateInviteLink,
+  createAnonymousJazzContext,
+  createJazzContext,
+} from "jazz-tools";
+import { KvStore, KvStoreContext } from "./storage/kv-store-context.js";
+import { SQLiteReactNative } from "./storage/sqlite-react-native.js";
+
+import { SQLiteDatabaseDriverAsync } from "cojson-storage";
+import { WebSocketPeerWithReconnection } from "cojson-transport-ws";
+import type { RNQuickCrypto } from "./crypto/RNQuickCrypto.js";
+
+export type BaseReactNativeContextOptions = {
+  sync: SyncConfig;
+  reconnectionTimeout?: number;
+  storage?: SQLiteDatabaseDriverAsync | "disabled";
+  CryptoProvider?: typeof PureJSCrypto | typeof RNQuickCrypto;
+  authSecretStorage: AuthSecretStorage;
+};
+
+class ReactNativeWebSocketPeerWithReconnection extends WebSocketPeerWithReconnection {
+  onNetworkChange(callback: (connected: boolean) => void): () => void {
+    return NetInfo.addEventListener((state) =>
+      callback(state.isConnected ?? false),
+    );
+  }
+}
+
+async function setupPeers(options: BaseReactNativeContextOptions) {
+  const CryptoProvider = options.CryptoProvider || PureJSCrypto;
+  const crypto = await CryptoProvider.create();
+  let node: LocalNode | undefined = undefined;
+
+  const peersToLoadFrom: Peer[] = [];
+
+  if (options.storage && options.storage !== "disabled") {
+    const storage = await SQLiteReactNative.asPeer({
+      adapter: options.storage,
+    });
+    peersToLoadFrom.push(storage);
+  }
+
+  if (options.sync.when === "never") {
+    return {
+      toggleNetwork: () => {},
+      peersToLoadFrom,
+      setNode: () => {},
+      crypto,
+    };
+  }
+
+  const wsPeer = new ReactNativeWebSocketPeerWithReconnection({
+    peer: options.sync.peer,
+    reconnectionTimeout: options.reconnectionTimeout,
+    addPeer: (peer) => {
+      if (node) {
+        node.syncManager.addPeer(peer);
+      } else {
+        peersToLoadFrom.push(peer);
+      }
+    },
+    removePeer: (peer) => {
+      peersToLoadFrom.splice(peersToLoadFrom.indexOf(peer), 1);
+    },
+  });
+
+  function toggleNetwork(enabled: boolean) {
+    if (enabled) {
+      wsPeer.enable();
+    } else {
+      wsPeer.disable();
+    }
+  }
+
+  function setNode(value: LocalNode) {
+    node = value;
+  }
+
+  if (options.sync.when === "always" || !options.sync.when) {
+    toggleNetwork(true);
+  }
+
+  return {
+    toggleNetwork,
+    peersToLoadFrom,
+    setNode,
+    crypto,
+  };
+}
+
+export async function createJazzReactNativeGuestContext(
+  options: BaseReactNativeContextOptions,
+) {
+  const { toggleNetwork, peersToLoadFrom, setNode, crypto } =
+    await setupPeers(options);
+
+  const context = await createAnonymousJazzContext({
+    crypto,
+    peersToLoadFrom,
+  });
+
+  setNode(context.agent.node);
+
+  options.authSecretStorage.emitUpdate(null);
+
+  return {
+    guest: context.agent,
+    node: context.agent.node,
+    done: () => {
+      // TODO: Sync all the covalues before closing the connection & context
+      toggleNetwork(false);
+      context.done();
+    },
+    logOut: () => {
+      return context.logOut();
+    },
+  };
+}
+
+export type ReactNativeContextOptions<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+> = {
+  credentials?: AuthCredentials;
+  AccountSchema?: S;
+  newAccountProps?: NewAccountProps;
+  defaultProfileName?: string;
+} & BaseReactNativeContextOptions;
+
+export async function createJazzReactNativeContext<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+>(options: ReactNativeContextOptions<S>) {
+  const { toggleNetwork, peersToLoadFrom, setNode, crypto } =
+    await setupPeers(options);
+
+  let unsubscribeAuthUpdate = () => {};
+
+  if (options.sync.when === "signedUp") {
+    const authSecretStorage = options.authSecretStorage;
+    const credentials = options.credentials ?? (await authSecretStorage.get());
+
+    // To update the internal state with the current credentials
+    authSecretStorage.emitUpdate(credentials);
+
+    function handleAuthUpdate(isAuthenticated: boolean) {
+      if (isAuthenticated) {
+        toggleNetwork(true);
+      } else {
+        toggleNetwork(false);
+      }
+    }
+
+    unsubscribeAuthUpdate = authSecretStorage.onUpdate(handleAuthUpdate);
+    handleAuthUpdate(authSecretStorage.isAuthenticated);
+  }
+
+  const context = await createJazzContext({
+    credentials: options.credentials,
+    newAccountProps: options.newAccountProps,
+    peersToLoadFrom,
+    crypto,
+    defaultProfileName: options.defaultProfileName,
+    AccountSchema: options.AccountSchema,
+    sessionProvider: provideLockSession,
+    authSecretStorage: options.authSecretStorage,
+  });
+
+  setNode(context.node);
+
+  return {
+    me: context.account,
+    node: context.node,
+    authSecretStorage: context.authSecretStorage,
+    done: () => {
+      // TODO: Sync all the covalues before closing the connection & context
+      toggleNetwork(false);
+      unsubscribeAuthUpdate();
+      context.done();
+    },
+    logOut: () => {
+      unsubscribeAuthUpdate();
+      return context.logOut();
+    },
+  };
+}
+
+/** @category Auth Providers */
+export type SessionProvider = (
+  accountID: ID<Account> | AgentID,
+) => Promise<SessionID>;
+
+export async function provideLockSession(
+  accountID: ID<Account> | AgentID,
+  crypto: CryptoProvider,
+) {
+  const sessionDone = () => {};
+
+  const kvStore = KvStoreContext.getInstance().getStorage();
+
+  const sessionID =
+    ((await kvStore.get(accountID)) as SessionID) ||
+    crypto.newRandomSessionID(accountID as RawAccountID | AgentID);
+  await kvStore.set(accountID, sessionID);
+
+  return Promise.resolve({
+    sessionID,
+    sessionDone,
+  });
+}
+
+/** @category Invite Links */
+export function createInviteLink<C extends CoValue>(
+  value: C,
+  role: "reader" | "writer" | "admin",
+  { baseURL, valueHint }: { baseURL?: string; valueHint?: string } = {},
+): string {
+  return baseCreateInviteLink(value, role, baseURL ?? "", valueHint);
+}
+
+export function setupKvStore(
+  kvStore: KvStore | undefined,
+): KvStore | undefined {
+  if (!kvStore) {
+    return undefined;
+  }
+  KvStoreContext.getInstance().initialize(kvStore);
+  return kvStore;
+}

package/src/react-native-core/provider.tsx

@@ -0,0 +1,115 @@
+import {
+  Account,
+  AccountClass,
+  AnyAccountSchema,
+  CoValueFromRaw,
+  InstanceOfSchema,
+  JazzContextType,
+  KvStore,
+} from "jazz-tools";
+import { JazzContext, JazzContextManagerContext } from "jazz-tools/react-core";
+import React, { useEffect, useRef } from "react";
+import { JazzContextManagerProps } from "./ReactNativeContextManager.js";
+import { ReactNativeContextManager } from "./ReactNativeContextManager.js";
+import { setupKvStore } from "./platform.js";
+
+export type JazzProviderProps<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+> = {
+  children: React.ReactNode;
+  kvStore?: KvStore;
+} & JazzContextManagerProps<S>;
+
+/** @category Context & Hooks */
+export function JazzProviderCore<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+>({
+  children,
+  guestMode,
+  sync,
+  storage,
+  AccountSchema,
+  defaultProfileName,
+  onLogOut,
+  kvStore,
+  onAnonymousAccountDiscarded,
+  CryptoProvider,
+  logOutReplacement,
+}: JazzProviderProps<S>) {
+  setupKvStore(kvStore);
+
+  const [contextManager] = React.useState(
+    () => new ReactNativeContextManager<S>(),
+  );
+
+  const onAnonymousAccountDiscardedRefCallback = useRefCallback(
+    onAnonymousAccountDiscarded,
+  );
+  const onLogOutRefCallback = useRefCallback(onLogOut);
+  const logOutReplacementRefCallback = useRefCallback(logOutReplacement);
+  const logoutReplacementActiveRef = useRef(false);
+  logoutReplacementActiveRef.current = Boolean(logOutReplacement);
+
+  const value = React.useSyncExternalStore<
+    JazzContextType<InstanceOfSchema<S>> | undefined
+  >(
+    React.useCallback(
+      (callback) => {
+        const props = {
+          AccountSchema,
+          guestMode,
+          sync,
+          storage,
+          defaultProfileName,
+          onLogOut: onLogOutRefCallback,
+          logOutReplacement: logoutReplacementActiveRef.current
+            ? logOutReplacementRefCallback
+            : undefined,
+          onAnonymousAccountDiscarded: onAnonymousAccountDiscardedRefCallback,
+          CryptoProvider,
+        };
+        if (contextManager.propsChanged(props)) {
+          contextManager.createContext(props).catch((error) => {
+            console.log(error.stack);
+            console.error("Error creating Jazz context:", error);
+          });
+        }
+
+        return contextManager.subscribe(callback);
+      },
+      [sync, guestMode].concat(storage as any),
+    ),
+    () => contextManager.getCurrentValue(),
+    () => contextManager.getCurrentValue(),
+  );
+
+  useEffect(() => {
+    // In development mode we don't return a cleanup function because otherwise
+    // the double effect execution would mark the context as done immediately.
+    if (process.env.NODE_ENV === "development") return;
+
+    return () => {
+      contextManager.done();
+    };
+  }, []);
+
+  return (
+    <JazzContext.Provider value={value}>
+      <JazzContextManagerContext.Provider value={contextManager}>
+        {value && children}
+      </JazzContextManagerContext.Provider>
+    </JazzContext.Provider>
+  );
+}
+
+function useRefCallback<T extends (...args: any[]) => any>(callback?: T) {
+  const callbackRef = React.useRef(callback);
+  callbackRef.current = callback;
+  return useRef(
+    (...args: Parameters<T>): ReturnType<T> => callbackRef.current?.(...args),
+  ).current;
+}

package/src/react-native-core/storage/sqlite-react-native.ts

@@ -0,0 +1,19 @@
+import { type Peer } from "cojson";
+import { SQLiteDatabaseDriverAsync, SQLiteNodeBaseAsync } from "cojson-storage";
+
+export interface SQLiteConfig {
+  adapter: SQLiteDatabaseDriverAsync;
+}
+
+export class SQLiteReactNative extends SQLiteNodeBaseAsync {
+  static async asPeer(config: SQLiteConfig): Promise<Peer> {
+    if (!config.adapter) {
+      throw new Error("SQLite adapter is required");
+    }
+
+    return SQLiteNodeBaseAsync.create({
+      db: config.adapter,
+      localNodeName: "localNode",
+    });
+  }
+}

package/src/react-native-core/testing.tsx

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