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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "0.7.5-labs.a279d8c",
+  "version": "0.7.5-labs.ea4b4c2",
   "description": "React client API",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -77,40 +77,40 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.0.13",
-    "@dxos/async": "0.7.5-labs.a279d8c",
-    "@dxos/config": "0.7.5-labs.a279d8c",
-    "@dxos/codec-protobuf": "0.7.5-labs.a279d8c",
-    "@dxos/debug": "0.7.5-labs.a279d8c",
-    "@dxos/echo-schema": "0.7.5-labs.a279d8c",
-    "@dxos/echo-signals": "0.7.5-labs.a279d8c",
-    "@dxos/client": "0.7.5-labs.a279d8c",
-    "@dxos/invariant": "0.7.5-labs.a279d8c",
-    "@dxos/log": "0.7.5-labs.a279d8c",
-    "@dxos/protocols": "0.7.5-labs.a279d8c",
-    "@dxos/react-hooks": "0.7.5-labs.a279d8c",
-    "@dxos/util": "0.7.5-labs.a279d8c",
-    "@dxos/node-std": "0.7.5-labs.a279d8c"
+    "@dxos/async": "0.7.5-labs.ea4b4c2",
+    "@dxos/client": "0.7.5-labs.ea4b4c2",
+    "@dxos/codec-protobuf": "0.7.5-labs.ea4b4c2",
+    "@dxos/config": "0.7.5-labs.ea4b4c2",
+    "@dxos/debug": "0.7.5-labs.ea4b4c2",
+    "@dxos/echo-schema": "0.7.5-labs.ea4b4c2",
+    "@dxos/invariant": "0.7.5-labs.ea4b4c2",
+    "@dxos/log": "0.7.5-labs.ea4b4c2",
+    "@dxos/echo-signals": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-hooks": "0.7.5-labs.ea4b4c2",
+    "@dxos/node-std": "0.7.5-labs.ea4b4c2",
+    "@dxos/protocols": "0.7.5-labs.ea4b4c2",
+    "@dxos/util": "0.7.5-labs.ea4b4c2"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui-theme": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui": "0.7.5-labs.a279d8c",
-    "@dxos/storybook-utils": "0.7.5-labs.a279d8c",
-    "@dxos/test-utils": "0.7.5-labs.a279d8c"
+    "@dxos/random": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui-theme": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui": "0.7.5-labs.ea4b4c2",
+    "@dxos/storybook-utils": "0.7.5-labs.ea4b4c2",
+    "@dxos/test-utils": "0.7.5-labs.ea4b4c2"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0"
   },
   "optionalDependencies": {
-    "@dxos/random": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui-theme": "0.7.5-labs.a279d8c"
+    "@dxos/random": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui-theme": "0.7.5-labs.ea4b4c2"
   },
   "publishConfig": {
     "access": "public"

package/src/client/ClientProvider.test.tsx

@@ -151,10 +151,11 @@ describe('ClientProvider', () => {
 
     await act(async () => {
       await waitForCondition({
-        condition: () => !client.initialized && newClient.status.get() === SystemStatus.ACTIVE,
+        condition: () => newClient.status.get() === SystemStatus.ACTIVE,
       });
     });
-    expect(client.initialized).toBe(false);
+    // If client is provided externally, the provider will not destroy it.
+    expect(client.initialized).toBe(true);
     expect(() => screen.getByText('Identity is NOT there')).not.toThrow();
   });
 });

package/src/client/ClientProvider.tsx

@@ -15,7 +15,7 @@ import { Client, type ClientOptions, type ClientServicesProvider, SystemStatus }
 import { type Config } from '@dxos/config';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { log } from '@dxos/log';
-import { useControlledValue } from '@dxos/react-hooks';
+import { useControlledState } from '@dxos/react-hooks';
 import { getAsyncProviderValue, type MaybePromise, type Provider } from '@dxos/util';
 
 import { ClientContext, type ClientContextProps } from './context';
@@ -114,7 +114,7 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
     useImperativeHandle(forwardedRef, () => client, [client]);
 
     // Client status subscription.
-    const [status, setStatus] = useControlledValue(controlledStatus);
+    const [status, setStatus] = useControlledState(controlledStatus);
     useEffect(() => {
       if (!client) {
         return;
@@ -174,12 +174,15 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
         log('clean up');
         disposed = true;
         clearTimeout(t);
-        void client
-          ?.destroy()
-          .then(() => {
-            log('destroyed');
-          })
-          .catch((err) => log.catch(err));
+        // Only destroy if the client is not provided by the parent.
+        if (!clientProvider) {
+          void client
+            ?.destroy()
+            .then(() => {
+              log('destroyed');
+            })
+            .catch((err) => log.catch(err));
+        }
       };
     }, [configProvider, clientProvider, servicesProvider, noBanner]);
 

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/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,151 @@
+//
+// 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();
+    // 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: new TextEncoder().encode(identity.did),
+            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,
+    });
+  }, [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 identityDid = new TextDecoder().decode((credential as any).response.userHandle);
+    await client.services.services.IdentityService.recoverIdentity({
+      external: {
+        identityDid,
+        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.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);
+};