jazz-tools 0.19.19 → 0.19.20

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;
+}

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

@@ -0,0 +1,85 @@
+import {
+  useAuthSecretStorage,
+  useIsAuthenticated,
+  useJazzContext,
+} from "jazz-tools/react-core";
+import { useMemo } from "react";
+import { ReactNativePasskeyAuth } from "./PasskeyAuth.js";
+
+/**
+ * React hook for passkey (WebAuthn) authentication in React Native apps.
+ *
+ * This hook provides a simple interface for signing up and logging in with passkeys,
+ * using the device's biometric authentication (FaceID/TouchID/fingerprint).
+ *
+ * **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
+ *
+ * @example
+ * ```tsx
+ * import { usePasskeyAuth } from "jazz-tools/react-native-core";
+ *
+ * function AuthScreen() {
+ *   const auth = usePasskeyAuth({
+ *     appName: "My App",
+ *     rpId: "myapp.com",
+ *   });
+ *
+ *   if (auth.state === "signedIn") {
+ *     return <MainApp />;
+ *   }
+ *
+ *   return (
+ *     <View>
+ *       <Button title="Sign Up" onPress={() => auth.signUp("John Doe")} />
+ *       <Button title="Log In" onPress={auth.logIn} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @param options.appName - The display name of your app shown during passkey prompts
+ * @param options.rpId - The relying party ID (your app's domain, e.g., "myapp.com")
+ *
+ * @category Auth Providers
+ */
+export function usePasskeyAuth({
+  appName,
+  rpId,
+}: {
+  appName: string;
+  rpId: string;
+}) {
+  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,
+  } as const;
+}