jazz-react-native 0.12.1 → 0.13.0

package/src/auth/DemoAuthUI.tsx

@@ -1,202 +0,0 @@
-import { useDemoAuth } from "jazz-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/auth/auth.ts

@@ -1,14 +0,0 @@
-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"),
-  ]);
-}

package/src/crypto/RNQuickCrypto.ts

@@ -1,59 +0,0 @@
-import { base58 } from "@scure/base";
-import { JsonValue } 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 } from "react-native-quick-crypto";
-const { stableStringify } = cojsonInternals;
-
-const textEncoder = new TextEncoder();
-
-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());
-  }
-
-  getSignerID(
-    secret: CojsonInternalTypes.SignerSecret,
-  ): CojsonInternalTypes.SignerID {
-    return `signer_z${base58.encode(
-      base58.decode(secret.substring("signerSecret_z".length)),
-    )}`;
-  }
-
-  sign(
-    secret: CojsonInternalTypes.SignerSecret,
-    message: JsonValue,
-  ): CojsonInternalTypes.Signature {
-    const signature = new Uint8Array(
-      this.ed.signSync(
-        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)),
-      textEncoder.encode(stableStringify(message)),
-      base58.decode(id.substring("signer_z".length)),
-    );
-  }
-}

package/src/crypto/index.ts

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

package/src/hooks.tsx

@@ -1,72 +0,0 @@
-import { useEffect } from "react";
-
-import { useJazzContext } from "jazz-react-core";
-import { CoValue, CoValueClass, ID, parseInviteLink } from "jazz-tools";
-import { Linking } from "react-native";
-import { RegisteredAccount } from "./provider.js";
-
-export {
-  useCoState,
-  experimental_useInboxSender,
-  useDemoAuth,
-  usePassphraseAuth,
-  useJazzContext,
-  useAuthSecretStorage,
-  useIsAuthenticated,
-  useAccount,
-  useAccountOrGuest,
-} from "jazz-react-core";
-
-declare module "jazz-react-core" {
-  export interface Register {
-    Account: RegisteredAccount;
-  }
-}
-
-export function useAcceptInvite<V extends CoValue>({
-  invitedObjectSchema,
-  onAccept,
-  forValueHint,
-}: {
-  invitedObjectSchema: CoValueClass<V>;
-  onAccept: (projectID: ID<V>) => void;
-  forValueHint?: string;
-}): void {
-  const context = useJazzContext();
-
-  if (!("me" in context)) {
-    throw new Error(
-      "useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.",
-    );
-  }
-
-  useEffect(() => {
-    const handleDeepLink = ({ url }: { url: string }) => {
-      const result = parseInviteLink<V>(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/media.tsx

@@ -1,92 +0,0 @@
-import { ImageDefinition } from "jazz-tools";
-import React, { useEffect, useState } from "react";
-
-/** @category Media */
-export function useProgressiveImg({
-  image,
-  maxWidth,
-  targetWidth,
-}: {
-  image: 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 = update?.highestResAvailable({ 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 = Buffer.from(combinedArray).toString("base64");
-          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 ProgressiveImg({
-  children,
-  image,
-  maxWidth,
-  targetWidth,
-}: {
-  children: (result: {
-    src: string | undefined;
-    res: `${number}x${number}` | "placeholder" | undefined;
-    originalSize: readonly [number, number] | undefined;
-  }) => React.ReactNode;
-  image: ImageDefinition | null | undefined;
-  maxWidth?: number;
-  targetWidth?: number;
-}) {
-  const result = useProgressiveImg({ image, maxWidth, targetWidth });
-  return result && children(result);
-}

package/src/platform.ts

@@ -1,238 +0,0 @@
-import NetInfo from "@react-native-community/netinfo";
-import { LocalNode, Peer, RawAccountID } from "cojson";
-import { SQLiteStorage } from "cojson-storage-rn-sqlite";
-import { PureJSCrypto } from "cojson/dist/crypto/PureJSCrypto"; // Importing from dist to not rely on the exports field
-import {
-  Account,
-  AgentID,
-  AuthCredentials,
-  AuthSecretStorage,
-  CoValue,
-  CoValueClass,
-  CryptoProvider,
-  ID,
-  NewAccountProps,
-  SessionID,
-  SyncConfig,
-  createInviteLink as baseCreateInviteLink,
-  createAnonymousJazzContext,
-  createJazzContext,
-} from "jazz-tools";
-
-import { WebSocketPeerWithReconnection } from "cojson-transport-ws";
-import type { RNQuickCrypto } from "./crypto/RNQuickCrypto.js";
-import { ExpoSecureStoreAdapter } from "./storage/expo-secure-store-adapter.js";
-import { KvStoreContext } from "./storage/kv-store-context.js";
-
-export type BaseReactNativeContextOptions = {
-  sync: SyncConfig;
-  reconnectionTimeout?: number;
-  storage?: "sqlite" | "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 === "sqlite") {
-    const storage = await SQLiteStorage.asPeer({
-      filename: "jazz-storage",
-      trace: false,
-    });
-    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<Acc extends Account> = {
-  credentials?: AuthCredentials;
-  AccountSchema?: CoValueClass<Acc> & {
-    fromNode: (typeof Account)["fromNode"];
-  };
-  newAccountProps?: NewAccountProps;
-  defaultProfileName?: string;
-} & BaseReactNativeContextOptions;
-
-export async function createJazzReactNativeContext<Acc extends Account>(
-  options: ReactNativeContextOptions<Acc>,
-) {
-  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 = new ExpoSecureStoreAdapter()) {
-  KvStoreContext.getInstance().initialize(kvStore);
-
-  return kvStore;
-}

package/src/storage/expo-secure-store-adapter.ts

@@ -1,29 +0,0 @@
-import * as SecureStore from "expo-secure-store";
-import type { KvStore } from "./kv-store-context.js";
-
-export class ExpoSecureStoreAdapter implements KvStore {
-  get(key: string): Promise<string | null> {
-    return SecureStore.getItemAsync(key, {
-      requireAuthentication: false,
-      keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK,
-    });
-  }
-
-  async set(key: string, value: string): Promise<void> {
-    return SecureStore.setItemAsync(key, value, {
-      requireAuthentication: false,
-      keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK,
-    });
-  }
-
-  async delete(key: string): Promise<void> {
-    return SecureStore.deleteItemAsync(key, {
-      requireAuthentication: false,
-      keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK,
-    });
-  }
-
-  async clearAll(): Promise<void> {
-    throw new Error("Not implemented");
-  }
-}