slauthjs 0.0.0-stage → 2.0.0

package/src/account-element.js

@@ -0,0 +1,244 @@
+import { createClient } from './client.js'
+import { MESSAGES, STYLE, escape } from './ui.js'
+
+/**
+ * <slauth-account>: an account page in one tag. Name and email, passkeys, password,
+ * linked providers, two-factor, signed-in devices, organization invitations, and
+ * signing out or deleting the account. It shows only what the server has turned on,
+ * and is themed with the same CSS variables as <slauth-sign-in>.
+ *
+ * Attributes: base-path (default /auth), signed-out (where to go after signing out or
+ * deleting the account; default "/").
+ *
+ *   import 'slauthjs/account'
+ *   <slauth-account></slauth-account>
+ */
+class SlauthAccount extends HTMLElement {
+  connectedCallback() {
+    this.auth = createClient({ basePath: this.getAttribute('base-path') ?? '/auth' })
+    this.data = null
+    this.ui = { error: '', notice: '', busy: false, editing: null, setup: null, recoveryCodes: null, newEmail: '' }
+    this.attachShadow({ mode: 'open' })
+    this.render()
+    this.load()
+  }
+
+  async load() {
+    try {
+      const [session, config] = await Promise.all([this.auth.session(), this.auth.config()])
+      if (!session.user) {
+        this.data = { signedOut: true }
+        return this.render()
+      }
+      const [passkeys, accounts, sessions, invites] = await Promise.all([
+        config.passkeys ? this.auth.passkey.list() : { passkeys: [] },
+        this.auth.accounts.list(),
+        this.auth.sessions.list(),
+        config.organizations ? this.auth.orgs.invites() : { invites: [] },
+      ])
+      const orgs = config.organizations ? (await this.auth.orgs.list()).orgs : []
+      this.data = { user: session.user, config, passkeys: passkeys.passkeys, ...accounts, sessions: sessions.sessions, invites: invites.invites, orgs }
+    } catch (error) {
+      this.ui.error = error.message
+    }
+    this.render()
+  }
+
+  async run(action, notice = '') {
+    this.ui = { ...this.ui, busy: true, error: '', notice: '' }
+    this.render()
+    try {
+      await action()
+      this.ui.notice = notice
+      await this.load()
+    } catch (error) {
+      this.ui.error = MESSAGES[error.code] ?? error.message ?? 'Something went wrong.'
+    } finally {
+      this.ui.busy = false
+      if (this.isConnected) this.render()
+    }
+  }
+
+  leave() {
+    window.location.assign(this.getAttribute('signed-out') ?? '/')
+  }
+
+  render() {
+    const d = this.data
+    const { error, notice, busy, editing, setup, recoveryCodes } = this.ui
+    const off = busy ? 'disabled' : ''
+    const date = (ms) => new Date(ms).toLocaleDateString(undefined, { dateStyle: 'medium' })
+    let body
+    if (!d) body = '<p>Loading…</p>'
+    else if (d.signedOut) body = '<h2>Your account</h2><p>Please sign in first.</p>'
+    else {
+      const { user, config } = d
+      const providerRows = config.providers
+        .map((p) => {
+          const linked = d.accounts.find((a) => a.provider === p.id)
+          return `<li><span>${escape(p.name)}${linked ? ` <span class="muted">${escape(linked.email ?? linked.username ?? '')}</span>` : ''}</span>${
+            linked ? `<button class="link" data-on="unlink" data-id="${escape(p.id)}" ${off}>Disconnect</button>` : `<button class="link" data-on="link" data-id="${escape(p.id)}" ${off}>Connect</button>`
+          }</li>`
+        })
+        .join('')
+      body = `
+        <h2>Your account</h2>
+        <p>${escape(user.email)}</p>
+
+        <h3>Profile</h3>
+        <form data-on="name">
+          <label for="name">Name</label>
+          <input id="name" autocomplete="name" value="${escape(user.name ?? '')}" />
+          <button class="ghost" ${off}>Save name</button>
+        </form>
+        ${
+          editing === 'email'
+            ? this.ui.newEmail
+              ? `<form data-on="email-code"><label for="email-code">Code sent to ${escape(this.ui.newEmail)}</label><input id="email-code" class="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" required /><button class="primary" ${off}>Confirm new email</button></form>`
+              : `<form data-on="email"><label for="email">New email</label><input id="email" type="email" autocomplete="email" required /><button class="primary" ${off}>Send a code</button></form>`
+            : `<div class="row"><button class="link" data-on="edit-email">Change email</button></div>`
+        }
+
+        ${
+          config.passkeys
+            ? `<h3>Passkeys</h3>
+        <ul class="list">${d.passkeys.map((pk) => `<li><span>${escape(pk.name)} <span class="muted">added ${date(pk.createdAt)}</span></span><button class="link" data-on="remove-passkey" data-id="${escape(pk.id)}" ${off}>Remove</button></li>`).join('') || '<li><span class="muted">None yet.</span></li>'}</ul>
+        ${this.auth.passkey.supported() ? `<button class="ghost dashed" data-on="add-passkey" ${off}>Add a passkey</button>` : ''}`
+            : ''
+        }
+
+        ${
+          config.passwords || config.providers.length
+            ? `<h3>Ways to sign in</h3>
+        <ul class="list">
+          ${config.passwords ? `<li><span>Password <span class="muted">${d.password ? 'set' : 'not set'}</span></span><button class="link" data-on="edit-password">${d.password ? 'Change' : 'Set'}</button></li>` : ''}
+          ${providerRows}
+        </ul>
+        ${
+          editing === 'password'
+            ? `<form data-on="password">${d.password ? '<label for="current">Current password</label><input id="current" type="password" autocomplete="current-password" />' : ''}<label for="password">New password</label><input id="password" type="password" autocomplete="new-password" minlength="8" required /><button class="primary" ${off}>Save password</button></form>`
+            : ''
+        }`
+            : ''
+        }
+
+        ${
+          config.twoFactor
+            ? `<h3>Two-factor sign-in</h3>
+        ${
+          recoveryCodes
+            ? `<p>Save these recovery codes somewhere safe. Each one works once if you lose your phone.</p><div class="codes">${recoveryCodes.map((c) => `<span>${escape(c)}</span>`).join('')}</div><button class="ghost" data-on="codes-done">I've saved them</button>`
+            : setup
+              ? `<p>Add this to your authenticator app (<a href="${escape(setup.uri)}">open in app</a>), or type the key:</p><p class="codes"><span>${escape(setup.secret.replace(/(.{4})/g, '$1 ').trim())}</span></p>
+          <form data-on="enable-2fa"><label for="totp">Code from the app</label><input id="totp" class="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" required /><button class="primary" ${off}>Turn on</button></form>`
+              : d.twoFactor
+                ? `<p>On: signing in asks for a code from your authenticator app.</p>
+          <form data-on="disable-2fa"><label for="totp">Code from the app (or a recovery code) to turn it off</label><input id="totp" autocomplete="one-time-code" required /><button class="ghost" ${off}>Turn off</button></form>`
+                : `<p>Off. Turn it on to ask for a code from an authenticator app when you sign in.</p><button class="ghost" data-on="setup-2fa" ${off}>Set up</button>`
+        }`
+            : ''
+        }
+
+        <h3>Signed-in devices</h3>
+        <ul class="list">${d.sessions
+          .map((s) => `<li><span>${escape(device(s.userAgent))} <span class="muted">${s.current ? 'this device' : `since ${date(s.createdAt)}`}</span></span>${s.current ? '' : `<button class="link" data-on="revoke" data-id="${escape(s.id)}" ${off}>Sign out</button>`}</li>`)
+          .join('')}</ul>
+        ${d.sessions.length > 1 ? `<button class="ghost" data-on="revoke-others" ${off}>Sign out everywhere else</button>` : ''}
+
+        ${
+          config.organizations && (d.invites.length || d.orgs.length)
+            ? `<h3>Organizations</h3>
+        <ul class="list">
+          ${d.invites.map((i) => `<li><span>${escape(i.org.name)} <span class="muted">invited as ${escape(i.role)}</span></span><span><button class="link" data-on="accept" data-id="${escape(i.id)}" ${off}>Join</button> <button class="link" data-on="decline" data-id="${escape(i.id)}" ${off}>Decline</button></span></li>`).join('')}
+          ${d.orgs.map((o) => `<li><span>${escape(o.name)}</span><span class="muted">${escape(o.role)}</span></li>`).join('')}
+        </ul>`
+            : ''
+        }
+
+        <h3>Leave</h3>
+        <button class="ghost" data-on="sign-out" ${off}>Sign out</button>
+        ${editing === 'delete' ? `<p>This deletes your account and everything in it, for good.</p><button class="primary" data-on="delete" ${off}>Yes, delete my account</button>` : `<div class="row"><button class="link" data-on="edit-delete">Delete my account</button></div>`}`
+    }
+    this.shadowRoot.innerHTML = `<style>${STYLE}:host { max-width: 480px; }</style><div class="card" part="card">${body}${notice ? `<p role="status">${escape(notice)}</p>` : ''}<p class="error" role="alert">${escape(error)}</p></div>`
+
+    const on = (key, handler) => {
+      for (const el of this.shadowRoot.querySelectorAll(`[data-on="${key}"]`)) {
+        el.addEventListener(el.tagName === 'FORM' ? 'submit' : 'click', (event) => {
+          event.preventDefault()
+          handler(el.dataset.id)
+        })
+      }
+    }
+    const value = (id) => this.shadowRoot.getElementById(id)?.value ?? ''
+    const edit = (what) => ((this.ui = { ...this.ui, editing: this.ui.editing === what ? null : what, error: '', newEmail: '' }), this.render())
+
+    on('name', () => {
+      const name = value('name')
+      return this.run(() => this.auth.user.update({ name }), 'Saved.')
+    })
+    on('edit-email', () => edit('email'))
+    on('email', () => {
+      const email = value('email').trim()
+      return this.run(async () => {
+        await this.auth.email.change.start(email)
+        this.ui.newEmail = email
+      })
+    })
+    on('email-code', () => {
+      const code = value('email-code')
+      return this.run(async () => {
+        await this.auth.email.change.verify(this.ui.newEmail, code)
+        this.ui = { ...this.ui, editing: null, newEmail: '' }
+      }, 'Your email is changed.')
+    })
+    on('add-passkey', () => this.run(() => this.auth.passkey.register(), 'Passkey added.'))
+    on('remove-passkey', (id) => this.run(() => this.auth.passkey.remove(id)))
+    on('edit-password', () => edit('password'))
+    on('password', () => {
+      const current = value('current') || undefined
+      const password = value('password')
+      return this.run(async () => {
+        await this.auth.password.set(password, current)
+        this.ui.editing = null
+      }, 'Password saved.')
+    })
+    on('link', (id) => this.auth.oauth.link(id, { redirect: window.location.pathname }))
+    on('unlink', (id) => this.run(() => this.auth.accounts.unlink(id)))
+    on('setup-2fa', () =>
+      this.run(async () => {
+        this.ui.setup = await this.auth.twoFactor.setup()
+      }),
+    )
+    on('enable-2fa', () => {
+      const code = value('totp')
+      return this.run(async () => {
+        const { recoveryCodes: codes } = await this.auth.twoFactor.enable(code)
+        this.ui = { ...this.ui, setup: null, recoveryCodes: codes }
+      })
+    })
+    on('codes-done', () => ((this.ui.recoveryCodes = null), this.render()))
+    on('disable-2fa', () => {
+      const code = value('totp').trim()
+      return this.run(() => this.auth.twoFactor.disable(/^\d{6}$/.test(code) ? { code } : { recoveryCode: code }), 'Two-factor sign-in is off.')
+    })
+    on('revoke', (id) => this.run(() => this.auth.sessions.revoke(id)))
+    on('revoke-others', () => this.run(() => this.auth.sessions.revokeOthers(), 'Signed out everywhere else.'))
+    on('accept', (id) => this.run(() => this.auth.orgs.accept(id)))
+    on('decline', (id) => this.run(() => this.auth.orgs.decline(id)))
+    on('sign-out', () => this.run(async () => (await this.auth.signOut(), this.leave())))
+    on('edit-delete', () => edit('delete'))
+    on('delete', () => this.run(async () => (await this.auth.user.delete(), this.leave())))
+  }
+}
+
+/** "Chrome on macOS" from a user agent, roughly. */
+function device(ua) {
+  if (!ua) return 'Unknown device'
+  const browser = /Edg\//.test(ua) ? 'Edge' : /Firefox\//.test(ua) ? 'Firefox' : /Chrome\//.test(ua) ? 'Chrome' : /Safari\//.test(ua) ? 'Safari' : 'A browser'
+  const os = /iPhone|iPad/.test(ua) ? 'iOS' : /Android/.test(ua) ? 'Android' : /Mac OS X/.test(ua) ? 'macOS' : /Windows/.test(ua) ? 'Windows' : /Linux/.test(ua) ? 'Linux' : ''
+  return os ? `${browser} on ${os}` : browser
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('slauth-account')) {
+  customElements.define('slauth-account', SlauthAccount)
+}

package/src/client.d.ts

@@ -0,0 +1,113 @@
+import type { OrgRole, Policy, SlauthUser } from './index.js'
+
+export class SlauthError extends Error {
+  /** e.g. "bad-code", "expired", "not-allowed", "slow-down", "signed-out", "reauth-required", "offline". */
+  code: string
+  status: number
+  [detail: string]: unknown
+}
+
+/** A sign-in reply: the user, or a request for the two-factor code. */
+export type SignInResult = { user: SlauthUser; twoFactor?: undefined } | { twoFactor: true; user?: undefined }
+
+export interface ClientConfig {
+  appName: string
+  emailCodes: boolean
+  magicLinks: boolean
+  passkeys: boolean
+  passwords: boolean
+  twoFactor: boolean
+  organizations: boolean
+  providers: { id: string; name: string }[]
+}
+
+export interface SlauthClient {
+  session(): Promise<{ user: SlauthUser | null; twoFactor?: 'pending'; impersonatorId?: string; lock?: { policy: Policy; required: boolean; pinSet: boolean; unlocked: boolean } }>
+  config(): Promise<ClientConfig>
+  email: {
+    start(email: string, options?: { redirect?: string }): Promise<{ ok: true }>
+    verify(email: string, code: string): Promise<SignInResult>
+    link(token: string): Promise<SignInResult & { redirect: string }>
+    change: {
+      start(email: string): Promise<{ ok: true }>
+      verify(email: string, code: string): Promise<{ user: SlauthUser }>
+    }
+  }
+  password: {
+    signIn(email: string, password: string): Promise<SignInResult>
+    signUp(email: string, password: string, options?: { redirect?: string }): Promise<{ ok: true; verify: 'email' }>
+    set(password: string, current?: string): Promise<{ ok: true }>
+    remove(): Promise<{ ok: true }>
+  }
+  oauth: {
+    /** Navigates to the provider; returns the URL. */
+    signIn(provider: string, options?: { redirect?: string }): string
+    link(provider: string, options?: { redirect?: string }): string
+    url(provider: string, options?: { redirect?: string }): string
+  }
+  twoFactor: {
+    verify(code: string | { code: string } | { recoveryCode: string }): Promise<{ user: SlauthUser; recoveryCodesLeft?: number }>
+    setup(): Promise<{ secret: string; uri: string }>
+    enable(code: string): Promise<{ ok: true; recoveryCodes: string[] }>
+    disable(code: string | { code: string } | { recoveryCode: string }): Promise<{ ok: true }>
+    recoveryCodes(code: string): Promise<{ ok: true; recoveryCodes: string[] }>
+  }
+  passkey: {
+    supported(): boolean
+    register(name?: string): Promise<{ ok: true; passkey: { id: string; name: string } }>
+    signIn(): Promise<SignInResult>
+    list(): Promise<{ passkeys: { id: string; name: string; createdAt: number; lastUsedAt: number | null }[] }>
+    rename(id: string, name: string): Promise<{ ok: true }>
+    remove(id: string): Promise<{ ok: true }>
+  }
+  signOut(): Promise<{ ok: true }>
+  user: {
+    update(patch: { name?: string | null; image?: string | null }): Promise<{ user: SlauthUser }>
+    delete(): Promise<{ ok: true }>
+  }
+  sessions: {
+    list(): Promise<{ sessions: { id: string; createdAt: number; lastActiveAt: number; method: string | null; userAgent: string | null; ip: string | null; current: boolean }[] }>
+    revoke(id: string): Promise<{ ok: true }>
+    revokeOthers(): Promise<{ ok: true }>
+  }
+  accounts: {
+    list(): Promise<{ accounts: { provider: string; name: string; email: string | null; username: string | null; createdAt: number }[]; password: boolean; twoFactor: boolean }>
+    unlink(provider: string): Promise<{ ok: true }>
+  }
+  /** A JWT for your other services (needs `tokens` on), cached until shortly before it expires. */
+  getToken(): Promise<string>
+  orgs: {
+    list(): Promise<{ orgs: { id: string; name: string; role: OrgRole; metadata: Record<string, unknown>; createdAt: number }[] }>
+    create(name: string): Promise<{ org: { id: string; name: string; role: 'owner' } }>
+    get(id: string): Promise<{
+      org: { id: string; name: string; metadata: Record<string, unknown>; createdAt: number }
+      role: OrgRole
+      members: { userId: string; role: OrgRole; joinedAt: number; email: string; name: string | null; image: string | null }[]
+      invites?: { id: string; email: string; role: OrgRole; createdAt: number; expiresAt: number }[]
+    }>
+    rename(id: string, name: string): Promise<{ org: { id: string; name: string } }>
+    delete(id: string): Promise<{ ok: true }>
+    invite(id: string, email: string, role?: OrgRole): Promise<{ ok: true; invite: { id: string; email: string; role: OrgRole; expiresAt: number } }>
+    revokeInvite(id: string, inviteId: string): Promise<{ ok: true }>
+    setRole(id: string, userId: string, role: OrgRole): Promise<{ ok: true }>
+    removeMember(id: string, userId: string): Promise<{ ok: true }>
+    invites(): Promise<{ invites: { id: string; role: OrgRole; org: { id: string; name: string }; expiresAt: number }[] }>
+    accept(inviteId: string): Promise<{ ok: true; org: { id: string; name: string; role: OrgRole } }>
+    decline(inviteId: string): Promise<{ ok: true }>
+  }
+  lock: {
+    unlock(pin: string): Promise<{ ok: true }>
+    setup(pin: string, policy?: Policy): Promise<{ ok: true }>
+    skip(): Promise<{ ok: true }>
+    changePin(current: string, next: string): Promise<{ ok: true }>
+    setPolicy(policy: Policy, pin?: string): Promise<{ ok: true; policy: Policy }>
+    lockNow(): Promise<{ ok: true }>
+  }
+}
+
+export function createClient(options?: {
+  basePath?: string
+  fetch?: typeof fetch
+  /** For apps without cookies: where to keep the session token. */
+  token?: { get(): string | null | undefined; set(token: string | null): void | Promise<void> }
+}): SlauthClient

package/src/client.js

@@ -0,0 +1,211 @@
+/**
+ * The browser side: tiny helpers around the /auth routes, including the WebAuthn
+ * plumbing passkeys need.
+ *
+ *   import { createClient } from 'slauthjs/client'
+ *   const auth = createClient()                 // or createClient({ basePath: '/api/auth' })
+ *   await auth.email.start('me@example.com')
+ *   const { user } = await auth.email.verify('me@example.com', '123456')
+ */
+
+/** Thrown for any answer that isn't a success; `code` says which (see the docs' error list). */
+export class SlauthError extends Error {
+  constructor(message, code, status, details = {}) {
+    super(message)
+    this.code = code
+    this.status = status
+    Object.assign(this, details)
+  }
+}
+
+export function createClient({ basePath = '/auth', fetch: doFetch = (...args) => fetch(...args), token: bearer } = {}) {
+  const base = basePath.replace(/\/+$/, '')
+  // Apps that can't keep cookies (React Native, CLIs) pass `token: { get, set }` and get bearer tokens instead.
+  const extra = () => {
+    if (!bearer) return {}
+    const value = bearer.get()
+    return { 'X-Slauth-Transport': 'bearer', ...(value ? { Authorization: `Bearer ${value}` } : {}) }
+  }
+
+  async function call(path, body) {
+    const init =
+      body === undefined
+        ? { credentials: 'same-origin', headers: extra() }
+        : { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json', ...extra() }, body: JSON.stringify(body) }
+    let res
+    try {
+      res = await doFetch(`${base}/${path}`, init)
+    } catch {
+      throw new SlauthError("Couldn't reach the server.", 'offline', 0)
+    }
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok) {
+      const { error, code, ...rest } = data
+      throw new SlauthError(error ?? `HTTP ${res.status}`, code ?? 'server-error', res.status, rest)
+    }
+    if (bearer && typeof data.token === 'string' && path !== 'token') await bearer.set(data.token)
+    if (bearer && path === 'signout') await bearer.set(null)
+    return data
+  }
+
+  /** Remembers the pending two-factor sign-in for bearer apps. */
+  let pendingToken = null
+  const signIn = async (path, body) => {
+    const data = await call(path, body)
+    if (data.pendingToken) pendingToken = data.pendingToken
+    return data
+  }
+
+  let cachedToken = null
+
+  const passkey = {
+    /** True when this browser can use passkeys. */
+    supported: () => typeof window !== 'undefined' && typeof window.PublicKeyCredential === 'function',
+
+    /** Adds a passkey for the signed-in person. */
+    async register(name) {
+      const options = await call('passkey/register/options', {})
+      const credential = await navigator.credentials.create({
+        publicKey: {
+          ...options,
+          challenge: bytes(options.challenge),
+          user: { ...options.user, id: bytes(options.user.id) },
+          excludeCredentials: options.excludeCredentials.map((c) => ({ ...c, id: bytes(c.id) })),
+        },
+      })
+      return call('passkey/register/verify', { credential: serialize(credential), name })
+    },
+
+    /** Signs in with a passkey; the browser lets the person pick one. */
+    async signIn() {
+      const options = await call('passkey/login/options', {})
+      const credential = await navigator.credentials.get({
+        publicKey: { ...options, challenge: bytes(options.challenge), allowCredentials: [] },
+      })
+      return call('passkey/login/verify', { credential: serialize(credential) })
+    },
+
+    list: () => call('passkeys'),
+    rename: (id, name) => call('passkey/rename', { id, name }),
+    remove: (id) => call('passkey/delete', { id }),
+  }
+
+  const go = (url) => {
+    if (typeof window !== 'undefined') window.location.assign(url)
+    return url
+  }
+  const providerUrl = (id, params) => `${base}/oauth/${encodeURIComponent(id)}?${new URLSearchParams(params)}`
+
+  return {
+    /** `{ user }` (null when signed out), `twoFactor: 'pending'` mid sign-in, and `lock` when the app lock is on. */
+    session: () => call('session'),
+    /** What this app offers: providers, passwords, magic links, two-factor, organizations. */
+    config: () => call('config'),
+    email: {
+      start: (email, options = {}) => call('email/start', { email, ...options }),
+      verify: (email, code) => signIn('email/verify', { email, code }),
+      /** Finishes a magic link (the page the link opens does this for you). */
+      link: (token) => signIn('email/link', { token }),
+      change: {
+        start: (email) => call('email/change/start', { email }),
+        verify: (email, code) => call('email/change/verify', { email, code }),
+      },
+    },
+    password: {
+      signIn: (email, password) => signIn('password/signin', { email, password }),
+      /** Emails a code; once it's used (email.verify) the password is saved. */
+      signUp: (email, password, options = {}) => call('password/signup', { email, password, ...options }),
+      set: (password, current) => call('password/set', { password, current }),
+      remove: () => call('password/remove', {}),
+    },
+    /** "Sign in with …": goes to the provider and comes back to `redirect`. */
+    oauth: {
+      signIn: (provider, { redirect } = {}) => go(providerUrl(provider, redirect ? { redirect } : {})),
+      link: (provider, { redirect } = {}) => go(providerUrl(provider, { link: '1', ...(redirect ? { redirect } : {}) })),
+      url: (provider, { redirect } = {}) => providerUrl(provider, redirect ? { redirect } : {}),
+    },
+    twoFactor: {
+      /** The second step of signing in. Pass { recoveryCode } instead of a code if the phone is lost. */
+      verify: (code) => call('two-factor/verify', { ...(typeof code === 'string' ? { code } : code), ...(pendingToken ? { pendingToken } : {}) }),
+      setup: () => call('two-factor/setup', {}),
+      enable: (code) => call('two-factor/enable', { code }),
+      disable: (code) => call('two-factor/disable', typeof code === 'string' ? { code } : code),
+      recoveryCodes: (code) => call('two-factor/recovery-codes', { code }),
+    },
+    passkey,
+    signOut: async () => {
+      cachedToken = null
+      return call('signout', {})
+    },
+    user: {
+      update: (patch) => call('user', patch),
+      delete: () => call('user/delete', {}),
+    },
+    sessions: {
+      list: () => call('sessions'),
+      revoke: (id) => call('sessions/revoke', { id }),
+      revokeOthers: () => call('sessions/revoke-others', {}),
+    },
+    accounts: {
+      list: () => call('accounts'),
+      unlink: (provider) => call('accounts/unlink', { provider }),
+    },
+    /** A JWT for your other services, reused until a minute before it expires. */
+    async getToken() {
+      if (cachedToken && cachedToken.expiresAt - 60_000 > Date.now()) return cachedToken.token
+      cachedToken = await call('token')
+      return cachedToken.token
+    },
+    orgs: {
+      list: () => call('orgs'),
+      create: (name) => call('orgs', { name }),
+      get: (id) => call(`orgs/${encodeURIComponent(id)}`),
+      rename: (id, name) => call(`orgs/${encodeURIComponent(id)}`, { name }),
+      delete: (id) => call(`orgs/${encodeURIComponent(id)}/delete`, {}),
+      invite: (id, email, role) => call(`orgs/${encodeURIComponent(id)}/invite`, { email, role }),
+      revokeInvite: (id, inviteId) => call(`orgs/${encodeURIComponent(id)}/invites/revoke`, { id: inviteId }),
+      setRole: (id, userId, role) => call(`orgs/${encodeURIComponent(id)}/members/role`, { userId, role }),
+      removeMember: (id, userId) => call(`orgs/${encodeURIComponent(id)}/members/remove`, { userId }),
+      invites: () => call('invites'),
+      accept: (inviteId) => call('invites/accept', { id: inviteId }),
+      decline: (inviteId) => call('invites/decline', { id: inviteId }),
+    },
+    lock: {
+      unlock: (pin) => call('lock/login', { pin }),
+      setup: (pin, policy) => call('lock/setup', { pin, policy }),
+      skip: () => call('lock/setup', { policy: 'never' }),
+      changePin: (current, next) => call('lock/pin', { current, next }),
+      setPolicy: (policy, pin) => call('lock/policy', { policy, pin }),
+      lockNow: () => call('lock/logout', {}),
+    },
+  }
+}
+
+function bytes(base64url) {
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/')
+  const binary = atob(base64 + '='.repeat((4 - (base64.length % 4)) % 4))
+  return Uint8Array.from(binary, (c) => c.charCodeAt(0))
+}
+
+function text(buffer) {
+  let binary = ''
+  for (const byte of new Uint8Array(buffer)) binary += String.fromCharCode(byte)
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+/** A PublicKeyCredential as JSON with base64url fields, the shape the server reads. */
+function serialize(credential) {
+  if (typeof credential.toJSON === 'function') return credential.toJSON()
+  const r = credential.response
+  const response = { clientDataJSON: text(r.clientDataJSON) }
+  if (r.attestationObject) {
+    response.attestationObject = text(r.attestationObject)
+    response.transports = r.getTransports?.() ?? []
+  }
+  if (r.authenticatorData) {
+    response.authenticatorData = text(r.authenticatorData)
+    response.signature = text(r.signature)
+    response.userHandle = r.userHandle ? text(r.userHandle) : null
+  }
+  return { id: credential.id, rawId: text(credential.rawId), type: credential.type, response }
+}