@dxos/react-client 0.7.5-feature-compute.4d9d99a → 0.7.5-labs.071a3e2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "0.7.5-feature-compute.4d9d99a",
+  "version": "0.7.5-labs.071a3e2",
   "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-feature-compute.4d9d99a",
-    "@dxos/client": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/config": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/codec-protobuf": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/debug": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/echo-schema": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/invariant": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/echo-signals": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/log": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/node-std": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/protocols": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/util": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/react-hooks": "0.7.5-feature-compute.4d9d99a"
+    "@dxos/client": "0.7.5-labs.071a3e2",
+    "@dxos/async": "0.7.5-labs.071a3e2",
+    "@dxos/config": "0.7.5-labs.071a3e2",
+    "@dxos/debug": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/codec-protobuf": "0.7.5-labs.071a3e2",
+    "@dxos/echo-signals": "0.7.5-labs.071a3e2",
+    "@dxos/log": "0.7.5-labs.071a3e2",
+    "@dxos/invariant": "0.7.5-labs.071a3e2",
+    "@dxos/protocols": "0.7.5-labs.071a3e2",
+    "@dxos/react-hooks": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2",
+    "@dxos/node-std": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/react-ui-syntax-highlighter": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/react-ui-theme": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/random": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/storybook-utils": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/test-utils": "0.7.5-feature-compute.4d9d99a"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.071a3e2",
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2",
+    "@dxos/test-utils": "0.7.5-labs.071a3e2"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0"
   },
   "optionalDependencies": {
-    "@dxos/random": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/react-ui": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/react-ui-theme": "0.7.5-feature-compute.4d9d99a"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "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

@@ -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/devtools/useStream.ts

@@ -4,7 +4,7 @@
 
 import { type DependencyList, useState, useEffect } from 'react';
 
-import { type Stream } from '@dxos/codec-protobuf';
+import { type Stream } from '@dxos/codec-protobuf/stream';
 import { log } from '@dxos/log';
 
 /**

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: number = (credential as any).response.getPublicKeyAlgorithm();
+
+    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: new TextEncoder().encode(challenge),
+          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);
+};