jazz-vue 0.9.23 → 0.10.1

package/src/auth/useDemoAuth.ts

@@ -1,77 +1,37 @@
-import { AgentSecret } from "cojson";
-import { BrowserDemoAuth } from "jazz-browser";
-import { Account, ID } from "jazz-tools";
-import { onUnmounted, reactive, ref } from "vue";
-import { logoutHandler } from "../provider.js";
+import { DemoAuth } from "jazz-tools";
+import { computed, ref, watch } from "vue";
+import { useAuthSecretStorage, useJazzContext } from "../composables.js";
+import { useIsAuthenticated } from "./useIsAuthenticated.js";
 
-export type DemoAuthState = (
-  | {
-      state: "uninitialized";
-    }
-  | {
-      state: "loading";
-    }
-  | {
-      state: "ready";
-      existingUsers: string[];
-      signUp: (username: string) => void;
-      logInAs: (existingUser: string) => void;
-    }
-  | {
-      state: "signedIn";
-      logOut: () => void;
-    }
-) & {
-  errors: string[];
-};
+export function useDemoAuth() {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
 
-/** @category Auth Providers */
-export function useDemoAuth({
-  seedAccounts,
-}: {
-  seedAccounts?: {
-    [name: string]: { accountID: ID<Account>; accountSecret: AgentSecret };
-  };
-} = {}) {
-  const state = reactive<DemoAuthState>({
-    state: "loading",
-    errors: [],
-  });
+  if ("guest" in context.value) {
+    throw new Error("Demo auth is not supported in guest mode");
+  }
 
-  const authMethod = ref(
-    new BrowserDemoAuth(
-      {
-        onReady: ({ signUp, existingUsers, logInAs }) => {
-          state.state = "ready";
-          (state as DemoAuthState & { state: "ready" }).signUp = signUp;
-          (state as DemoAuthState & { state: "ready" }).existingUsers =
-            existingUsers;
-          (state as DemoAuthState & { state: "ready" }).logInAs = logInAs;
-          state.errors = [];
-        },
-        onSignedIn: ({ logOut }) => {
-          state.state = "signedIn";
-          (state as DemoAuthState & { state: "signedIn" }).logOut = () => {
-            logOut();
-            state.state = "ready";
-            state.errors = [];
-          };
-          state.errors = [];
-          logoutHandler.value = (
-            state as DemoAuthState & { state: "signedIn" }
-          ).logOut;
-        },
-        onError: (error) => {
-          state.errors.push(error.toString());
-        },
-      },
-      seedAccounts,
-    ),
+  const authMethod = computed(
+    () => new DemoAuth(context.value.authenticate, authSecretStorage),
   );
-  onUnmounted(() => {
-    if (state.state === "signedIn") {
-      logoutHandler.value = undefined;
-    }
+
+  const existingUsers = ref<string[]>([]);
+  const isAuthenticated = useIsAuthenticated();
+
+  watch(authMethod, () => {
+    authMethod.value.getExistingUsers().then((users) => {
+      existingUsers.value = users;
+    });
   });
-  return { authMethod, state };
+
+  return computed(() => ({
+    state: isAuthenticated.value ? "signedIn" : "anonymous",
+    logIn(username: string) {
+      authMethod.value.logIn(username);
+    },
+    signUp(username: string) {
+      authMethod.value.signUp(username);
+    },
+    existingUsers: existingUsers.value,
+  }));
 }

package/src/auth/useIsAuthenticated.ts

@@ -0,0 +1,18 @@
+import { onMounted, onUnmounted, ref } from "vue";
+import { useAuthSecretStorage } from "../composables.js";
+
+export function useIsAuthenticated() {
+  const authSecretStorage = useAuthSecretStorage();
+  const isAuthenticated = ref(authSecretStorage.isAuthenticated);
+
+  const handleUpdate = () => {
+    isAuthenticated.value = authSecretStorage.isAuthenticated;
+  };
+
+  onMounted(() => {
+    const cleanup = authSecretStorage.onUpdate(handleUpdate);
+    onUnmounted(cleanup);
+  });
+
+  return isAuthenticated;
+}

package/src/auth/usePasskeyAuth.ts

@@ -0,0 +1,46 @@
+import { BrowserPasskeyAuth } from "jazz-browser";
+import { computed } from "vue";
+import { useAuthSecretStorage, useJazzContext } from "../composables.js";
+import { useIsAuthenticated } from "./useIsAuthenticated.js";
+
+/**
+ * `usePasskeyAuth` composable 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();
+  const isAuthenticated = useIsAuthenticated();
+
+  if ("guest" in context.value) {
+    throw new Error("Passkey auth is not supported in guest mode");
+  }
+
+  const authMethod = computed(() => {
+    return new BrowserPasskeyAuth(
+      context.value.node.crypto,
+      context.value.authenticate,
+      authSecretStorage,
+      appName,
+      appHostname,
+    );
+  });
+
+  return computed(() => ({
+    state: isAuthenticated.value ? "signedIn" : "anonymous",
+    logIn: authMethod.value.logIn,
+    signUp: authMethod.value.signUp,
+  }));
+}

package/src/auth/usePassphraseAuth.ts

@@ -0,0 +1,56 @@
+import { PassphraseAuth } from "jazz-tools";
+import { computed, ref, watchEffect } from "vue";
+import { useAuthSecretStorage, useJazzContext } from "../composables.js";
+import { useIsAuthenticated } from "./useIsAuthenticated.js";
+
+/**
+ * `usePassphraseAuth` composable provides a `JazzAuth` object for passphrase authentication.
+ *
+ * @example
+ * ```ts
+ * const auth = usePassphraseAuth({ wordlist });
+ * ```
+ *
+ * @category Auth Providers
+ */
+export function usePassphraseAuth({
+  wordlist,
+}: {
+  wordlist: string[];
+}) {
+  const context = useJazzContext();
+  const authSecretStorage = useAuthSecretStorage();
+  const isAuthenticated = useIsAuthenticated();
+
+  if ("guest" in context.value) {
+    throw new Error("Passphrase auth is not supported in guest mode");
+  }
+
+  const authMethod = computed(() => {
+    return new PassphraseAuth(
+      context.value.node.crypto,
+      context.value.authenticate,
+      authSecretStorage,
+      wordlist,
+    );
+  });
+
+  const passphrase = ref(authMethod.value.passphrase);
+
+  watchEffect((onCleanup) => {
+    authMethod.value.loadCurrentAccountPassphrase();
+
+    const unsubscribe = authMethod.value.subscribe(() => {
+      passphrase.value = authMethod.value.passphrase;
+    });
+
+    onCleanup(unsubscribe);
+  });
+
+  return computed(() => ({
+    state: isAuthenticated.value ? "signedIn" : "anonymous",
+    logIn: authMethod.value.logIn,
+    signUp: authMethod.value.signUp,
+    passphrase: passphrase.value,
+  }));
+}

package/src/composables.ts

@@ -1,16 +1,16 @@
-import {
-  BrowserContext,
-  BrowserGuestContext,
-  consumeInviteLinkFromWindowLocation,
-} from "jazz-browser";
+import { consumeInviteLinkFromWindowLocation } from "jazz-browser";
 import {
   Account,
   AnonymousJazzAgent,
+  AuthSecretStorage,
   CoValue,
   CoValueClass,
   DeeplyLoaded,
   DepthsIn,
   ID,
+  JazzAuthContext,
+  JazzContextType,
+  JazzGuestContext,
   subscribeToCoValue,
 } from "jazz-tools";
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -29,21 +29,31 @@ import {
   unref,
   watch,
 } from "vue";
-import { JazzContextSymbol, RegisteredAccount } from "./provider.js";
+import {
+  JazzAuthContextSymbol,
+  JazzContextSymbol,
+  RegisteredAccount,
+} from "./provider.js";
 
 export const logoutHandler = ref<() => void>();
 
-function useJazzContext() {
+export function useJazzContext() {
   const context =
-    inject<Ref<BrowserContext<RegisteredAccount> | BrowserGuestContext>>(
-      JazzContextSymbol,
-    );
-  if (!context) {
+    inject<Ref<JazzContextType<RegisteredAccount>>>(JazzContextSymbol);
+  if (!context?.value) {
     throw new Error("useJazzContext must be used within a JazzProvider");
   }
   return context;
 }
 
+export function useAuthSecretStorage() {
+  const context = inject<AuthSecretStorage>(JazzAuthContextSymbol);
+  if (!context) {
+    throw new Error("useAuthSecretStorage must be used within a JazzProvider");
+  }
+  return context;
+}
+
 export function createUseAccountComposables<Acc extends Account>() {
   function useAccount(): {
     me: ComputedRef<Acc>;
@@ -52,13 +62,13 @@ export function createUseAccountComposables<Acc extends Account>() {
   function useAccount<D extends DepthsIn<Acc>>(
     depth: D,
   ): {
-    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined>;
+    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | null>;
     logOut: () => void;
   };
   function useAccount<D extends DepthsIn<Acc>>(
     depth?: D,
   ): {
-    me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined>;
+    me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined | null>;
     logOut: () => void;
   } {
     const context = useJazzContext();
@@ -85,7 +95,7 @@ export function createUseAccountComposables<Acc extends Account>() {
       me: computed(() => {
         const value =
           depth === undefined
-            ? me.value || toRaw((context.value as BrowserContext<Acc>).me)
+            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)
             : me.value;
 
         return value ? toRaw(value) : value;
@@ -100,13 +110,15 @@ export function createUseAccountComposables<Acc extends Account>() {
   function useAccountOrGuest<D extends DepthsIn<Acc>>(
     depth: D,
   ): {
-    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent>;
+    me: ComputedRef<
+      DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent
+    >;
   };
   function useAccountOrGuest<D extends DepthsIn<Acc>>(
     depth?: D,
   ): {
     me: ComputedRef<
-      Acc | DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent
+      Acc | DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent
     >;
   } {
     const context = useJazzContext();
@@ -129,13 +141,13 @@ export function createUseAccountComposables<Acc extends Account>() {
       return {
         me: computed(() =>
           depth === undefined
-            ? me.value || toRaw((context.value as BrowserContext<Acc>).me)
+            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)
             : me.value,
         ),
       };
     } else {
       return {
-        me: computed(() => toRaw((context.value as BrowserGuestContext).guest)),
+        me: computed(() => toRaw((context.value as JazzGuestContext).guest)),
       };
     }
   }
@@ -155,8 +167,8 @@ export function useCoState<V extends CoValue, D>(
   Schema: CoValueClass<V>,
   id: MaybeRef<ID<V> | undefined>,
   depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,
-): Ref<DeeplyLoaded<V, D> | undefined> {
-  const state: ShallowRef<DeeplyLoaded<V, D> | undefined> =
+): Ref<DeeplyLoaded<V, D> | undefined | null> {
+  const state: ShallowRef<DeeplyLoaded<V, D> | undefined | null> =
     shallowRef(undefined);
   const context = useJazzContext();
 
@@ -184,7 +196,9 @@ export function useCoState<V extends CoValue, D>(
         (value) => {
           state.value = value;
         },
-        undefined,
+        () => {
+          state.value = null;
+        },
         true,
       );
     },
@@ -223,7 +237,7 @@ export function useAcceptInvite<V extends CoValue>({
 
   const runInviteAcceptance = () => {
     const result = consumeInviteLinkFromWindowLocation({
-      as: toRaw((context.value as BrowserContext<RegisteredAccount>).me),
+      as: toRaw((context.value as JazzAuthContext<RegisteredAccount>).me),
       invitedObjectSchema,
       forValueHint,
     });

package/src/index.ts

@@ -1,6 +1,8 @@
 export * from "./composables.js";
 export { JazzProvider } from "./provider.js";
 export * from "./auth/useDemoAuth.js";
+export * from "./auth/usePassphraseAuth.js";
+export * from "./auth/usePasskeyAuth.js";
 export { default as DemoAuthBasicUI } from "./auth/DemoAuthBasicUI.vue";
 export { default as ProgressiveImg } from "./ProgressiveImg.vue";
 

package/src/provider.ts

@@ -1,12 +1,9 @@
-import {
-  BrowserContext,
-  BrowserGuestContext,
-  createJazzBrowserContext,
-} from "jazz-browser";
-import { Account, AccountClass, AuthMethod } from "jazz-tools";
+import { JazzBrowserContextManager } from "jazz-browser";
+import { Account, AccountClass, JazzContextType, SyncConfig } from "jazz-tools";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   PropType,
+  computed,
   defineComponent,
   onMounted,
   onUnmounted,
@@ -25,78 +22,80 @@ export type RegisteredAccount = Register extends { Account: infer Acc }
   : Account;
 
 export const JazzContextSymbol = Symbol("JazzContext");
-
+export const JazzAuthContextSymbol = Symbol("JazzAuthContext");
 export const JazzProvider = defineComponent({
   name: "JazzProvider",
   props: {
-    auth: {
-      type: [String, Object] as PropType<AuthMethod | "guest">,
+    guestMode: {
+      type: Boolean,
+      default: false,
+    },
+    sync: {
+      type: Object as PropType<SyncConfig>,
       required: true,
     },
     AccountSchema: {
-      type: Object as PropType<AccountClass<RegisteredAccount>>,
+      type: Function as unknown as PropType<AccountClass<RegisteredAccount>>,
       required: false,
     },
-    peer: {
-      type: String as PropType<`wss://${string}` | `ws://${string}`>,
-      required: true,
-    },
     storage: {
       type: String as PropType<"indexedDB" | "singleTabOPFS">,
       default: undefined,
     },
+    defaultProfileName: {
+      type: String,
+      required: false,
+    },
+    onAnonymousAccountDiscarded: {
+      type: Function as PropType<
+        (anonymousAccount: RegisteredAccount) => Promise<void>
+      >,
+      required: false,
+    },
+    onLogOut: {
+      type: Function as PropType<() => void>,
+      required: false,
+    },
   },
   setup(props, { slots }) {
-    const ctx = ref<
-      BrowserContext<RegisteredAccount> | BrowserGuestContext | undefined
-    >(undefined);
-
-    const key = ref(0);
+    const contextManager = new JazzBrowserContextManager<RegisteredAccount>();
+    const ctx = ref<JazzContextType<RegisteredAccount>>();
 
     provide(JazzContextSymbol, ctx);
-
-    const initializeContext = async () => {
-      if (ctx.value) {
-        ctx.value.done?.();
-        ctx.value = undefined;
-      }
-
-      try {
-        const context = await createJazzBrowserContext<RegisteredAccount>(
-          props.auth === "guest"
-            ? { peer: props.peer, storage: props.storage }
-            : {
-                AccountSchema: props.AccountSchema,
-                auth: props.auth,
-                peer: props.peer,
-                storage: props.storage,
-              },
-        );
-
-        ctx.value = {
-          ...context,
-          logOut: () => {
-            logoutHandler.value?.();
-            // context.logOut();
-            key.value += 1;
-          },
-        };
-      } catch (e) {
-        console.error("Error creating Jazz browser context:", e);
-      }
-    };
-
-    onMounted(() => {
-      void initializeContext();
-    });
+    provide(JazzAuthContextSymbol, contextManager.getAuthSecretStorage());
 
     watch(
-      () => key.value,
+      () => ({
+        peer: props.sync.peer,
+        syncWhen: props.sync.when,
+        storage: props.storage,
+        guestMode: props.guestMode,
+      }),
       async () => {
-        await initializeContext();
+        contextManager
+          .createContext({
+            sync: props.sync,
+            storage: props.storage,
+            guestMode: props.guestMode,
+            AccountSchema: props.AccountSchema,
+            defaultProfileName: props.defaultProfileName,
+            onAnonymousAccountDiscarded: props.onAnonymousAccountDiscarded,
+            onLogOut: props.onLogOut,
+          })
+          .catch((error) => {
+            console.error("Error creating Jazz browser context:", error);
+          });
       },
+      { immediate: true },
     );
 
+    onMounted(() => {
+      const cleanup = contextManager.subscribe(() => {
+        ctx.value = contextManager.getCurrentValue();
+      });
+      onUnmounted(cleanup);
+    });
+
     onUnmounted(() => {
       if (ctx.value) ctx.value.done?.();
     });

package/src/testing.ts

@@ -1,20 +1,31 @@
 import { Account, AnonymousJazzAgent } from "jazz-tools";
-import { getJazzContextShape } from "jazz-tools/testing";
+import { TestJazzContextManager } from "jazz-tools/testing";
 import { provide } from "vue";
 import { PropType, defineComponent, ref } from "vue";
-import { JazzContextSymbol } from "./provider.js";
+import { JazzAuthContextSymbol, JazzContextSymbol } from "./provider.js";
 
 export const JazzTestProvider = defineComponent({
   name: "JazzTestProvider",
   props: {
     account: {
       type: Object as PropType<Account | { guest: AnonymousJazzAgent }>,
-      required: true,
+      required: false,
+    },
+    isAuthenticated: {
+      type: Boolean,
+      required: false,
     },
   },
   setup(props, { slots }) {
-    const ctx = ref(getJazzContextShape(props.account));
-    provide(JazzContextSymbol, ctx);
+    const contextManager = TestJazzContextManager.fromAccountOrGuest(
+      props.account,
+      {
+        isAuthenticated: props.isAuthenticated,
+      },
+    );
+
+    provide(JazzContextSymbol, ref(contextManager.getCurrentValue()));
+    provide(JazzAuthContextSymbol, contextManager.getAuthSecretStorage());
 
     return () => slots.default?.();
   },