jazz-tools 0.14.27 → 0.15.0

package/src/react/auth/PasskeyAuth.tsx

@@ -0,0 +1,168 @@
+import { BrowserPasskeyAuth } from "jazz-tools/browser";
+import {
+  useAuthSecretStorage,
+  useIsAuthenticated,
+  useJazzContext,
+} from "jazz-tools/react-core";
+import { useMemo, useState } from "react";
+
+/**
+ * `usePasskeyAuth` hook provides a `JazzAuth` object for passkey authentication.
+ *
+ * @example
+ * ```ts
+ * const auth = usePasskeyAuth({ appName, appHostname });
+ * ```
+ *
+ * @category Auth Providers
+ */
+export function usePasskeyAuth({
+  appName,
+  appHostname,
+}: {
+  appName: string;
+  appHostname?: 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 BrowserPasskeyAuth(
+      context.node.crypto,
+      context.authenticate,
+      authSecretStorage,
+      appName,
+      appHostname,
+    );
+  }, [appName, appHostname, authSecretStorage]);
+
+  const isAuthenticated = useIsAuthenticated();
+
+  return {
+    state: isAuthenticated ? "signedIn" : "anonymous",
+    logIn: authMethod.logIn,
+    signUp: authMethod.signUp,
+  } as const;
+}
+
+export const PasskeyAuthBasicUI = (props: {
+  appName: string;
+  appHostname?: string;
+  children?: React.ReactNode;
+}) => {
+  const [username, setUsername] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+
+  const auth = usePasskeyAuth({
+    appName: props.appName,
+    appHostname: props.appHostname,
+  });
+
+  if (auth.state === "signedIn") {
+    return props.children ?? null;
+  }
+
+  const { logIn, signUp } = auth;
+
+  function handleError(error: Error) {
+    if (error.cause instanceof Error) {
+      setError(error.cause.message);
+    } else {
+      setError(error.message);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: error ? "inherit" : "center",
+      }}
+    >
+      {error && (
+        <div
+          style={{
+            color: "red",
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "end",
+            padding: "1rem",
+          }}
+        >
+          {error}
+        </div>
+      )}
+      <div
+        style={{
+          width: "18rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "2rem",
+        }}
+      >
+        <form
+          style={{
+            width: "18rem",
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem",
+          }}
+          onSubmit={(e) => {
+            e.preventDefault();
+            setError(null);
+            signUp(username).catch(handleError);
+          }}
+        >
+          <input
+            placeholder="Display name"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            autoComplete="webauthn"
+            style={{
+              border: "2px solid #000",
+              padding: "11px 8px",
+              borderRadius: "6px",
+            }}
+          />
+          <input
+            type="submit"
+            value="Sign up"
+            style={{
+              background: "#000",
+              color: "#fff",
+              padding: "13px 5px",
+              border: "none",
+              borderRadius: "6px",
+              cursor: "pointer",
+            }}
+          />
+        </form>
+        <button
+          onClick={() => {
+            setError(null);
+            logIn().catch(handleError);
+          }}
+          style={{
+            background: "#000",
+            color: "#fff",
+            padding: "13px 5px",
+            border: "none",
+            borderRadius: "6px",
+            cursor: "pointer",
+          }}
+        >
+          Log in with existing account
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/react/auth/PassphraseAuth.tsx

@@ -0,0 +1,196 @@
+import { usePassphraseAuth } from "jazz-tools/react-core";
+import { useState } from "react";
+
+export function PassphraseAuthBasicUI(props: {
+  appName: string;
+  wordlist: string[];
+  children?: React.ReactNode;
+}) {
+  const auth = usePassphraseAuth({
+    wordlist: props.wordlist,
+  });
+
+  const [step, setStep] = useState<"initial" | "create" | "login">("initial");
+  const [loginPassphrase, setLoginPassphrase] = useState("");
+  const [isCopied, setIsCopied] = useState(false);
+
+  if (auth.state === "signedIn") {
+    return props.children ?? null;
+  }
+
+  const handleCreateAccount = async () => {
+    setStep("create");
+  };
+
+  const handleLogin = () => {
+    setStep("login");
+  };
+
+  const handleBack = () => {
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(auth.passphrase);
+    setIsCopied(true);
+  };
+
+  const handleLoginSubmit = async () => {
+    await auth.logIn(loginPassphrase); // Sets the state to signed in
+
+    // Reset the state in case of logout
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+
+  const handleNext = async () => {
+    await auth.signUp(); // Sets the state to signed in
+
+    // Reset the state in case of logout
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={cardStyle}>
+        {step === "initial" && (
+          <div>
+            <h1 style={headingStyle}>{props.appName}</h1>
+            <button onClick={handleCreateAccount} style={primaryButtonStyle}>
+              Create new account
+            </button>
+            <button onClick={handleLogin} style={secondaryButtonStyle}>
+              Log in
+            </button>
+          </div>
+        )}
+
+        {step === "create" && (
+          <>
+            <h1 style={headingStyle}>Your Passphrase</h1>
+            <p
+              style={{
+                fontSize: "0.875rem",
+                color: "#4b5563",
+                textAlign: "center",
+                marginBottom: "1rem",
+              }}
+            >
+              Please copy and store this passphrase somewhere safe. You'll need
+              it to log in.
+            </p>
+            <textarea
+              readOnly
+              value={auth.passphrase}
+              style={textareaStyle}
+              rows={5}
+            />
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                gap: "1rem",
+              }}
+            >
+              <button onClick={handleBack} style={secondaryButtonStyle}>
+                Back
+              </button>
+              <button onClick={handleCopy} style={primaryButtonStyle}>
+                {isCopied ? "Copied!" : "Copy Passphrase"}
+              </button>
+              <button onClick={handleNext} style={primaryButtonStyle}>
+                I have saved it!
+              </button>
+            </div>
+          </>
+        )}
+
+        {step === "login" && (
+          <div>
+            <h1 style={headingStyle}>Log In</h1>
+            <textarea
+              value={loginPassphrase}
+              onChange={(e) => setLoginPassphrase(e.target.value)}
+              placeholder="Enter your passphrase"
+              style={textareaStyle}
+              rows={5}
+            />
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                gap: "1rem",
+              }}
+            >
+              <button onClick={handleBack} style={secondaryButtonStyle}>
+                Back
+              </button>
+              <button onClick={handleLoginSubmit} style={primaryButtonStyle}>
+                Log In
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const containerStyle: React.CSSProperties = {
+  minHeight: "100vh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "#f3f4f6",
+};
+
+const cardStyle: React.CSSProperties = {
+  backgroundColor: "white",
+  padding: "2rem",
+  borderRadius: "0.5rem",
+  boxShadow:
+    "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  width: "24rem",
+};
+
+const buttonStyle: React.CSSProperties = {
+  width: "100%",
+  padding: "0.5rem 1rem",
+  borderRadius: "0.25rem",
+  fontWeight: "bold",
+  cursor: "pointer",
+  marginBottom: "1rem",
+};
+
+const primaryButtonStyle: React.CSSProperties = {
+  ...buttonStyle,
+  backgroundColor: "black",
+  color: "white",
+  border: "none",
+};
+
+const secondaryButtonStyle: React.CSSProperties = {
+  ...buttonStyle,
+  backgroundColor: "white",
+  color: "black",
+  border: "1px solid black",
+};
+
+const headingStyle: React.CSSProperties = {
+  color: "black",
+  fontSize: "1.5rem",
+  fontWeight: "bold",
+  textAlign: "center",
+  marginBottom: "1rem",
+};
+
+const textareaStyle: React.CSSProperties = {
+  width: "100%",
+  padding: "0.5rem",
+  border: "1px solid #d1d5db",
+  borderRadius: "0.25rem",
+  marginBottom: "1rem",
+  boxSizing: "border-box",
+};

package/src/react/auth/auth.ts

@@ -0,0 +1,9 @@
+export { JazzReactProviderWithClerk } from "./Clerk.js";
+export { DemoAuthBasicUI } from "./DemoAuth.js";
+export { usePasskeyAuth, PasskeyAuthBasicUI } from "./PasskeyAuth.js";
+export { PassphraseAuthBasicUI } from "./PassphraseAuth.js";
+export {
+  useIsAuthenticated,
+  useDemoAuth,
+  usePassphraseAuth,
+} from "jazz-tools/react-core";

package/src/react/hooks.tsx

@@ -0,0 +1,53 @@
+import { consumeInviteLinkFromWindowLocation } from "jazz-tools/browser";
+import { useEffect } from "react";
+
+import { CoValueOrZodSchema } from "jazz-tools";
+import { useJazzContext } from "jazz-tools/react-core";
+
+export { useCoState, useAuthSecretStorage } from "jazz-tools/react-core";
+
+export function useAcceptInvite<S extends CoValueOrZodSchema>({
+  invitedObjectSchema,
+  onAccept,
+  forValueHint,
+}: {
+  invitedObjectSchema: S;
+  onAccept: (valueID: string) => 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 handleInvite = () => {
+      const result = consumeInviteLinkFromWindowLocation({
+        as: context.me,
+        invitedObjectSchema,
+        forValueHint,
+      });
+
+      result
+        .then((result) => result && onAccept(result?.valueID))
+        .catch((e) => {
+          console.error("Failed to accept invite", e);
+        });
+    };
+
+    handleInvite();
+
+    window.addEventListener("hashchange", handleInvite);
+
+    return () => window.removeEventListener("hashchange", handleInvite);
+  }, [onAccept]);
+}
+
+export {
+  experimental_useInboxSender,
+  useJazzContext,
+  useAccount,
+} from "jazz-tools/react-core";

package/src/react/index.ts

@@ -0,0 +1,16 @@
+export { JazzReactProvider } from "./provider.js";
+export type { JazzProviderProps } from "./provider.js";
+export {
+  useAccount,
+  useCoState,
+  useAcceptInvite,
+  experimental_useInboxSender,
+  useJazzContext,
+  useAuthSecretStorage,
+} from "./hooks.js";
+
+export { createInviteLink, parseInviteLink } from "jazz-tools/browser";
+
+export * from "./auth/auth.js";
+export * from "./media.js";
+export { createImage } from "jazz-tools/browser-media-images";

package/src/react/media.tsx

@@ -0,0 +1,74 @@
+import { ImageDefinition, Loaded } from "jazz-tools";
+import React, { useEffect, useState } from "react";
+
+/** @category Media */
+export function useProgressiveImg({
+  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) {
+        if (highestRes.res !== lastHighestRes) {
+          lastHighestRes = highestRes.res;
+          const blob = highestRes.stream.toBlob();
+          if (blob) {
+            const blobURI = URL.createObjectURL(blob);
+            setCurrent({ src: blobURI, res: highestRes.res });
+            return () => {
+              setTimeout(() => URL.revokeObjectURL(blobURI), 200);
+            };
+          }
+        }
+      } else {
+        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: Loaded<typeof ImageDefinition> | null | undefined;
+  maxWidth?: number;
+  targetWidth?: number;
+}): React.ReactNode {
+  const result = useProgressiveImg({ image, maxWidth, targetWidth });
+  return result ? children(result) : null;
+}

package/src/react/provider.tsx

@@ -0,0 +1,114 @@
+import {
+  Account,
+  AccountClass,
+  AnyAccountSchema,
+  CoValueFromRaw,
+  InstanceOfSchema,
+  JazzContextType,
+} from "jazz-tools";
+import {
+  JazzBrowserContextManager,
+  JazzContextManagerProps,
+} from "jazz-tools/browser";
+import { JazzContext, JazzContextManagerContext } from "jazz-tools/react-core";
+import React, { useEffect, useRef } from "react";
+
+export type JazzProviderProps<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+> = {
+  children: React.ReactNode;
+  enableSSR?: boolean;
+} & JazzContextManagerProps<S>;
+
+/** @category Context & Hooks */
+export function JazzReactProvider<
+  S extends
+    | (AccountClass<Account> & CoValueFromRaw<Account>)
+    | AnyAccountSchema,
+>({
+  children,
+  guestMode,
+  sync,
+  storage,
+  AccountSchema,
+  defaultProfileName,
+  onLogOut,
+  logOutReplacement,
+  onAnonymousAccountDiscarded,
+  enableSSR,
+}: JazzProviderProps<S>) {
+  const [contextManager] = React.useState(
+    () =>
+      new JazzBrowserContextManager<S>({
+        useAnonymousFallback: enableSSR,
+      }),
+  );
+
+  const onLogOutRefCallback = useRefCallback(onLogOut);
+  const logOutReplacementRefCallback = useRefCallback(logOutReplacement);
+  const onAnonymousAccountDiscardedRefCallback = useRefCallback(
+    onAnonymousAccountDiscarded,
+  );
+  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,
+        } satisfies JazzContextManagerProps<S>;
+
+        if (contextManager.propsChanged(props)) {
+          contextManager.createContext(props).catch((error) => {
+            console.error("Error creating Jazz browser 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/scratch.tsx

@@ -0,0 +1,50 @@
+import { FileStream, ImageDefinition } from "jazz-tools";
+import { createJazzTestAccount } from "jazz-tools/testing";
+
+// Simple document environment
+global.document = {
+  createElement: () =>
+    ({ src: "", onload: null }) as unknown as HTMLImageElement,
+} as unknown as Document;
+global.window = { innerWidth: 1000 } as unknown as Window & typeof globalThis;
+
+const me = await createJazzTestAccount();
+
+const mediumSizeBlob = new Blob([], { type: "image/jpeg" });
+const image = ImageDefinition.create(
+  {
+    originalSize: [1920, 1080],
+  },
+  { owner: me },
+);
+image["100x100"] = await FileStream.createFromBlob(mediumSizeBlob, {
+  owner: me,
+});
+image["1920x1080"] = await FileStream.createFromBlob(mediumSizeBlob, {
+  owner: me,
+});
+const imageElement = document.createElement("img");
+// ---cut---
+// Start with placeholder for immediate display
+if (image.placeholderDataURL) {
+  imageElement.src = image.placeholderDataURL;
+}
+
+// Then load the best resolution for the current display
+const screenWidth = window.innerWidth;
+const bestRes = ImageDefinition.highestResAvailable(image, {
+  targetWidth: screenWidth,
+});
+
+if (bestRes) {
+  const blob = bestRes.stream.toBlob();
+  if (blob) {
+    const url = URL.createObjectURL(blob);
+    imageElement.src = url;
+
+    // Remember to revoke the URL when no longer needed
+    imageElement.onload = () => {
+      URL.revokeObjectURL(url);
+    };
+  }
+}

package/src/react/ssr.ts

@@ -0,0 +1,25 @@
+import { WebSocketPeerWithReconnection } from "cojson-transport-ws";
+import { PureJSCrypto } from "cojson/dist/crypto/PureJSCrypto";
+import { createAnonymousJazzContext } from "jazz-tools";
+
+export function createSSRJazzAgent(opts: {
+  peer: string;
+}) {
+  const ssrNode = createAnonymousJazzContext({
+    crypto: new PureJSCrypto(),
+    peersToLoadFrom: [],
+  });
+
+  const wsPeer = new WebSocketPeerWithReconnection({
+    peer: opts.peer,
+    reconnectionTimeout: 100,
+    addPeer: (peer) => {
+      ssrNode.agent.node.syncManager.addPeer(peer);
+    },
+    removePeer: () => {},
+  });
+
+  wsPeer.enable();
+
+  return ssrNode.agent;
+}