@dxos/react-client 0.7.5-labs.a279d8c → 0.7.5-labs.a8b535d

package/src/echo/index.ts

@@ -6,6 +6,7 @@ export * from '@dxos/client/echo';
 
 export * from './useMembers';
 export * from './useQuery';
+export * from './useSchema';
 export * from './useSpaces';
 export * from './useSpaceInvitations';
 export * from './useSubscription';

package/src/echo/useQuery.ts

@@ -5,11 +5,11 @@
 import { useMemo, useSyncExternalStore } from 'react';
 
 import {
-  Filter,
   isSpace,
   type Echo,
-  type ReactiveEchoObject,
   type FilterSource,
+  Filter,
+  type ReactiveEchoObject,
   type Query,
   type QueryOptions,
   type Space,
@@ -25,13 +25,14 @@ export const useQuery = <T extends ReactiveEchoObject<any>>(
   options?: QueryOptions,
   deps?: any[],
 ): T[] => {
-  const { subscribe, getObjects } = useMemo(() => {
+  const { getObjects, subscribe } = useMemo(() => {
+    let subscribed = false;
     const query = isSpace(spaceOrEcho)
       ? spaceOrEcho.db.query(filter, options)
       : (spaceOrEcho?.query(filter, options) as Query<T> | undefined);
-    let subscribed = false;
 
     return {
+      getObjects: () => (subscribed && query ? query.objects : EMPTY_ARRAY),
       subscribe: (cb: () => void) => {
         subscribed = true;
         const unsubscribe = query?.subscribe(cb) ?? noop;
@@ -40,13 +41,13 @@ export const useQuery = <T extends ReactiveEchoObject<any>>(
           subscribed = false;
         };
       },
-      getObjects: () => (subscribed && query ? query.objects : EMPTY_ARRAY),
     };
   }, [spaceOrEcho, ...filterToDepsArray(filter), ...(deps ?? [])]);
 
   // https://beta.reactjs.org/reference/react/useSyncExternalStore
-  // NOTE: This hook will resubscribe whenever the callback passed to the first argument changes -- make sure it is stable.
-  return useSyncExternalStore<T[] | undefined>(subscribe, getObjects) ?? [];
+  // NOTE: This hook will resubscribe whenever the callback passed to the first argument changes; make sure it is stable.
+  const objects = useSyncExternalStore<T[] | undefined>(subscribe, getObjects);
+  return objects ?? [];
 };
 
 const filterToDepsArray = (filter?: FilterSource<any>) => [JSON.stringify(Filter.from(filter).toProto())];

package/src/echo/useSchema.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo, useSyncExternalStore } from 'react';
+
+import { type Space } from '@dxos/client/echo';
+import { type EchoSchema } from '@dxos/echo-schema';
+
+/**
+ * Subscribe to and retrieve schema changes from a space's schema registry.
+ */
+export const useSchema = (space: Space | undefined, typename: string | undefined): EchoSchema | undefined => {
+  const { subscribe, getSchema } = useMemo(() => {
+    if (!typename || !space) {
+      return {
+        subscribe: () => () => {},
+        getSchema: () => undefined,
+      };
+    }
+
+    const query = space.db.schemaRegistry.query({ typename });
+    const initialResult = query.runSync()[0];
+    let currentSchema = initialResult;
+
+    return {
+      subscribe: (onStoreChange: () => void) => {
+        const unsubscribe = query.subscribe(() => {
+          currentSchema = query.results[0];
+          onStoreChange();
+        });
+        return unsubscribe;
+      },
+      getSchema: () => currentSchema,
+    };
+  }, [typename, space]);
+
+  return useSyncExternalStore(subscribe, getSchema);
+};

package/src/halo/Passkey.stories.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useCallback } from 'react';
+
+import { Config, PublicKey } from '@dxos/client';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { Button } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { useCredentials } from './useCredentials';
+import { useIdentity } from './useIdentity';
+import { useClient } from '../client';
+import { withClientProvider } from '../testing';
+
+const getNewChallenge = () => Math.random().toString(36).substring(2);
+
+const Test = () => {
+  const client = useClient();
+  const identity = useIdentity();
+  const credentials = useCredentials();
+
+  const handleCreateIdentity = useCallback(async () => {
+    await client.halo.createIdentity();
+    invariant(client.services.services.EdgeAgentService, 'Missing EdgeAgentService');
+    await client.services.services.EdgeAgentService.createAgent(null as any, { timeout: 10_000 });
+  }, [client]);
+
+  // TODO(wittjosiah): Consider factoring out passkey creation to the halo api.
+  const handleCreatePassKey = useCallback(async () => {
+    invariant(identity, 'Identity not available');
+    const challenge = getNewChallenge();
+    const lookupKey = PublicKey.random();
+    // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredentialCreationOptions
+    const credential = await navigator.credentials
+      .create({
+        publicKey: {
+          challenge: new TextEncoder().encode(challenge),
+          rp: { id: location.hostname, name: 'Test' },
+          user: {
+            id: lookupKey.asUint8Array(),
+            name: identity.did,
+            displayName: identity.profile?.displayName ?? '',
+          },
+          pubKeyCredParams: [
+            { type: 'public-key', alg: -8 }, // Ed25519 (not yet supported across all browsers)
+            { type: 'public-key', alg: -7 }, // ES256
+          ],
+          // https://web.dev/articles/webauthn-discoverable-credentials#resident-key
+          authenticatorSelection: {
+            residentKey: 'required',
+            requireResidentKey: true,
+          },
+        },
+      })
+      .catch(log.error);
+
+    invariant(credential, 'Credential not available');
+    const recoveryKey = PublicKey.from(new Uint8Array((credential as any).response.getPublicKey()));
+    const algorithm = (credential as any).response.getPublicKeyAlgorithm() === -7 ? 'ES256' : 'ED25519';
+
+    invariant(client.services.services.IdentityService, 'IdentityService not available');
+    // TODO(wittjosiah): This needs a proper api.
+    await client.services.services.IdentityService.createRecoveryCredential({
+      recoveryKey,
+      algorithm,
+      lookupKey,
+    });
+  }, [client, identity]);
+
+  const handleAuthenticate = useCallback(async () => {
+    invariant(client.services.services.IdentityService, 'IdentityService not available');
+    const { deviceKey, controlFeedKey, challenge } =
+      await client.services.services.IdentityService.requestRecoveryChallenge();
+    const credential = await navigator.credentials
+      .get({
+        publicKey: {
+          challenge: Buffer.from(challenge, 'base64'),
+          rpId: location.hostname,
+          // NOTE: Don't prompt for password in storybook for test purposes.
+          //   In practice, this should be set to 'required' for identity recovery.
+          userVerification: 'discouraged',
+        },
+      })
+      .catch(log.error);
+    const lookupKey = PublicKey.from(new Uint8Array((credential as any).response.userHandle));
+    await client.services.services.IdentityService.recoverIdentity({
+      external: {
+        lookupKey,
+        deviceKey,
+        controlFeedKey,
+        signature: Buffer.from((credential as any).response.signature),
+        clientDataJson: Buffer.from((credential as any).response.clientDataJSON),
+        authenticatorData: Buffer.from((credential as any).response.authenticatorData),
+      },
+    });
+  }, []);
+
+  return (
+    <>
+      <div className='mbe-4 flex gap-2'>
+        <Button disabled={!!identity} onClick={handleCreateIdentity}>
+          Create Identity
+        </Button>
+        <Button disabled={!identity} onClick={handleCreatePassKey}>
+          Create Passkey
+        </Button>
+        <Button disabled={!!identity} onClick={handleAuthenticate}>
+          Authenticate with Passkey
+        </Button>
+      </div>
+      <div className='flex flex-col min-w-[28rem] divide-y divide-separator border border-separator rounded'>
+        <SyntaxHighlighter language='json'>
+          {JSON.stringify({ identity, credentials: credentials.length }, null, 2)}
+        </SyntaxHighlighter>
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'sdk/react-client/Passkeys',
+  render: Test,
+};
+
+const config = new Config({
+  runtime: {
+    client: {
+      edgeFeatures: {
+        agents: true,
+        echoReplicator: true,
+        feedReplicator: true,
+        signaling: true,
+      },
+    },
+    services: {
+      edge: {
+        url: 'wss://edge-main.dxos.workers.dev/',
+        // url: 'ws://localhost:8787',
+      },
+      iceProviders: [{ urls: 'https://edge-production.dxos.workers.dev/ice' }],
+    },
+  },
+});
+
+export const Default = {
+  decorators: [withClientProvider({ config }), withTheme],
+};

package/src/halo/index.ts

@@ -14,6 +14,7 @@ export {
 } from '@dxos/client/halo';
 
 export * from './useContacts';
+export * from './useCredentials';
 export * from './useDevices';
 export * from './useHaloInvitations';
 export * from './useIdentity';

package/src/halo/useCredentials.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+import type { Credential } from '@dxos/client/halo';
+import { useMulticastObservable } from '@dxos/react-hooks';
+
+import { useClient } from '../client';
+
+export const useCredentials = (): Credential[] => {
+  const client = useClient();
+  return useMulticastObservable(client.halo.credentials);
+};

package/tsconfig.json

@@ -1,13 +1,7 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
-    "module": "ESNext",
-    "outDir": "./dist/types"
+    "module": "ESNext"
   },
   "include": [
     "playwright",

package/dist/types/src/playwright/playwright.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../../src/playwright/playwright.config.ts"],"names":[],"mappings":";AASA,wBAQG"}