accounts 0.3.0 → 0.4.1

package/src/core/Ceremony.test.ts

@@ -0,0 +1,151 @@
+import { describe, expect, test } from 'vp/test'
+
+import * as Ceremony from './Ceremony.js'
+
+describe('from', () => {
+  test('default: returns the ceremony', () => {
+    const ceremony = Ceremony.from({
+      getRegistrationOptions: async () => ({ options: {} as any }),
+      verifyRegistration: async () => ({ credentialId: 'cred-1', publicKey: '0x1234' }),
+      getAuthenticationOptions: async () => ({ options: {} as any }),
+      verifyAuthentication: async () => ({ credentialId: 'cred-1', publicKey: '0x1234' }),
+    })
+    expect(ceremony).toBeDefined()
+    expect(typeof ceremony.getRegistrationOptions).toMatchInlineSnapshot(`"function"`)
+    expect(typeof ceremony.verifyRegistration).toMatchInlineSnapshot(`"function"`)
+    expect(typeof ceremony.getAuthenticationOptions).toMatchInlineSnapshot(`"function"`)
+    expect(typeof ceremony.verifyAuthentication).toMatchInlineSnapshot(`"function"`)
+  })
+})
+
+describe('local', () => {
+  test('default: creates a ceremony', () => {
+    const ceremony = Ceremony.local({ rpId: 'example.com' })
+    expect(ceremony).toBeDefined()
+  })
+
+  test('behavior: getRegistrationOptions returns serialized options', async () => {
+    const ceremony = Ceremony.local({ rpId: 'example.com' })
+
+    const { options } = await ceremony.getRegistrationOptions({ name: 'Test' })
+    expect(options.publicKey).toBeDefined()
+    expect(options.publicKey!.rp.id).toMatchInlineSnapshot(`"example.com"`)
+    expect(options.publicKey!.rp.name).toMatchInlineSnapshot(`"example.com"`)
+    expect(typeof options.publicKey!.challenge).toMatchInlineSnapshot(`"string"`)
+    expect(options.publicKey!.authenticatorSelection).toBeDefined()
+  })
+
+  test('behavior: getAuthenticationOptions returns serialized options', async () => {
+    const ceremony = Ceremony.local({ rpId: 'example.com' })
+
+    const { options } = await ceremony.getAuthenticationOptions()
+    expect(options.publicKey).toBeDefined()
+    expect(options.publicKey!.rpId).toMatchInlineSnapshot(`"example.com"`)
+    expect(typeof options.publicKey!.challenge).toMatchInlineSnapshot(`"string"`)
+  })
+
+  test('behavior: verifyRegistration stores credential and returns publicKey', async () => {
+    const ceremony = Ceremony.local({ rpId: 'example.com' })
+
+    const result = await ceremony.verifyRegistration({
+      attestationObject: 'mock',
+      clientDataJSON: 'mock',
+      id: 'cred-1',
+      publicKey: '0xabcd',
+      raw: {
+        id: 'cred-1',
+        type: 'public-key',
+        authenticatorAttachment: null,
+        rawId: 'cred-1',
+        response: { clientDataJSON: 'mock' },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "credentialId": "cred-1",
+        "publicKey": "0xabcd",
+      }
+    `)
+  })
+
+  test('behavior: verifyAuthentication returns stored publicKey', async () => {
+    const ceremony = Ceremony.local({ rpId: 'example.com' })
+
+    // Register first to store the credential
+    await ceremony.verifyRegistration({
+      attestationObject: 'mock',
+      clientDataJSON: 'mock',
+      id: 'cred-1',
+      publicKey: '0xabcd',
+      raw: {
+        id: 'cred-1',
+        type: 'public-key',
+        authenticatorAttachment: null,
+        rawId: 'cred-1',
+        response: { clientDataJSON: 'mock' },
+      },
+    })
+
+    const result = await ceremony.verifyAuthentication({
+      id: 'cred-1',
+      metadata: {
+        authenticatorData: '0x00',
+        clientDataJSON: '{}',
+      },
+      raw: {
+        id: 'cred-1',
+        type: 'public-key',
+        authenticatorAttachment: null,
+        rawId: 'cred-1',
+        response: { clientDataJSON: 'mock' },
+      },
+      signature: '0x00',
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "credentialId": "cred-1",
+        "publicKey": "0xabcd",
+      }
+    `)
+  })
+
+  test('error: verifyAuthentication throws for unknown credential', async () => {
+    const ceremony = Ceremony.local({ rpId: 'example.com' })
+
+    await expect(
+      ceremony.verifyAuthentication({
+        id: 'unknown',
+        metadata: {
+          authenticatorData: '0x00',
+          clientDataJSON: '{}',
+        },
+        raw: {
+          id: 'unknown',
+          type: 'public-key',
+          authenticatorAttachment: null,
+          rawId: 'unknown',
+          response: { clientDataJSON: 'mock' },
+        },
+        signature: '0x00',
+      }),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`[Error: Unknown credential: unknown]`)
+  })
+
+  test('behavior: each call to getRegistrationOptions generates a unique challenge', async () => {
+    const ceremony = Ceremony.local({ rpId: 'example.com' })
+
+    const { options: a } = await ceremony.getRegistrationOptions({ name: 'Test' })
+    const { options: b } = await ceremony.getRegistrationOptions({ name: 'Test' })
+    expect(a.publicKey!.challenge).not.toBe(b.publicKey!.challenge)
+  })
+
+  test('behavior: each call to getAuthenticationOptions generates a unique challenge', async () => {
+    const ceremony = Ceremony.local({ rpId: 'example.com' })
+
+    const { options: a } = await ceremony.getAuthenticationOptions()
+    const { options: b } = await ceremony.getAuthenticationOptions()
+    expect(a.publicKey!.challenge).not.toBe(b.publicKey!.challenge)
+  })
+})

package/src/core/Ceremony.ts

@@ -0,0 +1,203 @@
+import { Bytes } from 'ox'
+import type { Hex } from 'viem'
+import { Authentication, Registration } from 'webauthx/server'
+
+import * as Storage from './Storage.js'
+
+/** Pluggable strategy for WebAuthn registration and authentication ceremonies. */
+export type Ceremony = {
+  /** Get credential creation options for `navigator.credentials.create()`. */
+  getRegistrationOptions: (
+    params: getRegistrationOptions.Parameters,
+  ) => Promise<getRegistrationOptions.ReturnType>
+  /** Verify a registration response and extract the public key. */
+  verifyRegistration: (
+    credential: Registration.Credential,
+    options?: verifyRegistration.Options | undefined,
+  ) => Promise<verifyRegistration.ReturnType>
+  /** Get credential request options for `navigator.credentials.get()`. */
+  getAuthenticationOptions: (
+    params?: getAuthenticationOptions.Parameters | undefined,
+  ) => Promise<getAuthenticationOptions.ReturnType>
+  /** Verify an authentication response and extract the public key. */
+  verifyAuthentication: (
+    response: Authentication.Response,
+  ) => Promise<verifyAuthentication.ReturnType>
+}
+
+export declare namespace getRegistrationOptions {
+  type Parameters = {
+    /** Credential IDs to exclude (prevents re-registering existing credentials). */
+    excludeCredentialIds?: readonly string[] | undefined
+    /** Credential display name (e.g. `"alice"`). */
+    name: string
+    /** Opaque user identifier. Encoded as `user.id` in the WebAuthn creation options. */
+    userId?: string | undefined
+  }
+  type ReturnType = { options: Registration.Options }
+}
+
+export declare namespace verifyRegistration {
+  type Options = {
+    /** Display name for the credential (e.g. user's email). */
+    name?: string | undefined
+  }
+  type ReturnType = {
+    /** The registered credential's ID. */
+    credentialId: string
+    /** The credential's public key (uncompressed P256, hex-encoded). */
+    publicKey: Hex
+  }
+}
+
+export declare namespace getAuthenticationOptions {
+  type Parameters = {
+    /** Credential IDs to allow (restricts which credentials can be used). */
+    allowCredentialIds?: readonly string[] | undefined
+    /** Challenge to use. */
+    challenge?: `0x${string}` | undefined
+    /** Credential ID to restrict authentication to a specific credential. */
+    credentialId?: string | undefined
+    /** Mediation hint for passkey autofill / conditional UI. */
+    mediation?: 'conditional' | 'optional' | 'required' | 'silent' | undefined
+  }
+  type ReturnType = { options: Authentication.Options }
+}
+
+export declare namespace verifyAuthentication {
+  type ReturnType = {
+    /** The authenticated credential's ID. */
+    credentialId: string
+    /** The credential's public key (uncompressed P256, hex-encoded). */
+    publicKey: Hex
+    /** User identifier from the authenticator's `userHandle` (discoverable/conditional flows). */
+    userId?: string | undefined
+  }
+}
+
+/** Creates a {@link Ceremony} from a custom implementation. */
+export function from(ceremony: Ceremony): Ceremony {
+  return ceremony
+}
+
+/**
+ * Creates a pure client-side ceremony for development and prototyping.
+ *
+ * Generates challenges and verifies responses locally using `webauthx/server`.
+ * Stores credentials in memory. No external server needed.
+ *
+ * @example
+ * ```ts
+ * import { Ceremony } from 'accounts'
+ *
+ * const ceremony = Ceremony.local()
+ * ```
+ */
+export function local(options: local.Options = {}): Ceremony {
+  const rpId = options.rpId ?? (typeof location !== 'undefined' ? location.hostname : 'localhost')
+  const storage =
+    options.storage ?? (typeof window !== 'undefined' ? Storage.idb() : Storage.memory())
+  const storageKey = 'credentials'
+
+  return from({
+    async getRegistrationOptions(parameters) {
+      const { excludeCredentialIds, name, userId } = parameters
+      const { options } = Registration.getOptions({
+        excludeCredentialIds: excludeCredentialIds as string[] | undefined,
+        name,
+        rp: { id: rpId, name: rpId },
+        user: userId ? { id: Bytes.fromString(userId), name } : undefined,
+      })
+      return { options }
+    },
+
+    async verifyRegistration(credential) {
+      const publicKey = credential.publicKey
+      const credentials = (await storage.getItem<Record<string, Hex>>(storageKey)) ?? {}
+      credentials[credential.id] = publicKey
+      await storage.setItem(storageKey, credentials)
+      return { credentialId: credential.id, publicKey }
+    },
+
+    async getAuthenticationOptions(parameters = {}) {
+      const { allowCredentialIds, challenge, credentialId } = parameters
+      const { options } = Authentication.getOptions({
+        challenge,
+        credentialId: (allowCredentialIds as string[] | undefined) ?? credentialId,
+        rpId,
+      })
+      return { options }
+    },
+
+    async verifyAuthentication(response) {
+      const credentials = (await storage.getItem<Record<string, Hex>>(storageKey)) ?? {}
+      const publicKey = credentials[response.id]
+      if (!publicKey) throw new Error(`Unknown credential: ${response.id}`)
+      return { credentialId: response.id, publicKey }
+    },
+  })
+}
+
+export declare namespace local {
+  type Options = {
+    /** Relying Party ID (e.g. `"example.com"`). @default location.hostname */
+    rpId?: string | undefined
+    /** Storage adapter for credential persistence. @default Storage.idb() in browser, Storage.memory() otherwise. */
+    storage?: Storage.Storage | undefined
+  }
+}
+
+/**
+ * Creates a server-backed ceremony that delegates to a remote {@link Handler.webauthn} endpoint.
+ *
+ * All challenge generation, verification, and credential storage happen server-side.
+ * The client uses `fetch()` to communicate with 4 POST endpoints derived from the base URL.
+ *
+ * @example
+ * ```ts
+ * import { Ceremony } from 'accounts'
+ *
+ * const ceremony = Ceremony.server({ url: 'https://example.com/webauthn' })
+ * ```
+ */
+export function server(options: server.Options): Ceremony {
+  const { url } = options
+
+  async function request<returnType>(path: string, body: unknown): Promise<returnType> {
+    const response = await fetch(`${url}${path}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+    const json = await response.json()
+    if (!response.ok) throw new Error((json as { error?: string }).error ?? 'Request failed')
+    return json as returnType
+  }
+
+  return from({
+    async getRegistrationOptions(parameters) {
+      const { excludeCredentialIds, name, userId } = parameters
+      return request('/register/options', { excludeCredentialIds, name, userId })
+    },
+
+    async verifyRegistration(credential) {
+      return request('/register', credential)
+    },
+
+    async getAuthenticationOptions(parameters = {}) {
+      const { allowCredentialIds, challenge, credentialId, mediation } = parameters
+      return request('/login/options', { allowCredentialIds, challenge, credentialId, mediation })
+    },
+
+    async verifyAuthentication(response) {
+      return request('/login', response)
+    },
+  })
+}
+
+export declare namespace server {
+  type Options = {
+    /** Base URL of the WebAuthn handler (e.g. `"https://example.com/webauthn"`). */
+    url: string
+  }
+}

package/src/core/Client.ts

@@ -0,0 +1,36 @@
+import { type Chain, createClient, type Client, http, type Transport } from 'viem'
+import type { tempo } from 'viem/chains'
+import { withFeePayer } from 'viem/tempo'
+
+import type * as Store from './Store.js'
+
+const clients = new Map<string, Client>()
+
+/** Resolves a viem Client for a given chain ID (cached). */
+export function fromChainId(
+  chainId: number | undefined,
+  options: fromChainId.Options,
+): Client<Transport, typeof tempo> {
+  const { chains, feePayer, store } = options
+  const id = chainId ?? store.getState().chainId
+  const key = `${id}:${feePayer ?? ''}`
+  let client = clients.get(key)
+  if (!client) {
+    const chain = chains.find((c) => c.id === id) ?? chains[0]!
+    const transport = feePayer ? withFeePayer(http(), http(feePayer)) : http()
+    client = createClient({ chain, transport, pollingInterval: 1000 })
+    clients.set(key, client)
+  }
+  return client as never
+}
+
+export declare namespace fromChainId {
+  type Options = {
+    /** Supported chains. */
+    chains: readonly [Chain, ...Chain[]]
+    /** Fee payer service URL. When set, the transport routes fee-payer RPC calls to this URL. */
+    feePayer?: string | undefined
+    /** Reactive state store. */
+    store: Store.Store
+  }
+}

package/src/core/Dialog.browser.test.ts

@@ -0,0 +1,309 @@
+import { afterEach, describe, expect, test, vi } from 'vp/test'
+
+import * as Dialog from './Dialog.js'
+import * as Storage from './Storage.js'
+import * as Store from './Store.js'
+
+const host = 'https://wallet.tempo.xyz/embed'
+
+function setup() {
+  const store = Store.create({
+    chainId: 1,
+    storage: Storage.memory({ key: 'dialog-test' }),
+  })
+  const dialog = Dialog.iframe()
+  const handle = dialog({ host, store })
+  return { handle, store }
+}
+
+afterEach(() => {
+  document.querySelectorAll('dialog[data-tempo-wallet]').forEach((el) => el.remove())
+  document.body.style.overflow = ''
+})
+
+describe('Dialog.iframe', () => {
+  test('default: appends dialog and iframe to document.body', () => {
+    setup()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]')
+    expect(dialog).not.toBeNull()
+    const iframe = dialog!.querySelector('iframe')
+    expect(iframe).not.toBeNull()
+  })
+
+  test('behavior: iframe has correct sandbox attributes', () => {
+    setup()
+    const iframe = document.querySelector('dialog[data-tempo-wallet] iframe')!
+    expect(iframe.getAttribute('sandbox')).toMatchInlineSnapshot(
+      `"allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"`,
+    )
+  })
+
+  test('behavior: iframe has correct allow attributes', () => {
+    setup()
+    const iframe = document.querySelector('dialog[data-tempo-wallet] iframe')!
+    const allow = iframe.getAttribute('allow')!
+    expect(allow).toContain('publickey-credentials-get')
+    expect(allow).toContain('publickey-credentials-create')
+  })
+
+  test('behavior: iframe src points to host', () => {
+    setup()
+    const iframe = document.querySelector('dialog[data-tempo-wallet] iframe') as HTMLIFrameElement
+    expect(iframe.src).toMatchInlineSnapshot(`"https://wallet.tempo.xyz/embed/"`)
+    expect(iframe.src).toContain(host)
+  })
+
+  test('behavior: open shows dialog', () => {
+    const { handle } = setup()
+    handle.open()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]') as HTMLDialogElement
+    expect(dialog.open).toBe(true)
+  })
+
+  test('behavior: close hides dialog', () => {
+    const { handle } = setup()
+    handle.open()
+    handle.close()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]') as HTMLDialogElement
+    expect(dialog.open).toBe(false)
+  })
+
+  test('behavior: destroy removes dialog from DOM', () => {
+    const { handle } = setup()
+    handle.destroy()
+    expect(document.querySelector('dialog[data-tempo-wallet]')).toBeNull()
+  })
+
+  test('behavior: body scroll locked on open', () => {
+    const { handle } = setup()
+    handle.open()
+    expect(document.body.style.overflow).toBe('hidden')
+  })
+
+  test('behavior: body scroll restored on close', () => {
+    const { handle } = setup()
+    document.body.style.overflow = 'auto'
+    handle.open()
+    handle.close()
+    expect(document.body.style.overflow).toBe('auto')
+  })
+
+  test('behavior: open is idempotent', () => {
+    const { handle } = setup()
+    handle.open()
+    expect(() => handle.open()).not.toThrow()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]') as HTMLDialogElement
+    expect(dialog.open).toBe(true)
+    handle.close()
+  })
+
+  test('behavior: close without open does not throw', () => {
+    const { handle } = setup()
+    expect(() => handle.close()).not.toThrow()
+  })
+
+  test('behavior: destroy restores body scroll', () => {
+    const { handle } = setup()
+    document.body.style.overflow = 'auto'
+    handle.open()
+    handle.destroy()
+    expect(document.body.style.overflow).toBe('auto')
+  })
+
+  test('behavior: destroy closes open dialog', () => {
+    const { handle } = setup()
+    handle.open()
+    handle.destroy()
+    expect(document.querySelector('dialog[data-tempo-wallet]')).toBeNull()
+  })
+
+  test('behavior: cancel event rejects pending requests', () => {
+    const { handle, store } = setup()
+    handle.open()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]') as HTMLDialogElement
+    dialog.dispatchEvent(new Event('cancel'))
+    const queue = store.getState().requestQueue
+    for (const q of queue) expect(q.status).toBe('error')
+  })
+
+  test('behavior: focus restored to previous element on close', () => {
+    const button = document.createElement('button')
+    document.body.appendChild(button)
+    button.focus()
+    expect(document.activeElement).toBe(button)
+
+    const { handle } = setup()
+    handle.open()
+    handle.close()
+
+    expect(document.activeElement).toBe(button)
+    button.remove()
+  })
+
+  test('behavior: backdrop click rejects pending requests', () => {
+    const { handle, store } = setup()
+    handle.open()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]') as HTMLDialogElement
+
+    dialog.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    const queue = store.getState().requestQueue
+    for (const q of queue) expect(q.status).toBe('error')
+  })
+
+  test('behavior: click inside iframe does not close dialog', () => {
+    const { handle } = setup()
+    handle.open()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]') as HTMLDialogElement
+    const iframe = dialog.querySelector('iframe')!
+
+    iframe.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(dialog.open).toBe(true)
+  })
+
+  test('behavior: 1Password inert attribute stripped from dialog', async () => {
+    const { handle } = setup()
+    handle.open()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]') as HTMLDialogElement
+
+    dialog.setAttribute('inert', '')
+
+    await new Promise((resolve) => setTimeout(resolve, 10))
+
+    expect(dialog.hasAttribute('inert')).toBe(false)
+    handle.close()
+  })
+
+  test('behavior: iframe has accessibility attributes', () => {
+    setup()
+    const dialog = document.querySelector('dialog[data-tempo-wallet]') as HTMLDialogElement
+    expect(dialog.getAttribute('role')).toBe('dialog')
+    expect(dialog.getAttribute('aria-label')).toBe('Tempo Auth')
+  })
+})
+
+describe('Dialog.popup', () => {
+  test('default: window.open called with correct URL', () => {
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue({
+      closed: false,
+      close: vi.fn(),
+    } as unknown as Window)
+
+    const store = Store.create({
+      chainId: 1,
+      storage: Storage.memory({ key: 'popup-test' }),
+    })
+    const dialog = Dialog.popup()
+    const handle = dialog({ host, store })
+    handle.open()
+
+    expect(openSpy).toHaveBeenCalledOnce()
+    expect(openSpy.mock.calls[0]![0]).toBe(host)
+
+    handle.destroy()
+    openSpy.mockRestore()
+  })
+
+  test('behavior: window.open called with centered position', () => {
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue({
+      closed: false,
+      close: vi.fn(),
+    } as unknown as Window)
+
+    const store = Store.create({
+      chainId: 1,
+      storage: Storage.memory({ key: 'popup-test' }),
+    })
+    const dialog = Dialog.popup()
+    const handle = dialog({ host, store })
+    handle.open()
+
+    const features = openSpy.mock.calls[0]![2] as string
+    expect(features).toContain('width=')
+    expect(features).toContain('height=')
+    expect(features).toContain('left=')
+    expect(features).toContain('top=')
+
+    handle.destroy()
+    openSpy.mockRestore()
+  })
+
+  test('behavior: close calls popup.close()', () => {
+    const popupClose = vi.fn()
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue({
+      closed: false,
+      close: popupClose,
+    } as unknown as Window)
+
+    const store = Store.create({
+      chainId: 1,
+      storage: Storage.memory({ key: 'popup-test' }),
+    })
+    const dialog = Dialog.popup()
+    const handle = dialog({ host, store })
+    handle.open()
+    handle.close()
+
+    expect(popupClose).toHaveBeenCalledOnce()
+
+    handle.destroy()
+    openSpy.mockRestore()
+  })
+
+  test('behavior: open throws if popup blocked', () => {
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
+
+    const store = Store.create({
+      chainId: 1,
+      storage: Storage.memory({ key: 'popup-test' }),
+    })
+    const dialog = Dialog.popup()
+    const handle = dialog({ host, store })
+
+    expect(() => handle.open()).toThrow('Failed to open popup')
+
+    openSpy.mockRestore()
+  })
+
+  test('behavior: destroy cleans up', () => {
+    const popupClose = vi.fn()
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue({
+      closed: false,
+      close: popupClose,
+    } as unknown as Window)
+
+    const store = Store.create({
+      chainId: 1,
+      storage: Storage.memory({ key: 'popup-test' }),
+    })
+    const dialog = Dialog.popup()
+    const handle = dialog({ host, store })
+    handle.open()
+    handle.destroy()
+
+    expect(popupClose).toHaveBeenCalled()
+
+    openSpy.mockRestore()
+  })
+})
+
+describe('Dialog.noop', () => {
+  test('default: open, close, destroy are callable without error', () => {
+    const store = Store.create({
+      chainId: 1,
+      storage: Storage.memory({ key: 'noop-test' }),
+    })
+    const dialog = Dialog.noop()
+    const handle = dialog({ host, store })
+    expect(() => handle.open()).not.toThrow()
+    expect(() => handle.close()).not.toThrow()
+    expect(() => handle.destroy()).not.toThrow()
+  })
+})
+
+describe('isSafari', () => {
+  test('default: returns false in non-Safari environment', () => {
+    expect(Dialog.isSafari()).toBe(false)
+  })
+})