@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/routes/login.tsx

@@ -0,0 +1,577 @@
+/**
+ * The sign-in page: an emailed code or a passkey. A wallet.tempo passkey without an email waits for
+ * the code that links it. After a sign-in, and for a visitor who already signed in, a wallet.tempo
+ * passkey's wallet that waits for its upgrade on a chain whose accounts are configurable shows the
+ * upgrade step. @module
+ */
+import { useMutation } from '@tanstack/react-query'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { parseResponse } from 'hono/client'
+import { type FormEvent, useEffect, useRef, useState } from 'react'
+import { Authentication } from 'webauthx/client'
+import type * as Chain from '../../internal/Chain.js'
+import * as ChainName from '../../internal/ChainName.js'
+import * as Client from '../lib/Client.js'
+import * as Loader from '../lib/Loader.js'
+import * as Upgrade from '../lib/Upgrade.js'
+import { SignIn } from '../screens/SignIn.js'
+import { WalletUpgrade } from '../screens/WalletUpgrade.js'
+import { style } from '../zyzz.config.js'
+
+/** A signed passkey assertion, as the browser returns it. */
+type Assertion = Awaited<ReturnType<typeof Authentication.sign>>
+
+/** Wraps a failure of the browser's passkey ceremony. */
+class CeremonyError extends Error {
+  override name = 'Page.CeremonyError'
+}
+
+export const Route = createFileRoute('/login')({
+  component: () => <Page {...Route.useLoaderData()} />,
+  /**
+   * Redirects a signed-in user to `return_to` or the account, unless the request is signed, or a
+   * wallet upgrade waits, which the page shows first. Otherwise returns the sign-in methods.
+   */
+  loader: async (match): Promise<Page.Props> => {
+    const query = new URLSearchParams(match.location.searchStr)
+    const signed = query.has('sig')
+    const returnTo = query.get('return_to')
+    const client = Client.create()
+    const [session, methods] = await Promise.all([
+      parseResponse(client.v1.auth.session.$get()),
+      parseResponse(
+        client.v1.auth.methods.$get({
+          query: {
+            // The API names the app only from a signed authorization request.
+            ...(signed ? { oauth_query: query.toString() } : {}),
+            ...(returnTo ? { return_to: returnTo } : {}),
+          },
+        }),
+      ),
+    ])
+    // The step upgrades on the chain that the page shows, Tempo mainnet without one. An app's or a
+    // device's request shows it on its own approval page instead, for its key's chain.
+    const chain =
+      signed || returnTo
+        ? null
+        : (ChainName.read(query.get('chain')) ?? 'mainnet')
+    // A visitor who already signed in sees the wallet upgrade that waits before the redirect.
+    const upgrade = await (async () => {
+      if (!session.user || signed) return null
+      // The redirect to the account page keeps the sign-in page's chain.
+      const redirect =
+        methods.return_to ??
+        (chain && chain !== 'mainnet' ? `/?chain=${chain}` : '/')
+      const pending = chain
+        ? await Upgrade.pending(client, { chain })
+        : undefined
+      if (!pending) Loader.redirect({ href: redirect })
+      return { pending, redirect }
+    })()
+
+    return {
+      chain,
+      // A server render requests the passkey button's options beside the page and streams them in
+      // its response, so the page sends no request for them once it hydrates. The page renders
+      // without them, so their refusal leaves its status as it is.
+      passkeyOptions:
+        typeof window === 'undefined' && methods.passkeys && !upgrade
+          ? passkeyOptions(Client.create({ optional: true }), {
+              oauthQuery: signed ? query.toString() : undefined,
+              userCode: methods.user_code,
+            }).catch(() => undefined)
+          : null,
+      passkeys: methods.passkeys,
+      request: methods.app
+        ? {
+            app: methods.app,
+            host: methods.host,
+            key: methods.request?.key ?? null,
+            verified: methods.verified,
+          }
+        : null,
+      returnTo: methods.return_to,
+      upgrade,
+      userCode: methods.user_code,
+    }
+  },
+  // The loader reads the whole query, so a change to any parameter loads the page again.
+  loaderDeps: (match) => ({ search: match.search }),
+  server: {
+    handlers: {
+      // The sign-in form posts here only when it is submitted before the page hydrates, and the page
+      // then sends the code itself. The redirect keeps the query, so an app's signed authorization
+      // request stays on the page.
+      POST: (options) =>
+        new Response(null, {
+          headers: { location: `/login${new URL(options.request.url).search}` },
+          status: 303,
+        }),
+    },
+  },
+})
+
+/** Renders the page. */
+function Page(props: Page.Props) {
+  const client = Client.use()
+  const router = useRouter()
+  // The email step's link, while a wallet.tempo passkey waits for the code that links it.
+  const [link, setLink] = useState<string | undefined>(undefined)
+  // After a sign-in, the wallet upgrade that waits, and where the sign-in continues after it.
+  const [upgrade, setUpgrade] = useState<
+    { pending: Upgrade.Pending; redirect: string | null } | undefined
+  >(props.upgrade ?? undefined)
+  const [skipping, setSkipping] = useState(false)
+  const upgrading = Upgrade.use({ pending: upgrade?.pending })
+  // A session older than 10 minutes cannot upgrade. Without a session, the page shows the sign-in
+  // again, whose fresh session shows the step.
+  const signOut = useMutation({
+    mutationFn: () => parseResponse(client.v1.auth.logout.$post()),
+    onSuccess: () => window.location.reload(),
+  })
+  const passkey = useMutation({
+    async mutationFn(variables: { assertion?: Assertion | undefined }) {
+      const assertion = variables.assertion ?? (await ceremony({}))
+      const data = await parseResponse(
+        client.v1.auth.passkey.verify.$post({
+          json: { assertion, ...oauthQuery() },
+        }),
+      )
+      if ('step' in data) return data
+      // The discovery runs in the request, so a reset drops its result with the sign-in's.
+      return {
+        ...data,
+        upgrade: await waiting(client, {
+          chain: props.chain,
+          redirect: data.redirect,
+        }),
+      }
+    },
+  })
+  const resend = useMutation({ mutationFn: sendCode })
+  const send = useMutation({ mutationFn: sendCode })
+
+  // The passkey button's options, requested once the sign-in form shows, so its click starts the
+  // ceremony without a request. A click takes them once, within their challenge's lifetime.
+  const prefetched = useRef<
+    | {
+        at: number
+        options: Promise<PasskeyOptions | undefined>
+      }
+    | undefined
+  >(undefined)
+  useEffect(() => {
+    if (!props.passkeys || upgrade) return
+    // The server render's options were requested with this document, so their lifetime runs from
+    // its navigation. The router can render the same loader data again after a navigation back to
+    // the page, so a document signs them at most once.
+    prefetched.current ??=
+      props.passkeyOptions && !taken.has(props.passkeyOptions)
+        ? { at: performance.timeOrigin, options: props.passkeyOptions }
+        : {
+            at: Date.now(),
+            // A failed request leaves no options, and the click requests them again, which shows
+            // its error.
+            options: requestOptions({}).catch(() => undefined),
+          }
+  }, [props.passkeyOptions, props.passkeys, upgrade])
+
+  // The confirmation of a resent code clears after a short time, so the button offers a resend again.
+  useEffect(() => {
+    if (!resend.isSuccess) return
+    const timer = window.setTimeout(() => resend.reset(), sentDelay)
+    return () => window.clearTimeout(timer)
+  }, [resend.isSuccess, resend.reset])
+
+  const verify = useMutation({
+    async mutationFn(variables: { code: string; email: string }) {
+      // The link's passkey signs again, so a page left at the email step links nothing for the next
+      // person, who cannot sign with it.
+      const linked = link ? { assertion: await ceremony({ link }), link } : {}
+      const data = await parseResponse(
+        client.v1.auth.code.verify.$post({
+          json: { ...variables, ...linked, ...oauthQuery() },
+        }),
+      )
+      // The discovery runs in the request, so a reset drops its result with the sign-in's.
+      return {
+        ...data,
+        upgrade: await waiting(client, {
+          chain: props.chain,
+          redirect: data.redirect,
+        }),
+      }
+    },
+  })
+  const email = send.isSuccess ? send.variables.email : undefined
+
+  /** Requests passkey options. With `link`, it requests the email step's passkey. */
+  function requestOptions(variables: { link?: string | undefined }) {
+    return passkeyOptions(client, {
+      link: variables.link,
+      oauthQuery: oauthQuery().oauth_query,
+      userCode: props.userCode,
+    })
+  }
+
+  /**
+   * Signs passkey options: the prefetched ones once, or new ones. With `link`, it requests the email
+   * step's passkey, whose options name it.
+   */
+  async function ceremony(options: { link?: string | undefined }) {
+    const { link } = options
+    const response = await (async () => {
+      const entry = link ? undefined : prefetched.current
+      prefetched.current = undefined
+      if (entry) taken.add(entry.options)
+      if (entry && Date.now() - entry.at < prefetchLifetime) {
+        const prefetchedOptions = await entry.options
+        // The request can settle past the lifetime, such as in a suspended tab.
+        if (prefetchedOptions && Date.now() - entry.at < prefetchLifetime)
+          return prefetchedOptions
+      }
+      return await requestOptions({ link })
+    })()
+    // The response reads optional fields as possibly `undefined`, which the ceremony's options
+    // omit instead.
+    const { allowCredentials, ...publicKey } = response.options.publicKey
+    try {
+      return await Authentication.sign({
+        // ox types the request with optional members that the DOM types leave out when absent. The
+        // object is the one that ox built for `navigator.credentials.get`.
+        getFn: (request) =>
+          navigator.credentials.get(request as CredentialRequestOptions),
+        options: {
+          publicKey: {
+            ...publicKey,
+            ...(allowCredentials ? { allowCredentials } : {}),
+          },
+        },
+      })
+    } catch (error) {
+      throw new CeremonyError('Passkey ceremony failed.', { cause: error })
+    }
+  }
+
+  function sendCode(variables: { email: string }) {
+    return parseResponse(client.v1.auth.code.$post({ json: variables }))
+  }
+
+  function submitEmail(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    // One sign-in runs at a time, since a passkey sign-in sets its own session.
+    if (send.isPending || passkey.isPending) return
+    passkey.reset()
+    send.mutate({
+      email: String(new FormData(event.currentTarget).get('email')),
+    })
+  }
+
+  function submitCode(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    // A complete code submits the form, and Enter can submit it again before the first returns.
+    if (!email || verify.isPending || verify.isSuccess) return
+    const form = event.currentTarget
+    resend.reset()
+    verify.mutate(
+      { code: String(new FormData(form).get('code')), email },
+      {
+        onError(error) {
+          // An expired link, or a passkey that does not sign again, leaves the code valid, so the next
+          // attempt signs in with email only.
+          if (linkFailed(error)) setLink(undefined)
+          // The refused code clears, so the next one can be typed at once.
+          const field = form.elements.namedItem('code')
+          if (!(field instanceof HTMLInputElement)) return
+          field.value = ''
+          field.focus()
+        },
+        onSuccess(data) {
+          // The accepted code shows green while the next page loads, so the confirmation adds no
+          // wait to the sign-in.
+          signedIn(data)
+        },
+      },
+    )
+  }
+
+  /** Continues a sign-in, after the upgrade step when a wallet upgrade waits. */
+  function signedIn(data: {
+    redirect: string | null
+    upgrade: Upgrade.Pending | undefined
+  }) {
+    if (data.upgrade)
+      setUpgrade({ pending: data.upgrade, redirect: data.redirect })
+    else continueTo(data)
+  }
+
+  /** Continues to the app's redirect, to `returnTo`, or to the account. */
+  function continueTo(data: { redirect: string | null }) {
+    if (data.redirect) window.location.assign(data.redirect)
+    // The device page loads as a document, so its loader reads the code on the server, where a
+    // refused lookup logs nothing in the browser.
+    else if (props.returnTo) window.location.assign(props.returnTo)
+    else void router.navigate({ to: '/' })
+  }
+
+  function signInWithPasskey() {
+    if (passkey.isPending) return
+    send.reset()
+    // The result applies through the call's own callback, which a reset drops, so a sign-in that
+    // returns after the email path takes over sets no link.
+    passkey.mutate({}, { onSuccess: applyPasskey })
+  }
+
+  /** Continues a passkey sign-in, or requests the email for a wallet.tempo passkey. */
+  function applyPasskey(data: NonNullable<typeof passkey.data>) {
+    if ('step' in data) setLink(data.step.link)
+    else signedIn(data)
+  }
+
+  function sendAgain() {
+    if (!email || verify.isPending || verify.isSuccess) return
+    verify.reset()
+    resend.mutate({ email })
+  }
+
+  // A reset mutation drops the callbacks of its request, so a result that returns after the
+  // address changes updates nothing. The passkey's link clears too, so the code of another address
+  // in a shared browser links nothing.
+  function changeEmail() {
+    passkey.reset()
+    resend.reset()
+    send.reset()
+    setLink(undefined)
+    verify.reset()
+  }
+
+  // A tab left at the email step can reach the next person, who drops the passkey's link here. The
+  // reset drops a pending code request too, so its result does not open the code step.
+  function startOver() {
+    passkey.reset()
+    send.reset()
+    setLink(undefined)
+  }
+
+  const error = (() => {
+    if (email) return verify.error ?? resend.error
+    return send.error ?? passkey.error
+  })()
+  if (upgrade)
+    return (
+      <main {...styles.page()}>
+        <WalletUpgrade
+          error={(() => {
+            const error = signOut.error ?? upgrading.error
+            if (!error || (upgrading.stale && !signOut.error)) return undefined
+            return Upgrade.message(error)
+          })()}
+          onContinue={() =>
+            upgrading.mutate(undefined, {
+              onSuccess: () => continueTo(upgrade),
+            })
+          }
+          onSignIn={upgrading.stale ? () => signOut.mutate() : undefined}
+          onSkip={() => {
+            setSkipping(true)
+            continueTo(upgrade)
+          }}
+          preparing={upgrading.preparing}
+          skipping={skipping}
+          // The upgraded wallet holds the button while the next page loads.
+          upgrading={
+            upgrading.isPending ||
+            upgrading.isSuccess ||
+            signOut.isPending ||
+            signOut.isSuccess
+          }
+        />
+      </main>
+    )
+
+  return (
+    <main {...styles.page()}>
+      <SignIn
+        autoFocus
+        // Sign-in returns only to the device page, so any `return_to` names a device approval.
+        device={Boolean(props.returnTo)}
+        email={email}
+        error={error ? message(error, { code: Boolean(email) }) : undefined}
+        invalid={Boolean(email ? verify.error : send.error)}
+        linking={Boolean(link)}
+        onChangeEmail={changeEmail}
+        onPasskey={props.passkeys ? signInWithPasskey : undefined}
+        onResend={sendAgain}
+        onStartOver={startOver}
+        onSubmitCode={submitCode}
+        onSubmitEmail={submitEmail}
+        passkeyPending={passkey.isPending}
+        request={props.request ?? undefined}
+        resend={(() => {
+          if (resend.isPending) return 'pending'
+          if (resend.isSuccess) return 'sent'
+          return 'idle'
+        })()}
+        sending={send.isPending}
+        verified={verify.isSuccess}
+        verifying={verify.isPending}
+      />
+    </main>
+  )
+}
+
+declare namespace Page {
+  type Props = {
+    /**
+     * The chain whose wallet upgrade the step offers: the page's `chain`, or `mainnet`. `null` for
+     * an app's or a device's request, whose approval page offers it for the key's chain.
+     */
+    chain: Chain.Chain | null
+    /**
+     * The passkey button's options, which a server render requests and streams in, or `null` for a
+     * render in the browser or a page without passkeys. A failed request resolves to `undefined`.
+     */
+    passkeyOptions: Promise<PasskeyOptions | undefined> | null
+    /** Whether the app's realms offer passkey sign-in. */
+    passkeys: boolean
+    /** The app's request that the sign-in continues, with its key, or `null`. */
+    request: SignIn.Props['request'] | null
+    /** The device page's path that sign-in returns to, or `null` for the account. */
+    returnTo: string | null
+    /**
+     * For a visitor who already signed in, the wallet upgrade that waits and the path that follows
+     * it, or `null`.
+     */
+    upgrade: { pending: Upgrade.Pending; redirect: string } | null
+    /** The device page's user code, or `null`. */
+    userCode: string | null
+  }
+}
+
+/**
+ * Returns the wallet upgrade on `chain` that waits before a sign-in continues to `redirect`, or
+ * `undefined`, as without `chain`. A redirect that leaves Tempo ID carries the app's authorization
+ * code, which expires, so the step never holds it, and the next approval or the account page offers
+ * the upgrade.
+ */
+async function waiting(
+  client: Client.Client,
+  options: { chain: Chain.Chain | null; redirect: string | null },
+) {
+  const { chain, redirect } = options
+  if (!chain) return undefined
+  if (
+    redirect !== null &&
+    new URL(redirect, window.location.origin).origin !== window.location.origin
+  )
+    return undefined
+  return await Upgrade.pending(client, { chain })
+}
+
+/**
+ * How long the page uses prefetched passkey options, in milliseconds: a minute short of their
+ * challenge's 5 minutes, so the challenge stays valid through the ceremony.
+ */
+const prefetchLifetime = 4 * 60 * 1000
+
+/** Milliseconds that the button shows "Code sent" after a resend. */
+const sentDelay = 5000
+
+/**
+ * The server render's passkey options that a click took, whose challenge is spent. Only a click in
+ * the browser adds to it, so it lives as long as the document.
+ */
+const taken = new WeakSet<Promise<PasskeyOptions | undefined>>()
+
+/** Returns whether `error` refused the email step's link, which leaves the code valid. */
+function linkFailed(error: unknown) {
+  if (error instanceof CeremonyError) return true
+  const reason = Client.reason(error)
+  return (
+    reason === 'passkey_link_expired' ||
+    reason === 'passkey_not_permitted' ||
+    reason === 'webauthn_rejected'
+  )
+}
+
+/** Returns the message for `error`, such as for a canceled ceremony. */
+function message(error: unknown, options: message.Options) {
+  // At the code step, only the link's passkey runs a ceremony, and its failure drops the link. An
+  // expired or refused link keeps the refusal's own message.
+  if (
+    options.code &&
+    (error instanceof CeremonyError ||
+      Client.reason(error) === 'webauthn_rejected')
+  )
+    return 'Your passkey did not confirm the sign-in. Enter the code again to sign in with email only.'
+  if (!(error instanceof CeremonyError)) return Client.message(error)
+  if (names(error).includes('NotAllowedError'))
+    return 'Passkey sign-in was canceled. Try again, or continue with email.'
+  return 'Passkey sign-in failed. Try again, or continue with email.'
+}
+
+declare namespace message {
+  type Options = {
+    /** Whether the page shows the code step, where a refused link drops the link. */
+    code: boolean
+  }
+}
+
+/** 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)]
+}
+
+/** Returns the page's signed request as `oauth_query`, or nothing. */
+/** The options of a passkey sign-in, from `POST /v1/auth/passkey/options`. */
+type PasskeyOptions = Awaited<ReturnType<typeof passkeyOptions>>
+
+/**
+ * Requests passkey options for the sign-in that `oauthQuery` or `userCode` continues. With `link`,
+ * it requests the email step's passkey.
+ */
+function passkeyOptions(
+  client: Client.Client,
+  options: passkeyOptions.Options,
+) {
+  const { link, oauthQuery, userCode } = options
+  return parseResponse(
+    client.v1.auth.passkey.options.$post({
+      json: {
+        ...(link ? { link } : {}),
+        ...(oauthQuery ? { oauth_query: oauthQuery } : {}),
+        // The API reads the device app from the code itself, so the code selects its realms.
+        ...(userCode ? { user_code: userCode } : {}),
+      },
+    }),
+  )
+}
+
+declare namespace passkeyOptions {
+  type Options = {
+    /** The email step's passkey link, whose passkey the options name. */
+    link?: string | undefined
+    /** The app's signed authorization request that the sign-in continues. */
+    oauthQuery?: string | undefined
+    /** The device page's user code, whose app selects the realms. */
+    userCode: string | null
+  }
+}
+
+function oauthQuery(): { oauth_query?: string } {
+  const params = new URLSearchParams(window.location.search)
+  if (!params.has('sig')) return {}
+  return { oauth_query: params.toString() }
+}
+
+namespace styles {
+  export const page = style({
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    minHeight: '100dvh !custom',
+    paddingBlock: '64',
+    paddingInline: '16',
+  })
+}