jazz-tools 0.19.19 → 0.19.21

package/dist/react-native/index.js

@@ -1,3 +1,7 @@
+import {
+  __require
+} from "./chunk-DGUM43GV.js";
+
 // src/react-native-core/storage/kv-store-context.ts
 var KvStoreContext = class _KvStoreContext {
   constructor() {
@@ -222,6 +226,507 @@ var styles = StyleSheet.create({
   }
 });
 
+// src/react-native-core/auth/PasskeyAuth.ts
+import { cojsonInternals } from "cojson";
+import {
+  Account
+} from "jazz-tools";
+
+// src/react-native-core/auth/passkey-utils.ts
+function uint8ArrayToBase64Url(bytes) {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  const base64 = btoa(binary);
+  return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function base64UrlToUint8Array(base64url) {
+  let base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
+  const padding = base64.length % 4;
+  if (padding > 0) {
+    base64 += "=".repeat(4 - padding);
+  }
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+// src/react-native-core/auth/PasskeyAuth.ts
+var cachedPasskeyModule = null;
+function getPasskeyModule() {
+  if (cachedPasskeyModule) {
+    return cachedPasskeyModule;
+  }
+  try {
+    const module = __require("react-native-passkey");
+    const passkeyModule = module.Passkey || module.default || module;
+    cachedPasskeyModule = passkeyModule;
+    return passkeyModule;
+  } catch (e) {
+    console.error("Failed to load react-native-passkey:", e);
+    throw new Error(
+      "react-native-passkey is not installed. Please install it to use passkey authentication: npm install react-native-passkey"
+    );
+  }
+}
+function setPasskeyModule(module) {
+  cachedPasskeyModule = module;
+}
+async function isPasskeySupported() {
+  try {
+    const module = getPasskeyModule();
+    return await module.isSupported();
+  } catch {
+    return false;
+  }
+}
+var ReactNativePasskeyAuth = class {
+  constructor(crypto, authenticate, authSecretStorage, appName, rpId) {
+    this.crypto = crypto;
+    this.authenticate = authenticate;
+    this.authSecretStorage = authSecretStorage;
+    this.appName = appName;
+    this.rpId = rpId;
+    /**
+     * Log in using an existing passkey.
+     * This will prompt the user to authenticate with their device biometrics.
+     */
+    this.logIn = async () => {
+      const { crypto, authenticate } = this;
+      const webAuthNCredential = await this.getPasskeyCredentials();
+      if (!webAuthNCredential) {
+        return;
+      }
+      if (!webAuthNCredential.response.userHandle) {
+        throw new Error("Passkey credential is missing userHandle");
+      }
+      const webAuthNCredentialPayload = base64UrlToUint8Array(
+        webAuthNCredential.response.userHandle
+      );
+      const accountSecretSeed = webAuthNCredentialPayload.slice(
+        0,
+        cojsonInternals.secretSeedLength
+      );
+      const secret = crypto.agentSecretFromSecretSeed(accountSecretSeed);
+      const accountID = cojsonInternals.rawCoIDfromBytes(
+        webAuthNCredentialPayload.slice(
+          cojsonInternals.secretSeedLength,
+          cojsonInternals.secretSeedLength + cojsonInternals.shortHashLength
+        )
+      );
+      await authenticate({
+        accountID,
+        accountSecret: secret
+      });
+      await this.authSecretStorage.set({
+        accountID,
+        secretSeed: accountSecretSeed,
+        accountSecret: secret,
+        provider: "passkey"
+      });
+    };
+    /**
+     * Register a new passkey for the current account.
+     * This will create a passkey that stores the account credentials securely on the device.
+     *
+     * @param username - The display name for the passkey
+     */
+    this.signUp = async (username) => {
+      const credentials = await this.authSecretStorage.get();
+      if (!credentials?.secretSeed) {
+        throw new Error(
+          "Not enough credentials to register the account with passkey"
+        );
+      }
+      await this.createPasskeyCredentials({
+        accountID: credentials.accountID,
+        secretSeed: credentials.secretSeed,
+        username
+      });
+      const currentAccount = await Account.getMe().$jazz.ensureLoaded({
+        resolve: {
+          profile: true
+        }
+      });
+      if (username.trim().length !== 0) {
+        currentAccount.profile.$jazz.set("name", username);
+      }
+      await this.authSecretStorage.set({
+        accountID: credentials.accountID,
+        secretSeed: credentials.secretSeed,
+        accountSecret: credentials.accountSecret,
+        provider: "passkey"
+      });
+    };
+  }
+  async createPasskeyCredentials({
+    accountID,
+    secretSeed,
+    username
+  }) {
+    const webAuthNCredentialPayload = new Uint8Array(
+      cojsonInternals.secretSeedLength + cojsonInternals.shortHashLength
+    );
+    webAuthNCredentialPayload.set(secretSeed);
+    webAuthNCredentialPayload.set(
+      cojsonInternals.rawCoIDtoBytes(accountID),
+      cojsonInternals.secretSeedLength
+    );
+    const challenge = uint8ArrayToBase64Url(
+      new Uint8Array(this.crypto.randomBytes(32))
+    );
+    const userId = uint8ArrayToBase64Url(webAuthNCredentialPayload);
+    const passkey = getPasskeyModule();
+    try {
+      await passkey.create({
+        challenge,
+        rp: {
+          id: this.rpId,
+          name: this.appName
+        },
+        user: {
+          id: userId,
+          name: `${username} (${(/* @__PURE__ */ new Date()).toLocaleString()})`,
+          displayName: username
+        },
+        pubKeyCredParams: [
+          { alg: -7, type: "public-key" },
+          // ES256
+          { alg: -257, type: "public-key" }
+          // RS256
+        ],
+        authenticatorSelection: {
+          residentKey: "required",
+          userVerification: "preferred"
+        },
+        timeout: 6e4,
+        attestation: "none"
+      });
+    } catch (error) {
+      throw new Error("Passkey creation aborted", { cause: error });
+    }
+  }
+  async getPasskeyCredentials() {
+    const challenge = uint8ArrayToBase64Url(
+      new Uint8Array(this.crypto.randomBytes(32))
+    );
+    const passkey = getPasskeyModule();
+    try {
+      const result = await passkey.get({
+        challenge,
+        rpId: this.rpId,
+        timeout: 6e4,
+        userVerification: "preferred"
+      });
+      return result;
+    } catch (error) {
+      throw new Error("Passkey authentication aborted", { cause: error });
+    }
+  }
+};
+ReactNativePasskeyAuth.id = "passkey";
+
+// src/react-native-core/auth/usePasskeyAuth.tsx
+import {
+  useAuthSecretStorage,
+  useIsAuthenticated,
+  useJazzContext
+} from "jazz-tools/react-core";
+import { useMemo } from "react";
+function usePasskeyAuth({
+  appName,
+  rpId
+}) {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+  if ("guest" in context) {
+    throw new Error("Passkey auth is not supported in guest mode");
+  }
+  const authMethod = useMemo(() => {
+    return new ReactNativePasskeyAuth(
+      context.node.crypto,
+      context.authenticate,
+      authSecretStorage,
+      appName,
+      rpId
+    );
+  }, [
+    appName,
+    rpId,
+    authSecretStorage,
+    context.node.crypto,
+    context.authenticate
+  ]);
+  const isAuthenticated = useIsAuthenticated();
+  return {
+    state: isAuthenticated ? "signedIn" : "anonymous",
+    logIn: authMethod.logIn,
+    signUp: authMethod.signUp
+  };
+}
+
+// src/react-native-core/auth/PasskeyAuthBasicUI.tsx
+import { useState as useState2 } from "react";
+import {
+  StyleSheet as StyleSheet2,
+  Text as Text2,
+  TextInput as TextInput2,
+  TouchableOpacity as TouchableOpacity2,
+  View as View2,
+  useColorScheme as useColorScheme2
+} from "react-native";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PasskeyAuthBasicUI = ({
+  appName,
+  rpId,
+  children
+}) => {
+  const colorScheme = useColorScheme2();
+  const darkMode = colorScheme === "dark";
+  const [username, setUsername] = useState2("");
+  const [errorMessage, setErrorMessage] = useState2(null);
+  const auth = usePasskeyAuth({ appName, rpId });
+  const handleSignUp = () => {
+    setErrorMessage(null);
+    auth.signUp(username).catch((error) => {
+      if (error.cause instanceof Error) {
+        setErrorMessage(error.cause.message);
+      } else {
+        setErrorMessage(error.message);
+      }
+    });
+  };
+  const handleLogIn = () => {
+    setErrorMessage(null);
+    auth.logIn().catch((error) => {
+      if (error.cause instanceof Error) {
+        setErrorMessage(error.cause.message);
+      } else {
+        setErrorMessage(error.message);
+      }
+    });
+  };
+  if (auth.state === "signedIn") {
+    return children;
+  }
+  return /* @__PURE__ */ jsx2(
+    View2,
+    {
+      style: [
+        styles2.container,
+        darkMode ? styles2.darkBackground : styles2.lightBackground
+      ],
+      children: /* @__PURE__ */ jsxs2(View2, { style: styles2.formContainer, children: [
+        /* @__PURE__ */ jsx2(
+          Text2,
+          {
+            style: [
+              styles2.headerText,
+              darkMode ? styles2.darkText : styles2.lightText
+            ],
+            children: appName
+          }
+        ),
+        errorMessage && /* @__PURE__ */ jsx2(Text2, { style: styles2.errorText, children: errorMessage }),
+        /* @__PURE__ */ jsx2(
+          TextInput2,
+          {
+            placeholder: "Display name",
+            value: username,
+            onChangeText: setUsername,
+            placeholderTextColor: darkMode ? "#999" : "#666",
+            style: [
+              styles2.textInput,
+              darkMode ? styles2.darkInput : styles2.lightInput
+            ],
+            autoCapitalize: "words",
+            autoCorrect: false
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TouchableOpacity2,
+          {
+            onPress: handleSignUp,
+            style: [
+              styles2.button,
+              darkMode ? styles2.darkButton : styles2.lightButton
+            ],
+            children: /* @__PURE__ */ jsx2(
+              Text2,
+              {
+                style: darkMode ? styles2.darkButtonText : styles2.lightButtonText,
+                children: "Sign Up with Passkey"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs2(View2, { style: styles2.divider, children: [
+          /* @__PURE__ */ jsx2(
+            View2,
+            {
+              style: [
+                styles2.dividerLine,
+                darkMode ? styles2.darkDivider : styles2.lightDivider
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            Text2,
+            {
+              style: [
+                styles2.dividerText,
+                darkMode ? styles2.darkText : styles2.lightText
+              ],
+              children: "or"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            View2,
+            {
+              style: [
+                styles2.dividerLine,
+                darkMode ? styles2.darkDivider : styles2.lightDivider
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          TouchableOpacity2,
+          {
+            onPress: handleLogIn,
+            style: [
+              styles2.secondaryButton,
+              darkMode ? styles2.darkSecondaryButton : styles2.lightSecondaryButton
+            ],
+            children: /* @__PURE__ */ jsx2(Text2, { style: darkMode ? styles2.darkText : styles2.lightText, children: "Log In with Existing Passkey" })
+          }
+        )
+      ] })
+    }
+  );
+};
+var styles2 = StyleSheet2.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20
+  },
+  formContainer: {
+    width: "80%",
+    maxWidth: 300,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerText: {
+    fontSize: 24,
+    fontWeight: "600",
+    marginBottom: 30
+  },
+  errorText: {
+    color: "#ff4444",
+    marginVertical: 10,
+    textAlign: "center",
+    fontSize: 14
+  },
+  textInput: {
+    borderWidth: 1,
+    padding: 12,
+    marginVertical: 10,
+    width: "100%",
+    borderRadius: 8,
+    fontSize: 16
+  },
+  darkInput: {
+    borderColor: "#444",
+    backgroundColor: "#1a1a1a",
+    color: "#fff"
+  },
+  lightInput: {
+    borderColor: "#ddd",
+    backgroundColor: "#fff",
+    color: "#000"
+  },
+  button: {
+    paddingVertical: 14,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    width: "100%",
+    marginVertical: 10
+  },
+  darkButton: {
+    backgroundColor: "#0066cc"
+  },
+  lightButton: {
+    backgroundColor: "#007aff"
+  },
+  darkButtonText: {
+    color: "#fff",
+    textAlign: "center",
+    fontWeight: "600",
+    fontSize: 16
+  },
+  lightButtonText: {
+    color: "#fff",
+    textAlign: "center",
+    fontWeight: "600",
+    fontSize: 16
+  },
+  divider: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    marginVertical: 20
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1
+  },
+  darkDivider: {
+    backgroundColor: "#444"
+  },
+  lightDivider: {
+    backgroundColor: "#ddd"
+  },
+  dividerText: {
+    marginHorizontal: 10,
+    fontSize: 14
+  },
+  secondaryButton: {
+    paddingVertical: 14,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    width: "100%",
+    borderWidth: 1
+  },
+  darkSecondaryButton: {
+    borderColor: "#444",
+    backgroundColor: "transparent"
+  },
+  lightSecondaryButton: {
+    borderColor: "#ddd",
+    backgroundColor: "transparent"
+  },
+  darkText: {
+    color: "#fff",
+    textAlign: "center"
+  },
+  lightText: {
+    color: "#000",
+    textAlign: "center"
+  },
+  darkBackground: {
+    backgroundColor: "#000"
+  },
+  lightBackground: {
+    backgroundColor: "#fff"
+  }
+});
+
 // src/react-native-core/auth/auth.ts
 function clearUserCredentials() {
   const kvStore = KvStoreContext.getInstance().getStorage();
@@ -235,16 +740,17 @@ function clearUserCredentials() {
 // src/react-native-core/hooks.tsx
 import { useEffect } from "react";
 import { parseInviteLink } from "jazz-tools";
-import { useJazzContext } from "jazz-tools/react-core";
+import { useJazzContext as useJazzContext2 } from "jazz-tools/react-core";
 import { Linking } from "react-native";
 import {
   useCoState,
+  useCoStates,
   experimental_useInboxSender,
   useDemoAuth,
   usePassphraseAuth,
-  useJazzContext as useJazzContext2,
-  useAuthSecretStorage,
-  useIsAuthenticated,
+  useJazzContext as useJazzContext3,
+  useAuthSecretStorage as useAuthSecretStorage2,
+  useIsAuthenticated as useIsAuthenticated2,
   useAccount,
   useAgent,
   useLogOut,
@@ -253,6 +759,7 @@ import {
   useAccountSubscription,
   useSubscriptionSelector,
   useSuspenseCoState,
+  useSuspenseCoStates,
   useSuspenseAccount
 } from "jazz-tools/react-core";
 function useAcceptInviteNative({
@@ -260,7 +767,7 @@ function useAcceptInviteNative({
   onAccept,
   forValueHint
 }) {
-  const context = useJazzContext();
+  const context = useJazzContext2();
   if (!("me" in context)) {
     throw new Error(
       "useAcceptInviteNative can't be used in a JazzProvider with auth === 'guest'."
@@ -293,7 +800,7 @@ function useAcceptInviteNative({
 
 // src/react-native-core/provider.tsx
 import { JazzContext, JazzContextManagerContext } from "jazz-tools/react-core";
-import React2, { useEffect as useEffect2, useRef } from "react";
+import React3, { useEffect as useEffect2, useRef } from "react";
 
 // src/react-native-core/ReactNativeContextManager.ts
 import {
@@ -376,8 +883,8 @@ var ReactNativeWebSocketPeerWithReconnection = class extends WebSocketPeerWithRe
   }
 };
 async function setupPeers(options) {
-  const CryptoProvider2 = options.CryptoProvider || PureJSCrypto;
-  const crypto = await CryptoProvider2.create();
+  const CryptoProvider3 = options.CryptoProvider || PureJSCrypto;
+  const crypto = await CryptoProvider3.create();
   let node = void 0;
   const peers = [];
   const storage2 = options.storage && options.storage !== "disabled" ? await getSqliteStorageAsync(options.storage) : void 0;
@@ -577,7 +1084,7 @@ var ReactNativeContextManager = class extends JazzContextManager {
 };
 
 // src/react-native-core/provider.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function JazzProviderCore({
   children,
   guestMode,
@@ -589,11 +1096,11 @@ function JazzProviderCore({
   logOutReplacement,
   onAnonymousAccountDiscarded,
   kvStore,
-  CryptoProvider: CryptoProvider2,
+  CryptoProvider: CryptoProvider3,
   authSecretStorageKey
 }) {
   setupKvStore(kvStore);
-  const [contextManager] = React2.useState(
+  const [contextManager] = React3.useState(
     () => new ReactNativeContextManager({ authSecretStorageKey })
   );
   const onLogOutRefCallback = useRefCallback(onLogOut);
@@ -606,8 +1113,8 @@ function JazzProviderCore({
   const onAnonymousAccountDiscardedEnabled = Boolean(
     onAnonymousAccountDiscarded
   );
-  const value = React2.useSyncExternalStore(
-    React2.useCallback(
+  const value = React3.useSyncExternalStore(
+    React3.useCallback(
       (callback) => {
         const props = {
           AccountSchema,
@@ -618,7 +1125,7 @@ function JazzProviderCore({
           onLogOut: onLogOutRefCallback,
           logOutReplacement: logoutReplacementActiveRef.current ? logOutReplacementRefCallback : void 0,
           onAnonymousAccountDiscarded: onAnonymousAccountDiscardedEnabled ? onAnonymousAccountDiscardedRefCallback : void 0,
-          CryptoProvider: CryptoProvider2
+          CryptoProvider: CryptoProvider3
         };
         if (contextManager.propsChanged(props)) {
           contextManager.createContext(props).catch((error) => {
@@ -639,10 +1146,10 @@ function JazzProviderCore({
       contextManager.done();
     };
   }, []);
-  return /* @__PURE__ */ jsx2(JazzContext.Provider, { value, children: /* @__PURE__ */ jsx2(JazzContextManagerContext.Provider, { value: contextManager, children: value && children }) });
+  return /* @__PURE__ */ jsx3(JazzContext.Provider, { value, children: /* @__PURE__ */ jsx3(JazzContextManagerContext.Provider, { value: contextManager, children: value && children }) });
 }
 function useRefCallback(callback) {
-  const callbackRef = React2.useRef(callback);
+  const callbackRef = React3.useRef(callback);
   callbackRef.current = callback;
   return useRef(
     (...args) => callbackRef.current?.(...args)
@@ -652,17 +1159,17 @@ function useRefCallback(callback) {
 // src/react-native-core/media/image.tsx
 import { ImageDefinition } from "jazz-tools";
 import { highestResAvailable } from "jazz-tools/media";
-import { forwardRef, useEffect as useEffect3, useMemo, useState as useState2 } from "react";
+import { forwardRef, useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
 import { Image as RNImage } from "react-native";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Image = forwardRef(function Image2({ imageId, width, height, placeholder, ...props }, ref) {
   const image = useCoState(ImageDefinition, imageId, {
     select: (image2) => image2.$isLoaded ? image2 : null
   });
-  const [src, setSrc] = useState2(
+  const [src, setSrc] = useState3(
     image?.placeholderDataURL ?? "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
   );
-  const dimensions = useMemo(() => {
+  const dimensions = useMemo2(() => {
     const originalWidth = image?.originalSize?.[0];
     const originalHeight = image?.originalSize?.[1];
     if (width === "original" && height === "original") {
@@ -717,7 +1224,7 @@ var Image = forwardRef(function Image2({ imageId, width, height, placeholder, ..
   if (!src) {
     return null;
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     RNImage,
     {
       ref,
@@ -741,7 +1248,7 @@ import { parseInviteLink as parseInviteLink2 } from "jazz-tools";
 import {
   JazzProviderCore as JazzProviderCore2
 } from "jazz-tools/react-native-core";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 
 // src/react-native/storage/mmkv-store-adapter.ts
 import { MMKV } from "react-native-mmkv";
@@ -821,15 +1328,15 @@ var OPSQLiteAdapter = class {
 };
 
 // src/react-native/provider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function JazzReactNativeProvider(props) {
-  const storage2 = useMemo2(() => {
+  const storage2 = useMemo3(() => {
     return props.storage ?? new OPSQLiteAdapter();
   }, [props.storage]);
-  const kvStore = useMemo2(() => {
+  const kvStore = useMemo3(() => {
     return props.kvStore ?? new MMKVStore();
   }, [props.kvStore]);
-  return /* @__PURE__ */ jsx4(JazzProviderCore2, { ...props, storage: storage2, kvStore });
+  return /* @__PURE__ */ jsx5(JazzProviderCore2, { ...props, storage: storage2, kvStore });
 }
 export {
   DemoAuthBasicUI,
@@ -839,30 +1346,38 @@ export {
   KvStoreContext,
   MMKVStore,
   OPSQLiteAdapter,
+  PasskeyAuthBasicUI,
   ReactNativeContextManager,
+  ReactNativePasskeyAuth,
   SQLiteDatabaseDriverAsync,
   clearUserCredentials,
   createAccountSubscriptionContext,
   createCoValueSubscriptionContext,
   createInviteLink,
   experimental_useInboxSender,
+  getPasskeyModule,
+  isPasskeySupported,
   parseInviteLink2 as parseInviteLink,
+  setPasskeyModule,
   setupKvStore,
   useAcceptInviteNative,
   useAccount,
   useAccountSubscription,
   useAgent,
-  useAuthSecretStorage,
+  useAuthSecretStorage2 as useAuthSecretStorage,
   useCoState,
+  useCoStates,
   useCoValueSubscription,
   useDemoAuth,
-  useIsAuthenticated,
-  useJazzContext2 as useJazzContext,
+  useIsAuthenticated2 as useIsAuthenticated,
+  useJazzContext3 as useJazzContext,
   useLogOut,
+  usePasskeyAuth,
   usePassphraseAuth,
   useSubscriptionSelector,
   useSuspenseAccount,
   useSuspenseCoState,
+  useSuspenseCoStates,
   useSyncConnectionStatus
 };
 //# sourceMappingURL=index.js.map