@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/routes/deposit.tsx

@@ -0,0 +1,107 @@
+/** The deposit page for one of the signed-in user's Tempo Accounts. @module */
+import { createFileRoute } from '@tanstack/react-router'
+import { parseResponse } from 'hono/client'
+import type * as Chain from '../../internal/Chain.js'
+import * as Client from '../lib/Client.js'
+import * as Loader from '../lib/Loader.js'
+import { Deposit } from '../screens/Deposit.js'
+import { style } from '../zyzz.config.js'
+
+export const Route = createFileRoute('/deposit')({
+  component: () => <Page {...Route.useLoaderData()} />,
+  /**
+   * Redirects a visitor without a session to sign-in. Otherwise returns the method and the user's
+   * `address`, or `address: null` with the reason. It creates no account.
+   */
+  loader: async (match): Promise<Page.Props> => {
+    const client = Client.create()
+    const { address, chain, method } = match.deps
+    const shown = method === 'tempo' ? method : null
+    // The account read refuses a visitor without a session, so no separate session read runs.
+    const account = await parseResponse(
+      client.v1.account.$get({ query: {} }),
+    ).catch((error: unknown) => ({ error }))
+    if ('error' in account) {
+      // The sign-in page's query keeps the chain, for its wallet upgrade, and leaves the address out.
+      if (Client.reason(account.error) === 'session_required')
+        Loader.redirect({ href: chain ? `/login?chain=${chain}` : '/login' })
+      return {
+        address: null,
+        error:
+          Client.reason(account.error) === 'rate_limited'
+            ? Client.message(account.error)
+            : 'Your wallets failed to load. Reload the page to try again.',
+        method: shown,
+      }
+    }
+
+    // Only one of the user's own accounts receives a deposit through this page.
+    const found = account.tempo.find(
+      (entry) => entry.address.toLowerCase() === address?.toLowerCase(),
+    )
+    if (!found)
+      return {
+        address: null,
+        error:
+          'This wallet was not found. Go back to your account, then choose Deposit.',
+        method: shown,
+      }
+    return { address: found.address, error: null, method: shown }
+  },
+  // The root route validates `chain`.
+  loaderDeps: (match: {
+    search: Search & { chain?: Chain.Chain | undefined }
+  }) => ({
+    address: match.search.address,
+    chain: match.search.chain,
+    method: match.search.method,
+  }),
+  validateSearch: (search: Record<string, unknown>): Search => ({
+    ...(typeof search.address === 'string' ? { address: search.address } : {}),
+    ...(typeof search.method === 'string' ? { method: search.method } : {}),
+  }),
+})
+
+/** The page's search parameters. */
+type Search = {
+  /** The account that receives the deposit. */
+  address?: string | undefined
+  /** The method to show, such as `tempo`. Absent, the page lists the networks. */
+  method?: string | undefined
+}
+
+/** Renders the page. */
+function Page(props: Page.Props) {
+  return (
+    <main {...styles.page()} aria-label="Deposit">
+      <Deposit
+        address={props.address ?? undefined}
+        error={props.error ?? undefined}
+        method={props.method ?? undefined}
+      />
+    </main>
+  )
+}
+
+declare namespace Page {
+  type Props = {
+    /** `null` if the query names none of the user's accounts. */
+    address: `0x${string}` | null
+    /** `null` when the page shows an address. */
+    error: string | null
+    /** `null` for the list of networks. */
+    method: 'tempo' | null
+  }
+}
+
+namespace styles {
+  // Content starts at the same height as on the account page, so the titles line up.
+  export const page = style({
+    alignItems: 'flex-start',
+    display: 'flex',
+    justifyContent: 'center',
+    minHeight: '100dvh !custom',
+    paddingBlock: '64',
+    paddingInline: '16',
+  })
+}

package/src/app/routes/device.tsx

@@ -0,0 +1,273 @@
+/**
+ * The device page, where the signed-in user approves or denies a CLI's user code. A wallet.tempo
+ * passkey's wallet that waits for its upgrade, so approval cannot sign the key, shows the upgrade
+ * step first. @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 * as Upgrade from '../lib/Upgrade.js'
+import { DeviceApproval } from '../screens/DeviceApproval.js'
+import { WalletUpgrade } from '../screens/WalletUpgrade.js'
+import { style } from '../zyzz.config.js'
+
+/** Wraps a failure of the browser's passkey ceremony. */
+class CeremonyError extends Error {
+  override name = 'Page.CeremonyError'
+}
+
+export const Route = createFileRoute('/device')({
+  component: () => <Page {...Route.useLoaderData()} />,
+  /**
+   * Redirects a visitor without a session to sign-in, which returns here. Otherwise returns the
+   * code's request or the refusal's message, and binds a pending code to the user.
+   */
+  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 ?? ''
+    const email = session.user.email
+    if (!code) return { code, email, error: null, request: null, upgrade: null }
+    const found = await (async () => {
+      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.
+        return await parseResponse(
+          client.v1.device.requests[':code'].$get({
+            param: { code: encodeURIComponent(code) },
+          }),
+        )
+      } catch (error) {
+        return { error: Client.message(error) }
+      }
+    })()
+    if ('error' in found)
+      return { code, email, error: found.error, request: null, upgrade: null }
+
+    // An `upgrade` refusal names the account to upgrade on the key's chain, or none for a passkey of
+    // the email that has not linked. The screen's type reads both shapes of the response, since a
+    // decided request carries neither the refusal nor the chain.
+    const request: Page.Props['request'] = found.request
+    const key = request.key_authorization
+    const upgrade =
+      key?.refusal === 'upgrade'
+        ? await Upgrade.forKey(client, {
+            account: key.account,
+            chain: key.chain?.name,
+          })
+        : undefined
+    return { code, email, error: null, request, upgrade: upgrade ?? 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 page's search parameters. */
+type Search = {
+  /** The user code from the CLI's link. */
+  code?: string | undefined
+  /** The user code from the link of `POST /device/code` (RFC 8628 §3.3.1). */
+  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
+  })()
+
+  const upgrade = Upgrade.use({
+    // The request loads again, and approval then signs for the upgraded wallet.
+    onSuccess: () => router.invalidate({ sync: true }),
+    pending: props.upgrade ?? undefined,
+  })
+  // A session older than 10 minutes cannot upgrade. Without a session, the page's loader sends the
+  // browser to sign-in, whose fresh session shows the step, and back to the code.
+  const signOut = useMutation({
+    mutationFn: () => parseResponse(client.v1.auth.logout.$post()),
+    onSuccess: () => window.location.reload(),
+  })
+  const [skipped, setSkipped] = useState(false)
+
+  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))
+  }
+
+  if (props.upgrade && !status && !skipped)
+    return (
+      <main {...styles.page()}>
+        <WalletUpgrade
+          error={(() => {
+            const error = signOut.error ?? upgrade.error
+            if (!error || (upgrade.stale && !signOut.error)) return undefined
+            return Upgrade.message(error)
+          })()}
+          onContinue={() => upgrade.mutate()}
+          onSignIn={upgrade.stale ? () => signOut.mutate() : undefined}
+          onSkip={() => setSkipped(true)}
+          preparing={upgrade.preparing}
+          upgrading={
+            upgrade.isPending || signOut.isPending || signOut.isSuccess
+          }
+        />
+      </main>
+    )
+
+  return (
+    <main {...styles.page()}>
+      <DeviceApproval
+        approving={approve.isPending}
+        autoFocus
+        code={props.code}
+        denying={deny.isPending}
+        email={props.email}
+        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 query's user code, or an empty string. */
+    code: string
+    /** The signed-in user's address. */
+    email: string
+    /** Why the code names no request. */
+    error: string | null
+    /** The code's request, or `null` without a code or for an unknown one. */
+    request:
+      | (DeviceApproval.Request & {
+          /** `pending` until the user decides. */
+          status: 'approved' | 'denied' | 'pending'
+        })
+      | null
+    /** The wallet upgrade that approval waits for, or `null`. */
+    upgrade: Upgrade.Pending | null
+  }
+}
+
+/** Returns the message for `error`, such as for a canceled ceremony. */
+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 its 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: '100dvh !custom',
+    paddingBlock: '64',
+    paddingInline: '16',
+  })
+}

package/src/app/routes/error.tsx

@@ -0,0 +1,62 @@
+/**
+ * The page for a refusal that Better Auth cannot return to the app. It shows fixed copy for each
+ * `error`, never the link's `error_description`. @module
+ */
+import { createFileRoute } from '@tanstack/react-router'
+import { InvalidRequest } from '../screens/Approval.js'
+import { style } from '../zyzz.config.js'
+
+export const Route = createFileRoute('/error')({
+  component: () => <Page {...Route.useLoaderData()} />,
+  /** Returns the reason for the query's `error`. */
+  loader: (match): Page.Props => ({
+    reason: reasons.get(match.deps.error ?? '') ?? 'request',
+  }),
+  // The page's state names only `error`, so `error_description` reaches no part of the document.
+  loaderDeps: (match: { search: Search }) => ({ error: match.search.error }),
+  validateSearch: (search: Record<string, unknown>): Search => ({
+    error: typeof search.error === 'string' ? search.error : undefined,
+  }),
+})
+
+/** The page's search parameters. */
+type Search = {
+  /** Better Auth's OAuth error code, such as `invalid_client`. */
+  error?: string | undefined
+}
+
+/** Renders the page. */
+function Page(props: Page.Props) {
+  return (
+    <main {...styles.page()}>
+      <InvalidRequest reason={props.reason} />
+    </main>
+  )
+}
+
+declare namespace Page {
+  type Props = {
+    /** Why Tempo ID cannot continue the request. */
+    reason: InvalidRequest.Reason
+  }
+}
+
+/** The reason for each `error` code. Any other code shows an invalid request. */
+// An annotation, unlike a type argument, lets the route splitter leave the screen out of the loader.
+const reasons: ReadonlyMap<string, InvalidRequest.Reason> = new Map([
+  ['client_disabled', 'client'],
+  ['invalid_client', 'client'],
+  ['invalid_redirect', 'redirect'],
+  ['invalid_redirect_uri', 'redirect'],
+])
+
+namespace styles {
+  export const page = style({
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    minHeight: '100dvh !custom',
+    paddingBlock: '64',
+    paddingInline: '16',
+  })
+}