jazz-tools 0.19.19 → 0.19.21

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

@@ -0,0 +1,316 @@
+import { CryptoProvider, RawAccountID, cojsonInternals } from "cojson";
+import {
+  Account,
+  AuthSecretStorage,
+  AuthenticateAccountFunction,
+  ID,
+} from "jazz-tools";
+import {
+  base64UrlToUint8Array,
+  uint8ArrayToBase64Url,
+} from "./passkey-utils.js";
+
+// Types for react-native-passkey library
+// We define these here to avoid requiring the library as a direct dependency
+interface PasskeyCreateRequest {
+  challenge: string;
+  rp: {
+    id: string;
+    name: string;
+  };
+  user: {
+    id: string;
+    name: string;
+    displayName: string;
+  };
+  pubKeyCredParams: Array<{ alg: number; type: "public-key" }>;
+  authenticatorSelection?: {
+    authenticatorAttachment?: "platform" | "cross-platform";
+    requireResidentKey?: boolean;
+    residentKey?: "discouraged" | "preferred" | "required";
+    userVerification?: "discouraged" | "preferred" | "required";
+  };
+  timeout?: number;
+  attestation?: "none" | "indirect" | "direct" | "enterprise";
+}
+
+interface PasskeyGetRequest {
+  challenge: string;
+  rpId: string;
+  allowCredentials?: Array<{
+    id: string;
+    type: "public-key";
+    transports?: Array<"usb" | "nfc" | "ble" | "internal" | "hybrid">;
+  }>;
+  timeout?: number;
+  userVerification?: "discouraged" | "preferred" | "required";
+}
+
+interface PasskeyGetResult {
+  id: string;
+  rawId: string;
+  type: "public-key";
+  response: {
+    clientDataJSON: string;
+    authenticatorData: string;
+    signature: string;
+    userHandle: string | null;
+  };
+}
+
+/**
+ * Interface for the react-native-passkey module.
+ * @internal
+ */
+export interface PasskeyModule {
+  create: (request: PasskeyCreateRequest) => Promise<unknown>;
+  get: (request: PasskeyGetRequest) => Promise<PasskeyGetResult | null>;
+  isSupported: () => Promise<boolean>;
+}
+
+let cachedPasskeyModule: PasskeyModule | null = null;
+
+/**
+ * Lazily loads the react-native-passkey module.
+ * This allows the module to be an optional peer dependency.
+ * @internal
+ */
+export function getPasskeyModule(): PasskeyModule {
+  if (cachedPasskeyModule) {
+    return cachedPasskeyModule;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const module = require("react-native-passkey");
+    const passkeyModule: 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",
+    );
+  }
+}
+
+/**
+ * Sets a custom passkey module (for testing purposes).
+ * @internal
+ */
+export function setPasskeyModule(module: PasskeyModule | null): void {
+  cachedPasskeyModule = module;
+}
+
+/**
+ * Check if passkeys are supported on the current device.
+ * Returns false if the react-native-passkey module is not available or if the device doesn't support passkeys.
+ */
+export async function isPasskeySupported(): Promise<boolean> {
+  try {
+    const module = getPasskeyModule();
+    return await module.isSupported();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * `ReactNativePasskeyAuth` provides passkey (WebAuthn) authentication for React Native apps.
+ *
+ * This class uses the device's biometric authentication (FaceID/TouchID/fingerprint) to
+ * securely store and retrieve Jazz account credentials.
+ *
+ * **Requirements:**
+ * - Install `react-native-passkey` as a peer dependency
+ * - Configure your app's associated domains (iOS) and asset links (Android)
+ * - Passkeys require HTTPS domain verification
+ *
+ * ```ts
+ * import { ReactNativePasskeyAuth } from "jazz-tools/react-native-core";
+ *
+ * const auth = new ReactNativePasskeyAuth(
+ *   crypto,
+ *   authenticate,
+ *   authSecretStorage,
+ *   "My App",
+ *   "myapp.com"
+ * );
+ * ```
+ *
+ * @category Auth Providers
+ */
+export class ReactNativePasskeyAuth {
+  constructor(
+    protected crypto: CryptoProvider,
+    protected authenticate: AuthenticateAccountFunction,
+    protected authSecretStorage: AuthSecretStorage,
+    public appName: string,
+    public rpId: string,
+  ) {}
+
+  static readonly id = "passkey";
+
+  /**
+   * Log in using an existing passkey.
+   * This will prompt the user to authenticate with their device biometrics.
+   */
+  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,
+      ),
+    ) as ID<Account>;
+
+    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
+   */
+  signUp = async (username: string) => {
+    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",
+    });
+  };
+
+  private async createPasskeyCredentials({
+    accountID,
+    secretSeed,
+    username,
+  }: {
+    accountID: ID<Account>;
+    secretSeed: Uint8Array;
+    username: string;
+  }) {
+    const webAuthNCredentialPayload = new Uint8Array(
+      cojsonInternals.secretSeedLength + cojsonInternals.shortHashLength,
+    );
+
+    webAuthNCredentialPayload.set(secretSeed);
+    webAuthNCredentialPayload.set(
+      cojsonInternals.rawCoIDtoBytes(accountID as unknown as RawAccountID),
+      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} (${new Date().toLocaleString()})`,
+          displayName: username,
+        },
+        pubKeyCredParams: [
+          { alg: -7, type: "public-key" }, // ES256
+          { alg: -257, type: "public-key" }, // RS256
+        ],
+        authenticatorSelection: {
+          residentKey: "required",
+          userVerification: "preferred",
+        },
+        timeout: 60000,
+        attestation: "none",
+      });
+    } catch (error) {
+      throw new Error("Passkey creation aborted", { cause: error });
+    }
+  }
+
+  private async getPasskeyCredentials(): Promise<PasskeyGetResult | null> {
+    const challenge = uint8ArrayToBase64Url(
+      new Uint8Array(this.crypto.randomBytes(32)),
+    );
+
+    const passkey = getPasskeyModule();
+
+    try {
+      const result = await passkey.get({
+        challenge,
+        rpId: this.rpId,
+        timeout: 60000,
+        userVerification: "preferred",
+      });
+
+      return result;
+    } catch (error) {
+      throw new Error("Passkey authentication aborted", { cause: error });
+    }
+  }
+}

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

@@ -0,0 +1,284 @@
+import React, { useState } from "react";
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  useColorScheme,
+} from "react-native";
+import { usePasskeyAuth } from "./usePasskeyAuth.js";
+
+/**
+ * A basic UI component for passkey authentication in React Native apps.
+ *
+ * This component provides a simple sign-up and log-in interface using passkeys.
+ * It's designed for quick prototyping and can be customized or replaced with
+ * your own authentication UI.
+ *
+ * @example
+ * ```tsx
+ * import { PasskeyAuthBasicUI } from "jazz-tools/react-native-core";
+ *
+ * function App() {
+ *   return (
+ *     <JazzProvider ...>
+ *       <PasskeyAuthBasicUI
+ *         appName="My App"
+ *         rpId="myapp.com"
+ *       >
+ *         <MainApp />
+ *       </PasskeyAuthBasicUI>
+ *     </JazzProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @category Auth Providers
+ */
+export const PasskeyAuthBasicUI = ({
+  appName,
+  rpId,
+  children,
+}: {
+  appName: string;
+  rpId: string;
+  children: React.ReactNode;
+}) => {
+  const colorScheme = useColorScheme();
+  const darkMode = colorScheme === "dark";
+  const [username, setUsername] = useState<string>("");
+  const [errorMessage, setErrorMessage] = useState<string | null>(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 (
+    <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 ? "#999" : "#666"}
+          style={[
+            styles.textInput,
+            darkMode ? styles.darkInput : styles.lightInput,
+          ]}
+          autoCapitalize="words"
+          autoCorrect={false}
+        />
+
+        <TouchableOpacity
+          onPress={handleSignUp}
+          style={[
+            styles.button,
+            darkMode ? styles.darkButton : styles.lightButton,
+          ]}
+        >
+          <Text
+            style={darkMode ? styles.darkButtonText : styles.lightButtonText}
+          >
+            Sign Up with Passkey
+          </Text>
+        </TouchableOpacity>
+
+        <View style={styles.divider}>
+          <View
+            style={[
+              styles.dividerLine,
+              darkMode ? styles.darkDivider : styles.lightDivider,
+            ]}
+          />
+          <Text
+            style={[
+              styles.dividerText,
+              darkMode ? styles.darkText : styles.lightText,
+            ]}
+          >
+            or
+          </Text>
+          <View
+            style={[
+              styles.dividerLine,
+              darkMode ? styles.darkDivider : styles.lightDivider,
+            ]}
+          />
+        </View>
+
+        <TouchableOpacity
+          onPress={handleLogIn}
+          style={[
+            styles.secondaryButton,
+            darkMode ? styles.darkSecondaryButton : styles.lightSecondaryButton,
+          ]}
+        >
+          <Text style={darkMode ? styles.darkText : styles.lightText}>
+            Log In with Existing Passkey
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.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",
+  },
+});

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

@@ -1,6 +1,9 @@
 import { KvStoreContext } from "../storage/kv-store-context.js";
 
 export * from "./DemoAuthUI.js";
+export * from "./PasskeyAuth.js";
+export * from "./usePasskeyAuth.js";
+export * from "./PasskeyAuthBasicUI.js";
 
 export function clearUserCredentials() {
   const kvStore = KvStoreContext.getInstance().getStorage();

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

@@ -0,0 +1,47 @@
+/**
+ * Utility functions for base64url encoding/decoding used by React Native passkey authentication.
+ *
+ * The react-native-passkey library uses base64url strings, while the browser WebAuthn API
+ * uses raw ArrayBuffers. These utilities handle the conversion between formats.
+ */
+
+/**
+ * Converts a Uint8Array to a base64url-encoded string.
+ * Base64url uses '-' and '_' instead of '+' and '/', and omits padding '='.
+ */
+export function uint8ArrayToBase64Url(bytes: Uint8Array): string {
+  // Convert to regular base64 first
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]!);
+  }
+  const base64 = btoa(binary);
+
+  // Convert to base64url: replace + with -, / with _, remove =
+  return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+/**
+ * Converts a base64url-encoded string to a Uint8Array.
+ */
+export function base64UrlToUint8Array(base64url: string): Uint8Array {
+  // Convert base64url to regular base64
+  let base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
+
+  // Add padding if needed
+  const padding = base64.length % 4;
+  if (padding > 0) {
+    base64 += "=".repeat(4 - padding);
+  }
+
+  // Decode base64 to binary string
+  const binary = atob(base64);
+
+  // Convert binary string to Uint8Array
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+
+  return bytes;
+}