@dxos/plugin-client 0.7.5-labs.071a3e2 → 0.7.5-labs.401163d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-client",
-  "version": "0.7.5-labs.071a3e2",
+  "version": "0.7.5-labs.401163d",
   "description": "DXOS Surface plugin for DXOS Client",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,19 +33,18 @@
   ],
   "dependencies": {
     "@preact/signals-core": "^1.6.0",
-    "@dxos/app-framework": "0.7.5-labs.071a3e2",
-    "@dxos/config": "0.7.5-labs.071a3e2",
-    "@dxos/invariant": "0.7.5-labs.071a3e2",
-    "@dxos/echo-signals": "0.7.5-labs.071a3e2",
-    "@dxos/local-storage": "0.7.5-labs.071a3e2",
-    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
-    "@dxos/log": "0.7.5-labs.071a3e2",
-    "@dxos/plugin-graph": "0.7.5-labs.071a3e2",
-    "@dxos/plugin-observability": "0.7.5-labs.071a3e2",
-    "@dxos/react-ui": "0.7.5-labs.071a3e2",
-    "@dxos/react-client": "0.7.5-labs.071a3e2",
-    "@dxos/shell": "0.7.5-labs.071a3e2",
-    "@dxos/util": "0.7.5-labs.071a3e2"
+    "@dxos/app-framework": "0.7.5-labs.401163d",
+    "@dxos/config": "0.7.5-labs.401163d",
+    "@dxos/echo-schema": "0.7.5-labs.401163d",
+    "@dxos/echo-signals": "0.7.5-labs.401163d",
+    "@dxos/invariant": "0.7.5-labs.401163d",
+    "@dxos/local-storage": "0.7.5-labs.401163d",
+    "@dxos/log": "0.7.5-labs.401163d",
+    "@dxos/plugin-graph": "0.7.5-labs.401163d",
+    "@dxos/plugin-observability": "0.7.5-labs.401163d",
+    "@dxos/react-client": "0.7.5-labs.401163d",
+    "@dxos/util": "0.7.5-labs.401163d",
+    "@dxos/shell": "0.7.5-labs.401163d"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -54,12 +53,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/storybook-utils": "0.7.5-labs.071a3e2"
+    "@dxos/live-object": "0.7.5-labs.401163d",
+    "@dxos/react-ui": "0.7.5-labs.401163d",
+    "@dxos/react-ui-theme": "0.7.5-labs.401163d",
+    "@dxos/storybook-utils": "0.7.5-labs.401163d"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.7.5-labs.401163d",
+    "@dxos/react-ui-theme": "0.7.5-labs.401163d"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/client.ts

@@ -3,7 +3,6 @@
 //
 
 import { contributes, type PluginsContext } from '@dxos/app-framework';
-import { Config, Defaults, Envs, Local, Storage } from '@dxos/config';
 import { Client } from '@dxos/react-client';
 
 import { ClientCapabilities } from './capabilities';
@@ -15,8 +14,7 @@ type ClientCapabilityOptions = Omit<ClientPluginOptions, 'appKey' | 'invitationU
 };
 
 export default async ({ context, onClientInitialized, ...options }: ClientCapabilityOptions) => {
-  const config = new Config(await Storage(), Envs(), Local(), Defaults());
-  const client = new Client({ config, ...options });
+  const client = new Client(options);
   await client.initialize();
   await onClientInitialized?.(context, client);
 

package/src/capabilities/intent-resolver.ts

@@ -12,6 +12,7 @@ import {
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { PublicKey } from '@dxos/react-client';
 import { type JoinPanelProps } from '@dxos/shell/react';
 
 import { ClientCapabilities } from './capabilities';
@@ -21,9 +22,10 @@ import { ClientAction, type ClientPluginOptions } from '../types';
 
 type IntentResolverOptions = Pick<ClientPluginOptions, 'onReset'> & {
   context: PluginsContext;
+  appName?: string;
 };
 
-export default ({ context, onReset }: IntentResolverOptions) =>
+export default ({ context, appName = 'Composer', onReset }: IntentResolverOptions) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: ClientAction.CreateIdentity,
@@ -127,4 +129,70 @@ export default ({ context, onReset }: IntentResolverOptions) =>
         };
       },
     }),
+    createResolver({
+      intent: ClientAction.CreatePasskey,
+      resolve: async () => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const identity = client.halo.identity.get();
+        invariant(identity, 'Identity not available');
+
+        // TODO(wittjosiah): Consider factoring out passkey creation to the halo api.
+        const credential = await navigator.credentials.create({
+          publicKey: {
+            challenge: new Uint8Array(),
+            rp: { id: location.hostname, name: appName },
+            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,
+            },
+          },
+        });
+
+        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';
+
+        // TODO(wittjosiah): This needs a proper api.
+        invariant(client.services.services.IdentityService, 'IdentityService not available');
+        await client.services.services.IdentityService.createRecoveryCredential({ recoveryKey, algorithm });
+      },
+    }),
+    createResolver({
+      intent: ClientAction.RedeemPasskey,
+      resolve: async () => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        // TODO(wittjosiah): This needs a proper api.
+        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,
+            userVerification: 'required',
+          },
+        });
+        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),
+          },
+        });
+      },
+    }),
   ]);

package/src/capabilities/react-surface.tsx

@@ -13,9 +13,12 @@ import {
   JOIN_DIALOG,
   JoinDialog,
   RECOVER_CODE_DIALOG,
+  RECOVER_SETUP_DIALOG,
   RecoveryCodeDialog,
+  RecoverySetupDialog,
   type RecoveryCodeDialogProps,
 } from '../components';
+import { MANAGE_CREDENTIALS_DIALOG, ManageCredentialsDialog } from '../components/ManageCredentialsDialog';
 
 type ReactSurfaceOptions = {
   createInvitationUrl: (invitationCode: string) => string;
@@ -41,4 +44,16 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       filter: (data): data is { props: RecoveryCodeDialogProps } => data.component === RECOVER_CODE_DIALOG,
       component: ({ data }) => <RecoveryCodeDialog {...data.props} />,
     }),
+    createSurface({
+      id: RECOVER_SETUP_DIALOG,
+      role: 'dialog',
+      filter: (data): data is any => data.component === RECOVER_SETUP_DIALOG,
+      component: () => <RecoverySetupDialog />,
+    }),
+    createSurface({
+      id: MANAGE_CREDENTIALS_DIALOG,
+      role: 'dialog',
+      filter: (data): data is any => data.component === MANAGE_CREDENTIALS_DIALOG,
+      component: () => <ManageCredentialsDialog />,
+    }),
   ]);

package/src/components/IdentityDialog.tsx

@@ -9,6 +9,7 @@ import { useClient } from '@dxos/react-client';
 import { Clipboard, Dialog } from '@dxos/react-ui';
 import { IdentityPanel, type IdentityPanelProps } from '@dxos/shell/react';
 
+import { MANAGE_CREDENTIALS_DIALOG } from './ManageCredentialsDialog';
 import { CLIENT_PLUGIN } from '../meta';
 import { ClientAction } from '../types';
 
@@ -44,6 +45,16 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
     await dispatch(createIntent(ClientAction.ResetStorage, { target: 'deviceInvitation' }));
   }, [dispatch]);
 
+  const handleManageCredentials = useCallback(async () => {
+    await dispatch(
+      createIntent(LayoutAction.UpdateDialog, {
+        part: 'dialog',
+        subject: MANAGE_CREDENTIALS_DIALOG,
+        options: { state: true, blockAlign: 'start' },
+      }),
+    );
+  }, [dispatch]);
+
   return (
     <Dialog.Content>
       <Clipboard.Provider>
@@ -54,6 +65,7 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
           onResetStorage={handleResetStorage}
           onRecover={handleRecover}
           onJoinNewIdentity={handleJoinNewIdentity}
+          onManageCredentials={handleManageCredentials}
         />
       </Clipboard.Provider>
     </Dialog.Content>

package/src/components/ManageCredentialsDialog.stories.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React from 'react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AlertDialog } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ManageCredentialsDialog } from './ManageCredentialsDialog';
+import { ClientPlugin } from '../ClientPlugin';
+import translations from '../translations';
+
+const Render = () => {
+  return (
+    <AlertDialog.Root open>
+      <AlertDialog.Overlay>
+        <ManageCredentialsDialog />
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-client/ManageCredentialsDialog',
+  component: ManageCredentialsDialog,
+  render: Render,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        IntentPlugin(),
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+      ],
+    }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ManageCredentialsDialog>;
+
+export const Default: Story = {};

package/src/components/ManageCredentialsDialog.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Receipt, Key } from '@phosphor-icons/react';
+import React, { useMemo } from 'react';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useCredentials } from '@dxos/react-client/halo';
+import { Dialog, Icon, List, ListItem, useTranslation } from '@dxos/react-ui';
+import { BifurcatedAction, type ActionMenuItem } from '@dxos/shell/react';
+
+import { CLIENT_PLUGIN } from '../meta';
+import { ClientAction } from '../types';
+
+export const MANAGE_CREDENTIALS_DIALOG = `${CLIENT_PLUGIN}/ManageCredentialsDialog`;
+
+// TODO(wittjosiah): Factor panel out to @dxos/shell.
+export const ManageCredentialsDialog = () => {
+  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const credentials = useCredentials();
+  const recoveryCredentials = credentials.filter(
+    (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
+  );
+
+  // TODO(wittjosiah): Reconsile w/ RecoverySetupDialog actions.
+  const actions: Record<string, ActionMenuItem> = useMemo(
+    () => ({
+      createPasskey: {
+        label: t('create passkey label'),
+        description: t('create passkey description'),
+        // TODO(wittjosiah): Ideally this would be a `user-key` icon.
+        icon: Key,
+        onClick: () => dispatch(createIntent(ClientAction.CreatePasskey)),
+      },
+      createRecoveryCode: {
+        label: t('create recovery code label'),
+        description: t('create recovery code description'),
+        icon: Receipt,
+        onClick: () => dispatch(createIntent(ClientAction.CreateRecoveryCode)),
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <Dialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[25rem] overflow-hidden'>
+      <Dialog.Title>{t('manage credentials dialog title')}</Dialog.Title>
+      <List classNames='py-4'>
+        {recoveryCredentials.map((credential) => (
+          <ListItem.Root key={credential.id?.toHex()}>
+            <ListItem.Endcap>
+              <Icon icon='ph--key--regular' size={5} />
+            </ListItem.Endcap>
+            <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
+          </ListItem.Root>
+        ))}
+      </List>
+      <div className='grow' />
+      <BifurcatedAction actions={actions} />
+    </Dialog.Content>
+  );
+};

package/src/components/RecoveryCodeDialog.stories.tsx

@@ -17,16 +17,16 @@ import translations from '../translations';
 
 const Render = () => {
   const client = useClient();
-  const [seedphrase, setSeedphrase] = useState<string>();
+  const [recoveryCode, setRecoveryCode] = useState<string>();
   useAsyncEffect(async () => {
     const { recoveryCode } = (await client.services.services.IdentityService?.createRecoveryCredential({})) ?? {};
-    setSeedphrase(recoveryCode);
+    setRecoveryCode(recoveryCode);
   }, [client]);
 
   return (
-    <AlertDialog.Root open={!!seedphrase}>
+    <AlertDialog.Root open={!!recoveryCode}>
       <AlertDialog.Overlay>
-        <RecoveryCodeDialog code={seedphrase ?? ''} />
+        <RecoveryCodeDialog code={recoveryCode ?? ''} />
       </AlertDialog.Overlay>
     </AlertDialog.Root>
   );

package/src/components/RecoveryCodeDialog.tsx

@@ -14,6 +14,7 @@ export type RecoveryCodeDialogProps = {
   code: string;
 };
 
+// TODO(wittjosiah): Factor panel out to @dxos/shell.
 export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
   const { t } = useTranslation(CLIENT_PLUGIN);
   const [confirmation, setConfirmation] = useState(false);
@@ -59,7 +60,7 @@ const Code = ({ code }: { code: string }) => {
       <Clipboard.IconButton value={code} classNames='absolute top-2 right-2 invisible group-hover:visible' />
       <div className='grid grid-cols-4'>
         {words.map((word, i) => (
-          <div key={i} className='flex items-center p-2 gap-2 items-center'>
+          <div key={i} className='flex items-center p-2 gap-2'>
             <div className='w-4 text-xs text-center text-subdued'>{i + 1}</div>
             <div className='text-sm'>{word}</div>
           </div>

package/src/components/RecoverySetupDialog.stories.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React from 'react';
+
+import { createResolver, contributes, Capabilities, IntentPlugin, LayoutAction } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { S } from '@dxos/echo-schema';
+import { create } from '@dxos/live-object';
+import { AlertDialog } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { RECOVER_CODE_DIALOG, RecoveryCodeDialog } from './RecoveryCodeDialog';
+import { RecoverySetupDialog } from './RecoverySetupDialog';
+import { ClientPlugin } from '../ClientPlugin';
+import translations from '../translations';
+
+const state = create<{ recoveryCode?: string }>({});
+
+const Render = () => {
+  return (
+    <AlertDialog.Root open>
+      <AlertDialog.Overlay>
+        {state.recoveryCode ? <RecoveryCodeDialog code={state.recoveryCode} /> : <RecoverySetupDialog />}
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-client/RecoverySetupDialog',
+  component: RecoverySetupDialog,
+  render: Render,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        IntentPlugin(),
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+      ],
+      capabilities: [
+        contributes(
+          Capabilities.IntentResolver,
+          createResolver({
+            intent: LayoutAction.UpdateLayout,
+            filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateDialog.fields.input> =>
+              S.is(LayoutAction.UpdateDialog.fields.input)(data),
+            resolve: (data) => {
+              if (data.subject === RECOVER_CODE_DIALOG) {
+                state.recoveryCode = data.options?.props?.code;
+              }
+            },
+          }),
+        ),
+      ],
+    }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RecoverySetupDialog>;
+
+export const Default: Story = {};

package/src/components/RecoverySetupDialog.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Key, Receipt } from '@phosphor-icons/react';
+import React, { useMemo } from 'react';
+
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { AlertDialog, useTranslation } from '@dxos/react-ui';
+import { type ActionMenuItem, BifurcatedAction } from '@dxos/shell/react';
+
+import { CLIENT_PLUGIN } from '../meta';
+import { ClientAction } from '../types';
+
+export const RECOVER_SETUP_DIALOG = `${CLIENT_PLUGIN}/RecoverySetupDialog`;
+
+// TODO(wittjosiah): Factor panel out to @dxos/shell.
+export const RecoverySetupDialog = () => {
+  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+
+  const actions: Record<string, ActionMenuItem> = useMemo(
+    () => ({
+      createPasskey: {
+        label: t('create passkey label'),
+        description: t('create passkey description'),
+        // TODO(wittjosiah): Ideally this would be a `user-key` icon.
+        icon: Key,
+        onClick: async () => {
+          await dispatch(createIntent(ClientAction.CreatePasskey));
+          await dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
+        },
+      },
+      createRecoveryCode: {
+        label: t('create recovery code label'),
+        description: t('create recovery code description'),
+        icon: Receipt,
+        onClick: () => dispatch(createIntent(ClientAction.CreateRecoveryCode)),
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <AlertDialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[25rem] overflow-hidden'>
+      <AlertDialog.Title>{t('recovery setup dialog title')}</AlertDialog.Title>
+      <p className='py-4'>{t('recovery setup dialog description')}</p>
+      <div className='grow' />
+      <BifurcatedAction actions={actions} />
+    </AlertDialog.Content>
+  );
+};

package/src/components/index.ts

@@ -5,3 +5,4 @@
 export * from './IdentityDialog';
 export * from './JoinDialog';
 export * from './RecoveryCodeDialog';
+export * from './RecoverySetupDialog';

package/src/translations.ts

@@ -9,7 +9,16 @@ export default [
     'en-US': {
       [CLIENT_PLUGIN]: {
         'open shell label': 'Open HALO',
-        'recovery code dialog title': 'Account Recovery',
+        'manage credentials dialog title': 'Manage Account Recovery',
+        'recovery setup dialog title': 'Account Recovery',
+        'recovery setup dialog description':
+          'In order to recover your account you need to register a recovery credential. Passkeys are the recommended way to do this, they can be stored in your browser or in a password manager.',
+        'create passkey label': 'Create Passkey',
+        'create passkey description':
+          'A passkey is a secure and easy to use credential that can be used to recover your account.',
+        'create recovery code label': 'Create Recovery Code',
+        'create recovery code description': 'A recovery code is 12 word phrase representing a private key.',
+        'recovery code dialog title': 'Recovery Code',
         'recovery code dialog description':
           'This is your identity recovery code, store it in a safe place. You can use it to recover your identity if you ever lose access to your devices.',
         'recovery code dialog warning 1': 'NOTE: This code will not be displayed again.',

package/src/types.ts

@@ -64,6 +64,16 @@ export namespace ClientAction {
     input: S.Void,
     output: S.Void,
   }) {}
+
+  export class CreatePasskey extends S.TaggedClass<CreatePasskey>()(`${CLIENT_ACTION}/create-passkey`, {
+    input: S.Void,
+    output: S.Void,
+  }) {}
+
+  export class RedeemPasskey extends S.TaggedClass<RedeemPasskey>()(`${CLIENT_ACTION}/redeem-passkey`, {
+    input: S.Void,
+    output: S.Void,
+  }) {}
 }
 
 export type ClientPluginOptions = ClientOptions & {