@tempoxyz/id 0.0.0-pr-187.sha-eed04d3

package/src/app/routes/device.tsx

@@ -0,0 +1,227 @@
+/**
+ * The device page: the signed-in user approves or denies a CLI's request. The CLI shows
+ * `verification_uri_complete`, which opens the page with the user code filled in, so the user only
+ * decides. A visit to `/device` without a code asks for the code that the terminal shows. The CLI
+ * receives its tokens, and any key that approval signs, on its next poll. A passkey-owned account
+ * signs the key with its passkey in this browser, which takes a second request.
+ * @module
+ */
+import { useMutation } from '@tanstack/react-query'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { parseResponse } from 'hono/client'
+import { type FormEvent, useState } from 'react'
+import { Authentication } from 'webauthx/client'
+import * as Client from '../lib/Client.js'
+import * as Loader from '../lib/Loader.js'
+import { DeviceApproval } from '../screens/DeviceApproval.js'
+import { style } from '../zyzz.config.js'
+
+/** Wraps a failure of the browser's passkey ceremony, which reaches no API. */
+class CeremonyError extends Error {
+  override name = 'Page.CeremonyError'
+}
+
+export const Route = createFileRoute('/device')({
+  // The route splitter drops the style namespace, so the component stays in this chunk.
+  codeSplitGroupings: [],
+  component: () => <Page {...Route.useLoaderData()} />,
+  /**
+   * Sends a visitor without a session to sign-in, which returns to the page with its query.
+   * Otherwise returns the user code from the query, and the request that it names, or the refusal's
+   * message for an unknown or expired code, a code that another user holds, or a spent rate limit.
+   * Reading a pending code binds it to the user. The CLI's link names the code `code`, and the link
+   * of `POST /device/code` names it `user_code` (RFC 8628 §3.3.1).
+   */
+  loader: async (match): Promise<Page.Props> => {
+    const client = Client.create()
+    const session = await parseResponse(client.v1.auth.session.$get())
+    if (!session.user) {
+      // Sign-in returns only to the device page with its code alone, so `return_to` leaves out
+      // `chain`, which the root route keeps on every page.
+      const { pathname, searchStr } = match.location
+      const params = new URLSearchParams(searchStr)
+      params.delete('chain')
+      const returnTo = params.size > 0 ? `${pathname}?${params}` : pathname
+      const query = new URLSearchParams({ return_to: returnTo })
+      Loader.redirect({ href: `/login?${query}` })
+    }
+
+    const code = match.deps.code ?? match.deps.user_code ?? ''
+    if (!code) return { code, error: null, request: null }
+    try {
+      // The client puts a path parameter into the URL as it is, so the code is encoded, and a
+      // value such as `../account` names no other route.
+      const found = await parseResponse(
+        client.v1.device.requests[':code'].$get({
+          param: { code: encodeURIComponent(code) },
+        }),
+      )
+      return { code, error: null, request: found.request }
+    } catch (error) {
+      return { code, error: Client.message(error), request: null }
+    }
+  },
+  loaderDeps: (match: { search: Search }) => ({
+    code: match.search.code,
+    user_code: match.search.user_code,
+  }),
+  validateSearch: (search: Record<string, unknown>): Search => ({
+    ...(typeof search.code === 'string' ? { code: search.code } : {}),
+    ...(typeof search.user_code === 'string'
+      ? { user_code: search.user_code }
+      : {}),
+  }),
+})
+
+/** The search parameters that the page reads. */
+type Search = {
+  /** The user code, as the CLI's link names it. */
+  code?: string | undefined
+  /** The user code, as the link of `POST /device/code` names it. */
+  user_code?: string | undefined
+}
+
+/** Renders the page. */
+function Page(props: Page.Props) {
+  const client = Client.use()
+  const router = useRouter()
+  // Whether the page loads the request of a submitted code.
+  const [fetching, setFetching] = useState(false)
+  const code = props.request?.user_code ?? props.code
+  // Without a session, the page's loader sends the browser to sign-in, which returns here.
+  const onError = (error: Error) => {
+    if (Client.reason(error) === 'session_required') window.location.reload()
+  }
+  const approve = useMutation({
+    async mutationFn() {
+      const json = {
+        // Approval signs for the account that the page shows.
+        ...(props.request?.key_authorization?.account
+          ? { account: props.request.key_authorization.account }
+          : {}),
+        code,
+      }
+      const decided = await parseResponse(
+        client.v1.device.approve.$post({ json }),
+      )
+      if (!('step' in decided)) return decided
+
+      // The passkey signs the key authorization's digest, which the step's options carry.
+      const assertion = await Authentication.sign({
+        options: { publicKey: decided.step.options.publicKey },
+      }).catch((error: unknown) => {
+        throw new CeremonyError('Passkey ceremony failed.', { cause: error })
+      })
+      const signed = await parseResponse(
+        client.v1.device.approve.$post({
+          json: { ...json, passkey: { assertion } },
+        }),
+      )
+      if ('step' in signed)
+        throw new Error('The approval requested a second passkey step.')
+      return signed
+    },
+    onError,
+  })
+  const deny = useMutation({
+    mutationFn: () =>
+      parseResponse(client.v1.device.deny.$post({ json: { code } })),
+    onError,
+  })
+
+  const status = (() => {
+    if (approve.isSuccess) return 'approved'
+    if (deny.isSuccess) return 'denied'
+    const decided = props.request?.status
+    return decided === 'pending' ? undefined : decided
+  })()
+  const error = (() => {
+    if (props.error) return props.error
+    // The API's refusal names the other flows, and the screen states the step here instead.
+    if (approve.error && Client.reason(approve.error) !== 'webauthn_required')
+      return message(approve.error)
+    if (deny.error) return Client.message(deny.error)
+    return undefined
+  })()
+
+  function submitCode(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const value = String(new FormData(event.currentTarget).get('code'))
+    setFetching(true)
+    // The router renders a failed navigation itself, so the field holds only until it settles.
+    void router
+      .navigate({ search: { code: value }, to: '/device' })
+      .finally(() => setFetching(false))
+  }
+
+  return (
+    <main {...styles.page()}>
+      <DeviceApproval
+        approving={approve.isPending}
+        autoFocus
+        code={props.code}
+        denying={deny.isPending}
+        error={error}
+        fetching={fetching}
+        invalid={Boolean(props.error)}
+        onApprove={() => approve.mutate()}
+        onDeny={() => deny.mutate()}
+        onSubmitCode={submitCode}
+        refusal={
+          Client.reason(approve.error) === 'webauthn_required'
+            ? 'passkey'
+            : undefined
+        }
+        request={props.request ?? undefined}
+        status={status}
+      />
+    </main>
+  )
+}
+
+declare namespace Page {
+  type Props = {
+    /** The user code from the query, or an empty string without one. */
+    code: string
+    /** Why the code names no request, such as an unknown or expired code. */
+    error: string | null
+    /** The request that the code names, or `null` without a code or for an unknown one. */
+    request:
+      | (DeviceApproval.Request & {
+          /** Whether the user approved or denied the code. `pending` until the user decides. */
+          status: 'approved' | 'denied' | 'pending'
+        })
+      | null
+  }
+}
+
+/**
+ * Returns the message to show for `error`. A ceremony that the user cancels, or that times out,
+ * fails with a `NotAllowedError` from the browser, which the passkey library wraps in its own error.
+ * A refused assertion takes a new passkey step, which the next approval starts.
+ */
+function message(error: unknown) {
+  if (Client.reason(error) === 'webauthn_rejected')
+    return 'Your passkey did not sign the approval. Approve again, or deny the request.'
+  if (!(error instanceof CeremonyError)) return Client.message(error)
+  if (names(error).includes('NotAllowedError'))
+    return 'The passkey request was canceled. Approve again, or deny the request.'
+  return 'Your passkey did not sign the approval. Approve again, or deny the request.'
+}
+
+/** Returns the names of `error` and of each error in its chain of causes. */
+function names(error: unknown): readonly string[] {
+  if (!(error instanceof Error)) return []
+  return [error.name, ...names(error.cause)]
+}
+
+namespace styles {
+  export const page = style({
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    minHeight: 'screen',
+    paddingBlock: 16,
+    paddingInline: 4,
+  })
+}

package/src/app/routes/index.tsx

@@ -0,0 +1,115 @@
+/** The signed-in user's account: their Tempo Accounts with each balance, and sign-out. @module */
+import { useMutation } from '@tanstack/react-query'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { parseResponse } from 'hono/client'
+import * as Chain from '../../internal/Chain.js'
+import * as Client from '../lib/Client.js'
+import * as Loader from '../lib/Loader.js'
+import { Account } from '../screens/Account.js'
+import { style } from '../zyzz.config.js'
+
+export const Route = createFileRoute('/')({
+  // The route splitter drops the style namespace, so the component stays in this chunk.
+  codeSplitGroupings: [],
+  component: () => <Page {...Route.useLoaderData()} />,
+  /**
+   * Redirects a visitor without a session to sign-in. Otherwise returns the user's name and email,
+   * and their accounts in the `default` realm, oldest first, each with its balance on the chain that
+   * the `chain` search parameter names, or on Tempo mainnet, the chain that a key acts on by
+   * default. The page creates no account. A spent account limit or a failed read, such as during a
+   * Privy outage, returns `accounts: null` with the reason.
+   */
+  loader: async (match): Promise<Page.Props> => {
+    const client = Client.create()
+    const session = await parseResponse(client.v1.auth.session.$get())
+    if (!session.user) Loader.redirect({ href: '/login' })
+    const user = { email: session.user.email, name: session.user.name }
+
+    const account = await parseResponse(
+      client.v1.account.$get({
+        query: { chain: match.deps.chain ?? 'mainnet' },
+      }),
+    ).catch((error: unknown) => ({ error }))
+    if ('error' in account)
+      return {
+        ...user,
+        accountError:
+          Client.reason(account.error) === 'rate_limited'
+            ? Client.message(account.error)
+            : 'Your wallets failed to load. Reload the page to try again.',
+        accounts: null,
+      }
+
+    // Each Tempo Account has one owner, so the guard only narrows the read.
+    return {
+      ...user,
+      accountError: null,
+      accounts: account.tempo.flatMap((entry) => {
+        const owner = entry.config.owners[0]
+        return owner
+          ? [
+              {
+                address: entry.address,
+                balance: 'balance' in entry ? (entry.balance ?? null) : null,
+                owner: owner.type,
+              },
+            ]
+          : []
+      }),
+    }
+  },
+  // A change of chain loads the balances again.
+  loaderDeps: (match: { search: { chain?: Chain.Chain | undefined } }) => ({
+    chain: match.search.chain,
+  }),
+})
+
+/** Renders the page. */
+function Page(props: Page.Props) {
+  const client = Client.use()
+  const router = useRouter()
+  const signOut = useMutation({
+    mutationFn: () => parseResponse(client.v1.auth.logout.$post()),
+    // The mutation stays pending until the sign-in page renders, so the button holds until then.
+    onSuccess: () => router.navigate({ to: '/login' }),
+  })
+
+  return (
+    <main {...styles.page()} aria-label="Your account">
+      <Account
+        accountError={props.accountError ?? undefined}
+        accounts={props.accounts}
+        email={props.email}
+        error={signOut.error ? Client.message(signOut.error) : undefined}
+        name={props.name ?? undefined}
+        onSignOut={() => signOut.mutate()}
+        signingOut={signOut.isPending}
+      />
+    </main>
+  )
+}
+
+declare namespace Page {
+  type Props = {
+    /** Why the accounts failed to load, or `null` when they loaded. */
+    accountError: string | null
+    /** The user's Tempo Accounts in the `default` realm, oldest first, or `null` when they failed to load. */
+    accounts: Account.Props['accounts']
+    /** The signed-in user's email address. */
+    email: string
+    /** The user's name, or `null` when the user has none. */
+    name: string | null
+  }
+}
+
+namespace styles {
+  // Content starts at the same height as on `/deposit`, so moving between them keeps the title in place.
+  export const page = style({
+    alignItems: 'flex-start',
+    display: 'flex',
+    justifyContent: 'center',
+    minHeight: 'screen',
+    paddingBlock: 16,
+    paddingInline: 4,
+  })
+}