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

package/src/app/routes/login.tsx

@@ -0,0 +1,506 @@
+/**
+ * Signs a visitor in with an emailed code, Google, or a passkey. The sign-in then continues the app's
+ * authorization that sent the visitor here, returns to the device page, or opens the account. A wallet.tempo passkey without an
+ * email waits for the emailed code that links it. A failed Google sign-in returns here with `error`.
+ * @module
+ */
+import { useMutation } from '@tanstack/react-query'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { type InferResponseType, parseResponse } from 'hono/client'
+import { type FormEvent, useEffect, useRef, useState } from 'react'
+import { Authentication } from 'webauthx/client'
+import * as Client from '../lib/Client.js'
+import * as Loader from '../lib/Loader.js'
+import { SignIn } from '../screens/SignIn.js'
+import { style } from '../zyzz.config.js'
+
+/** A signed passkey assertion, as the browser returns it. */
+type Assertion = Awaited<ReturnType<typeof Authentication.sign>>
+
+/** The response of a passkey verification: a signed-in user, or the email step. */
+type PasskeyResult = InferResponseType<
+  Client.Client['v1']['auth']['passkey']['verify']['$post'],
+  200
+>
+
+/** The time in milliseconds between checks of an autofill request's deadline. */
+const autofillInterval = 10 * 1000
+
+/**
+ * The wall-clock time in milliseconds that an autofill request waits for a passkey before a new one
+ * replaces it. It is one minute shorter than the 5-minute lifetime of a challenge.
+ */
+const autofillLifetime = 4 * 60 * 1000
+
+/** 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('/login')({
+  // The route splitter drops the style namespace, so the component stays in this chunk.
+  codeSplitGroupings: [],
+  component: () => <Page {...Route.useLoaderData()} />,
+  /**
+   * Redirects a signed-in user to `return_to`, a path on the device page, or else to the account.
+   * Otherwise returns the sign-in methods that `GET /v1/auth/methods` reads, whether a Google
+   * sign-in failed (`error=access_denied`), and the page that sign-in returns to. An app's
+   * authorization that asks to sign in again (`prompt=login`) carries a signed `sig`, and shows the
+   * page with a session.
+   */
+  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 } : {}),
+          },
+        }),
+      ),
+    ])
+    if (session.user && !signed)
+      Loader.redirect({ href: methods.return_to ?? '/' })
+
+    return {
+      // Better Auth sends its other failures here too, with their own codes. Only the failed route of
+      // a provider sign-in sends `access_denied`.
+      failed: methods.google && query.get('error') === 'access_denied',
+      google: methods.google,
+      passkeys: methods.passkeys,
+      request: methods.request,
+      returnTo: methods.return_to,
+      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)
+  // The autofill request that waits for a passkey picked from the email field, if one runs.
+  const autofill = useRef<AbortController | undefined>(undefined)
+  const passkey = useMutation({
+    async mutationFn(variables: { assertion?: Assertion | undefined }) {
+      const assertion = variables.assertion ?? (await ceremony({}))
+      return parseResponse(
+        client.v1.auth.passkey.verify.$post({
+          json: { assertion, ...oauthQuery() },
+        }),
+      )
+    },
+  })
+  const resend = useMutation({ mutationFn: sendCode })
+  const send = useMutation({ mutationFn: sendCode })
+  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 } : {}
+      return parseResponse(
+        client.v1.auth.code.verify.$post({
+          json: { ...variables, ...linked, ...oauthQuery() },
+        }),
+      )
+    },
+  })
+  const email = send.isSuccess ? send.variables.email : undefined
+
+  /**
+   * Requests passkey options, and signs them in the browser. Options with `link` ask for the email
+   * step's passkey again. A conditional request waits for a passkey picked from the email field's
+   * autofill, until `signal` aborts it.
+   */
+  async function ceremony(options: {
+    link?: string | undefined
+    mediation?: 'conditional' | undefined
+    signal?: AbortSignal | undefined
+  }) {
+    const { link, mediation, signal } = options
+    const response = await parseResponse(
+      client.v1.auth.passkey.options.$post({
+        json: {
+          ...(link ? { link } : {}),
+          ...(mediation ? { mediation } : {}),
+          ...oauthQuery(),
+          // The API reads the device app from the code itself, so the code selects its realms.
+          ...(props.userCode ? { user_code: props.userCode } : {}),
+        },
+      }),
+    )
+    // 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),
+            ...(signal ? { signal } : {}),
+          }),
+        options: {
+          publicKey: {
+            ...publicKey,
+            ...(allowCredentials ? { allowCredentials } : {}),
+          },
+          ...(response.options.mediation
+            ? { mediation: response.options.mediation }
+            : {}),
+        },
+      })
+    } catch (error) {
+      throw new CeremonyError('Passkey ceremony failed.', { cause: error })
+    }
+  }
+
+  // Autofill offers the browser's passkeys in the email field while the first step shows and no
+  // other sign-in runs. A passkey picked there signs in as the button does.
+  useEffect(() => {
+    if (!props.passkeys || email || link || passkey.isPending || send.isPending)
+      return
+    const controller = new AbortController()
+    autofill.current = controller
+    void (async () => {
+      const available =
+        await window.PublicKeyCredential?.isConditionalMediationAvailable?.()
+      if (!available || controller.signal.aborted) return
+      // The browser holds a conditional request open with no time limit, but its challenge expires,
+      // so a new request replaces it before then.
+      while (!controller.signal.aborted) {
+        const round = new AbortController()
+        const abort = () => round.abort()
+        // The challenge expires by wall-clock time, which runs on while the device sleeps and timers
+        // stop, so the round checks a deadline when the page shows again and at a short interval.
+        const deadline = Date.now() + autofillLifetime
+        const check = () => {
+          if (Date.now() >= deadline) round.abort()
+        }
+        controller.signal.addEventListener('abort', abort)
+        document.addEventListener('visibilitychange', check)
+        window.addEventListener('pageshow', check)
+        const timer = setInterval(check, autofillInterval)
+        // A ceremony that the browser aborts, or that fails before a passkey is picked, offers the
+        // button instead, so its failure shows nothing.
+        const result = await ceremony({
+          mediation: 'conditional',
+          signal: round.signal,
+        }).then(
+          (assertion) => ({ assertion }),
+          (error: unknown) => ({ error }),
+        )
+        clearInterval(timer)
+        controller.signal.removeEventListener('abort', abort)
+        document.removeEventListener('visibilitychange', check)
+        window.removeEventListener('pageshow', check)
+        if (controller.signal.aborted) return
+        if ('assertion' in result) {
+          send.reset()
+          passkey.mutate(
+            { assertion: result.assertion },
+            { onSuccess: applyPasskey },
+          )
+          return
+        }
+        if (round.signal.aborted) continue
+        // A request that does not reach the API, as while a device reconnects after sleep, starts
+        // again. A refusal ends the autofill, so it does not repeat.
+        if (!(result.error instanceof TypeError)) return
+        await reconnect({ signal: controller.signal })
+      }
+    })()
+    return () => controller.abort()
+    // `ceremony`, `passkey.mutate`, and `send.reset` read current state when they run, so they are
+    // not dependencies.
+  }, [props.passkeys, email, link, passkey.isPending, send.isPending])
+
+  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()
+    // A passkey picked from the autofill during the send would start a second sign-in.
+    autofill.current?.abort()
+    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 for a moment, so the sign-in confirms it before it
+          // continues. The router renders a failed navigation itself, so the timer need not wait.
+          window.setTimeout(() => continueTo(data), verifiedDelay)
+        },
+      },
+    )
+  }
+
+  /** Continues to the app's redirect, to the page that sent the visitor here, 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: '/' })
+  }
+
+  /**
+   * Sends the browser to Google, and back to this page. With an app's authorization request, the
+   * callback continues it instead.
+   */
+  function signInWithGoogle() {
+    const page = new URL(window.location.href)
+    // The next attempt drops the failure of the last one.
+    page.searchParams.delete('error')
+    const url = new URL('/v1/auth/oauth/google', window.location.origin)
+    // A path, which Tempo ID resolves against its own origin.
+    url.searchParams.set('return_to', page.pathname + page.search)
+    const { oauth_query } = oauthQuery()
+    if (oauth_query) url.searchParams.set('oauth_query', oauth_query)
+    window.location.assign(url)
+  }
+
+  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.
+    // The browser runs one passkey request at a time, so the autofill request ends first.
+    autofill.current?.abort()
+    passkey.mutate({}, { onSuccess: applyPasskey })
+  }
+
+  /** Continues a verified passkey sign-in, or asks for the email that links a wallet.tempo passkey. */
+  function applyPasskey(data: PasskeyResult) {
+    if ('step' in data) setLink(data.step.link)
+    else continueTo({ redirect: data.redirect })
+  }
+
+  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
+  })()
+  // The failure of a Google sign-in shows until another sign-in starts.
+  const failed = props.failed && send.isIdle && passkey.isIdle
+
+  return (
+    <main {...styles.page()}>
+      <SignIn
+        autoFocus
+        email={email}
+        error={(() => {
+          if (error) return message(error, { code: Boolean(email) })
+          if (failed)
+            return 'Sign-in with Google failed. Try again, or continue with email.'
+          return undefined
+        })()}
+        invalid={Boolean(email ? verify.error : send.error)}
+        linking={Boolean(link)}
+        onChangeEmail={changeEmail}
+        onGoogle={props.google ? signInWithGoogle : undefined}
+        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 = {
+    /** Whether a Google sign-in returned here with `error`. */
+    failed: boolean
+    /** Whether the page offers Google sign-in, which the deployment configures. */
+    google: boolean
+    /** Whether the page offers passkey sign-in, which the loader decides from the app's realms. */
+    passkeys: boolean
+    /**
+     * The app's authorization request that the sign-in continues, with the key that the sign-in
+     * grants, or `null` without one.
+     */
+    request: SignIn.Props['request'] | null
+    /** The page that sign-in returns to, a path on the device page, or `null` for the account. */
+    returnTo: string | null
+    /** The user code of the device page that sign-in returns to, or `null` without one. */
+    userCode: string | null
+  }
+}
+
+/** How long an accepted code shows green before the sign-in continues, in milliseconds. */
+const verifiedDelay = 500
+
+/** 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 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.
+ */
+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 refusal of the link's passkey drops the link. */
+    code: boolean
+  }
+}
+
+/** 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)]
+}
+
+/**
+ * Returns the signed authorization request that `GET /oauth2/authorize` put in the page's query, as
+ * the verify request's `oauth_query`, or nothing when the visitor came without one. The `error` of a
+ * failed Google sign-in is not part of the signed request, so the request drops it.
+ */
+function oauthQuery(): { oauth_query?: string } {
+  const params = new URLSearchParams(window.location.search)
+  if (!params.has('sig')) return {}
+  params.delete('error')
+  return { oauth_query: params.toString() }
+}
+
+/**
+ * Resolves after `autofillInterval`, when the browser comes back online, or when `signal` aborts,
+ * whichever comes first.
+ */
+function reconnect(options: reconnect.Options) {
+  const { signal } = options
+  return new Promise<void>((resolve) => {
+    const done = () => {
+      clearTimeout(timer)
+      window.removeEventListener('online', done)
+      signal.removeEventListener('abort', done)
+      resolve()
+    }
+    const timer = setTimeout(done, autofillInterval)
+    window.addEventListener('online', done)
+    signal.addEventListener('abort', done)
+  })
+}
+
+declare namespace reconnect {
+  type Options = {
+    /** Ends the wait early, when the autofill stops. */
+    signal: AbortSignal
+  }
+}
+
+namespace styles {
+  export const page = style({
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    minHeight: 'screen',
+    paddingBlock: 16,
+    paddingInline: 4,
+  })
+}