slauthjs 1.0.0 → 2.0.0

package/src/element.js

@@ -1,49 +1,66 @@
 import { createClient } from './client.js'
+import { MESSAGES, STYLE, escape } from './ui.js'
 
 /**
- * <slauth-sign-in>: a drop-in sign-in box. Email → 6-digit code → signed in, with
- * "Sign in with a passkey" and an offer to add one afterwards. Works in any framework
- * (it's a plain custom element) and is themed with CSS variables:
+ * <slauth-sign-in>: a drop-in sign-in box. It asks the server what's turned on and
+ * offers it: "Continue with GitHub/Google/…", email → 6-digit code, a password, a
+ * passkey, then the two-factor code for people who set one up, and an offer to add a
+ * passkey afterwards. Works in any framework (it's a plain custom element) and is themed
+ * with CSS variables:
  *
  *   slauth-sign-in {
  *     --slauth-accent: #f59e0b;  --slauth-ink: #2b2118;  --slauth-bg: #fff;
  *     --slauth-radius: 14px;     --slauth-font: inherit;
+ *     --slauth-accent-ink: #2b2118;  (text on the accent; for dark themes)
+ *     --slauth-error: #c2410c;
  *   }
  *
  * Attributes: base-path (default /auth), app-name, redirect (where to go once signed in),
- * no-passkeys (email codes only).
+ * mode ("sign-up" to start on the password sign-up form), no-passkeys (no passkey
+ * button or offer).
  * Fires `slauth:signed-in` with `{ detail: { user } }`.
  *
  *   import 'slauthjs/element'
  *   <slauth-sign-in app-name="Planda" redirect="/"></slauth-sign-in>
  */
 
-const STYLE = `
-:host { display: block; font-family: var(--slauth-font, inherit); color: var(--slauth-ink, #2b2118); max-width: 360px; }
-.card { background: var(--slauth-bg, #fff); border: 2px solid var(--slauth-ink, #2b2118); border-radius: var(--slauth-radius, 14px); padding: 22px; box-shadow: 4px 4px 0 var(--slauth-ink, #2b2118); }
-h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.2; }
-p { margin: 0 0 14px; font-size: 14px; opacity: .8; }
-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
-input { box-sizing: border-box; width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--slauth-ink, #2b2118); border-radius: calc(var(--slauth-radius, 14px) - 6px); background: transparent; color: inherit; }
-input.code { letter-spacing: .4em; text-align: center; font-size: 22px; font-weight: 700; }
-input:focus { outline: 3px solid var(--slauth-accent, #f59e0b); outline-offset: 1px; }
-button { font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; border-radius: calc(var(--slauth-radius, 14px) - 6px); padding: 10px 14px; width: 100%; margin-top: 12px; }
-.primary { background: var(--slauth-accent, #f59e0b); color: var(--slauth-ink, #2b2118); border: 2px solid var(--slauth-ink, #2b2118); }
-.primary:active { transform: translate(1px, 1px); }
-.ghost { background: transparent; color: inherit; border: 2px dashed currentColor; opacity: .85; }
-.link { background: none; border: 0; padding: 4px; width: auto; font-weight: 600; text-decoration: underline; opacity: .75; }
-button:disabled { opacity: .5; cursor: default; }
-.error { color: #c2410c; font-size: 13px; font-weight: 600; min-height: 18px; margin: 8px 0 0; }
-.row { display: flex; justify-content: space-between; margin-top: 8px; }
-`
-
 class SlauthSignIn extends HTMLElement {
   connectedCallback() {
     this.auth = createClient({ basePath: this.getAttribute('base-path') ?? '/auth' })
     this.appName = this.getAttribute('app-name') ?? ''
-    this.state = { step: 'email', email: '', error: '', busy: false }
+    this.config = { providers: [], passwords: false, passkeys: true }
+    this.state = { step: 'email', mode: this.getAttribute('mode') === 'sign-up' ? 'sign-up' : 'code', email: '', error: '', busy: false, recovery: false }
     this.attachShadow({ mode: 'open' })
+    this.readUrl()
     this.render()
+    this.load()
+  }
+
+  /** Errors and the two-factor step can arrive in the URL, after a provider sends people back. */
+  readUrl() {
+    const params = new URLSearchParams(window.location.search)
+    const error = params.get('slauth_error')
+    if (error) this.state.error = MESSAGES[error] ?? 'Something went wrong. Please try again.'
+    if (params.get('slauth_step') === 'two-factor') this.state.step = 'two-factor'
+    this.afterRedirect = params.get('redirect')
+    this.invite = params.get('slauth_invite')
+    if (error || params.has('slauth_step')) {
+      for (const key of ['slauth_error', 'slauth_step']) params.delete(key)
+      const query = params.toString()
+      window.history.replaceState(window.history.state, '', window.location.pathname + (query ? `?${query}` : '') + window.location.hash)
+    }
+  }
+
+  async load() {
+    try {
+      const [config, session] = await Promise.all([this.auth.config(), this.auth.session()])
+      this.config = config
+      if (session.twoFactor === 'pending') this.state.step = 'two-factor'
+      if (this.state.mode === 'sign-up' && !config.passwords) this.state.mode = 'code'
+      this.render()
+    } catch {
+      // The box still works with email codes.
+    }
   }
 
   set(patch) {
@@ -56,96 +73,181 @@ class SlauthSignIn extends HTMLElement {
     try {
       await action()
     } catch (error) {
-      this.set({ error: error.message ?? 'Something went wrong.' })
+      this.set({ error: MESSAGES[error.code] ?? error.message ?? 'Something went wrong.' })
     } finally {
       if (this.isConnected) this.set({ busy: false })
     }
   }
 
-  done(user) {
+  /** After the first step: the two-factor code, the passkey offer, or done. */
+  async signedIn(result, { offer = true } = {}) {
+    if (result.twoFactor) return this.set({ step: 'two-factor', recovery: false })
+    this.user = result.user
+    if (offer && this.passkeys()) return this.set({ step: 'offer' })
+    return this.done(result.user)
+  }
+
+  async done(user) {
+    if (this.invite && this.config.organizations) await this.auth.orgs.accept(this.invite).catch(() => {})
     // Back to the start, ready for the next time it's shown (e.g. after signing out).
-    this.state = { step: 'email', email: '', error: '', busy: false }
+    this.state = { step: 'email', mode: 'code', email: '', error: '', busy: false, recovery: false }
     this.render()
     this.dispatchEvent(new CustomEvent('slauth:signed-in', { detail: { user }, bubbles: true, composed: true }))
-    const to = this.getAttribute('redirect')
+    const to = this.getAttribute('redirect') ?? this.afterRedirect
     if (to) window.location.assign(to)
   }
 
+  passkeys() {
+    return !this.hasAttribute('no-passkeys') && this.config.passkeys !== false && this.auth.passkey.supported()
+  }
+
   render() {
-    const { step, email, error, busy } = this.state
-    const passkeys = !this.hasAttribute('no-passkeys') && this.auth.passkey.supported()
-    const name = this.appName ? ` to ${escape(this.appName)}` : ''
-    const views = {
-      email: `
+    const { step, mode, email, error, busy, recovery } = this.state
+    const { providers = [], passwords } = this.config
+    const app = this.appName || (this.config.appName !== 'your app' ? (this.config.appName ?? '') : '')
+    const name = app ? ` to ${escape(app)}` : ''
+    const off = busy ? 'disabled' : ''
+    const redirect = this.getAttribute('redirect') ?? window.location.pathname + window.location.search
+    const providerButtons = providers.length
+      ? `<div class="providers">${providers.map((p) => `<a class="button" part="provider" href="${escape(this.auth.oauth.url(p.id, { redirect }))}">Continue with ${escape(p.name)}</a>`).join('')}</div><div class="or">or</div>`
+      : ''
+
+    const emailViews = {
+      code: `
         <h2>Sign in${name}</h2>
+        ${providerButtons}
         <p>We'll email you a 6-digit code. No password needed.</p>
         <form data-on="email">
           <label for="email">Email</label>
           <input id="email" type="email" autocomplete="email webauthn" required value="${escape(email)}" />
-          <button class="primary" ${busy ? 'disabled' : ''}>Email me a code</button>
+          <button class="primary" ${off}>Email me a code</button>
+        </form>
+        ${this.passkeys() ? `<button class="ghost dashed" data-on="passkey" ${off}>Sign in with a passkey</button>` : ''}
+        ${passwords ? `<div class="row"><button class="link" data-on="mode-password">Use a password</button><button class="link" data-on="mode-sign-up">Create an account</button></div>` : ''}`,
+      password: `
+        <h2>Sign in${name}</h2>
+        ${providerButtons}
+        <form data-on="password">
+          <label for="email">Email</label>
+          <input id="email" type="email" autocomplete="username webauthn" required value="${escape(email)}" />
+          <label for="password">Password</label>
+          <input id="password" type="password" autocomplete="current-password" required />
+          <button class="primary" ${off}>Sign in</button>
         </form>
-        ${passkeys ? `<button class="ghost" data-on="passkey" ${busy ? 'disabled' : ''}>Sign in with a passkey</button>` : ''}`,
+        <div class="row"><button class="link" data-on="mode-code">Email me a code instead</button><button class="link" data-on="mode-code">Forgot password?</button></div>`,
+      'sign-up': `
+        <h2>Create an account${name}</h2>
+        ${providerButtons}
+        <form data-on="sign-up">
+          <label for="email">Email</label>
+          <input id="email" type="email" autocomplete="email" required value="${escape(email)}" />
+          <label for="password">Password</label>
+          <input id="password" type="password" autocomplete="new-password" minlength="8" required />
+          <button class="primary" ${off}>Create account</button>
+        </form>
+        <div class="row"><button class="link" data-on="mode-password">I have an account</button></div>`,
+    }
+
+    const views = {
+      email: emailViews[mode] ?? emailViews.code,
       code: `
         <h2>Check your email</h2>
-        <p>We sent a code to <strong>${escape(email)}</strong>.</p>
+        <p>We sent a code to <strong>${escape(email)}</strong>${this.config.magicLinks ? ', with a link you can tap instead' : ''}.</p>
         <form data-on="code">
           <label for="code">Code</label>
           <input id="code" class="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" required />
-          <button class="primary" ${busy ? 'disabled' : ''}>Sign in</button>
+          <button class="primary" ${off}>${mode === 'sign-up' ? 'Create account' : 'Sign in'}</button>
         </form>
         <div class="row"><button class="link" data-on="back">Use another email</button><button class="link" data-on="resend">Send again</button></div>`,
+      'two-factor': recovery
+        ? `
+        <h2>Use a recovery code</h2>
+        <p>One of the codes you saved when you turned on two-factor sign-in. Each works once.</p>
+        <form data-on="two-factor">
+          <label for="code">Recovery code</label>
+          <input id="code" autocomplete="off" autocapitalize="off" spellcheck="false" required />
+          <button class="primary" ${off}>Continue</button>
+        </form>
+        <div class="row"><button class="link" data-on="use-app">Use the app instead</button></div>`
+        : `
+        <h2>Two-factor sign-in</h2>
+        <p>Enter the 6-digit code from your authenticator app.</p>
+        <form data-on="two-factor">
+          <label for="code">Code</label>
+          <input id="code" class="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" required />
+          <button class="primary" ${off}>Continue</button>
+        </form>
+        <div class="row"><button class="link" data-on="use-recovery">Lost your phone?</button><button class="link" data-on="back">Start over</button></div>`,
       offer: `
         <h2>You're in 🦥</h2>
         <p>Add a passkey and next time it's just Face ID, Touch ID or your PIN.</p>
-        <button class="primary" data-on="add" ${busy ? 'disabled' : ''}>Add a passkey</button>
+        <button class="primary" data-on="add" ${off}>Add a passkey</button>
         <button class="link" data-on="skip">Not now</button>`,
     }
     this.shadowRoot.innerHTML = `<style>${STYLE}</style><div class="card" part="card">${views[step]}<p class="error" role="alert">${escape(error)}</p></div>`
 
     const on = (key, handler) => {
-      const el = this.shadowRoot.querySelector(`[data-on="${key}"]`)
-      el?.addEventListener(el.tagName === 'FORM' ? 'submit' : 'click', (event) => {
-        event.preventDefault()
-        handler()
-      })
+      for (const el of this.shadowRoot.querySelectorAll(`[data-on="${key}"]`)) {
+        el.addEventListener(el.tagName === 'FORM' ? 'submit' : 'click', (event) => {
+          event.preventDefault()
+          handler()
+        })
+      }
     }
+    const value = (id) => this.shadowRoot.getElementById(id)?.value ?? ''
     // Read inputs before run(): it re-renders the form, which would empty them.
     on('email', () => {
-      const value = this.shadowRoot.getElementById('email').value.trim()
-      this.set({ email: value })
+      const typed = value('email').trim()
+      this.set({ email: typed })
       return this.run(async () => {
-        await this.auth.email.start(value)
+        await this.auth.email.start(typed, { redirect: this.getAttribute('redirect') ?? undefined })
         this.set({ step: 'code' })
         this.shadowRoot.getElementById('code')?.focus()
       })
     })
-    on('code', () => {
-      const code = this.shadowRoot.getElementById('code').value
+    on('password', () => {
+      const typed = value('email').trim()
+      const password = value('password')
+      this.set({ email: typed })
+      return this.run(async () => this.signedIn(await this.auth.password.signIn(typed, password)))
+    })
+    on('sign-up', () => {
+      const typed = value('email').trim()
+      const password = value('password')
+      this.set({ email: typed })
       return this.run(async () => {
-        const { user } = await this.auth.email.verify(email, code)
-        this.user = user
-        if (passkeys) this.set({ step: 'offer' })
-        else this.done(user)
+        await this.auth.password.signUp(typed, password)
+        this.set({ step: 'code' })
       })
     })
-    on('passkey', () => this.run(async () => this.done((await this.auth.passkey.signIn()).user)))
+    on('code', () => {
+      const code = value('code')
+      return this.run(async () => this.signedIn(await this.auth.email.verify(email, code)))
+    })
+    on('two-factor', () => {
+      const code = value('code')
+      return this.run(async () => this.signedIn(await this.auth.twoFactor.verify(recovery ? { recoveryCode: code } : { code }), { offer: false }))
+    })
+    on('passkey', () => this.run(async () => this.signedIn(await this.auth.passkey.signIn(), { offer: false })))
+    on('mode-code', () => this.set({ mode: 'code', error: '' }))
+    on('mode-password', () => this.set({ mode: 'password', error: '' }))
+    on('mode-sign-up', () => this.set({ mode: 'sign-up', error: '' }))
+    on('use-recovery', () => this.set({ recovery: true, error: '' }))
+    on('use-app', () => this.set({ recovery: false, error: '' }))
     on('back', () => this.set({ step: 'email', error: '' }))
     on('resend', () => this.run(() => this.auth.email.start(email)))
     on('add', () =>
       this.run(async () => {
         await this.auth.passkey.register()
-        this.done(this.user)
+        await this.done(this.user)
       }),
     )
     on('skip', () => this.done(this.user))
-    this.shadowRoot.querySelector('input')?.focus({ preventScroll: true })
+    const first = this.shadowRoot.querySelector(step === 'email' && email ? '#password, input' : 'input')
+    first?.focus({ preventScroll: true })
   }
 }
 
-function escape(text) {
-  return String(text).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
-}
-
 if (typeof customElements !== 'undefined' && !customElements.get('slauth-sign-in')) {
   customElements.define('slauth-sign-in', SlauthSignIn)
 }

package/src/email/console.js

@@ -1,13 +1,14 @@
 /**
- * Prints sign-in codes to the console instead of emailing them. The default while
- * you build, so there's nothing to set up to try slauth.
+ * Prints sign-in codes (and links) to the console instead of emailing them. The default
+ * while you build, so there's nothing to set up to try slauth.
  *
  * @returns {import('../index.js').EmailSender}
  */
 export function consoleEmail() {
   return {
-    async send({ to, code, appName }) {
-      console.log(`\n  🦥 slauth: ${appName} sign-in code for ${to} is ${code}\n`)
+    async send({ to, code, link, appName, kind = 'sign-in', subject }) {
+      if (kind === 'sign-in') console.log(`\n  🦥 slauth: ${appName} sign-in code for ${to} is ${code}${link ? `\n     or open ${link}` : ''}\n`)
+      else console.log(`\n  🦥 slauth: email to ${to}: ${subject}${code ? `\n     code: ${code}` : ''}${link ? `\n     link: ${link}` : ''}\n`)
     },
   }
 }

package/src/email/message.js

@@ -1,16 +1,56 @@
-/** The sign-in email every sender uses, unless you pass your own `message`. */
+import { escapeHtml } from '../util.js'
+
+/**
+ * The emails slauth sends, unless you pass your own `emails` function in the config.
+ *
+ *   sign-in       a 6-digit code (and a link, with magicLinks on)
+ *   email-change  a code to confirm a new address
+ *   invite        an invitation to join an organization
+ */
+export function defaultMessage(kind, { code, link, appName, minutes, orgName, inviter }) {
+  if (kind === 'email-change') {
+    return box({
+      subject: `${code} is your code to confirm this email for ${appName}`,
+      lines: [`Enter this code in ${escapeHtml(appName)} to use this address from now on:`],
+      textLines: [`Enter this code in ${appName} to use this address from now on:`],
+      code,
+      footer: `It works for ${minutes} minutes. If you didn't ask for it, you can ignore this email.`,
+    })
+  }
+  if (kind === 'invite') {
+    return box({
+      subject: `${inviter ? `${inviter} invited you` : "You're invited"} to join ${orgName} on ${appName}`,
+      lines: [`${inviter ? `${escapeHtml(inviter)} invited you` : "You're invited"} to join <strong>${escapeHtml(orgName)}</strong> on ${escapeHtml(appName)}.`],
+      textLines: [`${inviter ? `${inviter} invited you` : "You're invited"} to join ${orgName} on ${appName}.`],
+      link,
+      linkLabel: 'Accept the invitation',
+      footer: `Sign in with this email address to accept. The invitation lasts 7 days.`,
+    })
+  }
+  return box({
+    subject: `${code} is your ${appName} sign-in code`,
+    lines: [`Your <strong>${escapeHtml(appName)}</strong> sign-in code:`],
+    textLines: [`Your ${appName} sign-in code is ${code}`],
+    code,
+    link,
+    linkLabel: `Sign in to ${appName}`,
+    footer: `It works for ${minutes} minutes. If you didn't ask for it, you can ignore this email.`,
+  })
+}
+
+/** The sign-in email, as slauth 1.0 exported it. */
 export function codeMessage({ code, appName, minutes }) {
-  const subject = `${code} is your ${appName} sign-in code`
-  const text = `Your ${appName} sign-in code is ${code}\n\nIt works for ${minutes} minutes. If you didn't ask for it, you can ignore this email.`
+  return defaultMessage('sign-in', { code, appName, minutes })
+}
+
+function box({ subject, lines, textLines = lines, code, link, linkLabel, footer }) {
+  const text = [...textLines, code ? `\n${code}` : '', link ? `\n${linkLabel}: ${link}` : '', `\n${footer}`].filter(Boolean).join('\n')
   const html = `<!doctype html><html><body style="margin:0;padding:32px 16px;background:#fdf6ec;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#2b2118">
 <div style="max-width:420px;margin:0 auto;background:#fff;border:2px solid #2b2118;border-radius:16px;padding:28px">
-<p style="margin:0 0 8px;font-size:15px">Your <strong>${escapeHtml(appName)}</strong> sign-in code:</p>
-<p style="margin:0 0 16px;font-size:34px;font-weight:800;letter-spacing:6px">${code}</p>
-<p style="margin:0;font-size:13px;color:#6b5d50">It works for ${minutes} minutes. If you didn't ask for it, you can ignore this email.</p>
+${lines.map((l) => `<p style="margin:0 0 8px;font-size:15px">${l}</p>`).join('\n')}
+${code ? `<p style="margin:0 0 16px;font-size:34px;font-weight:800;letter-spacing:6px">${escapeHtml(code)}</p>` : ''}
+${link ? `<p style="margin:8px 0 16px"><a href="${escapeHtml(link)}" style="display:inline-block;background:#f59e0b;color:#2b2118;border:2px solid #2b2118;border-radius:10px;padding:10px 16px;font-weight:700;text-decoration:none">${escapeHtml(linkLabel)}</a></p>` : ''}
+<p style="margin:0;font-size:13px;color:#6b5d50">${escapeHtml(footer)}</p>
 </div></body></html>`
   return { subject, text, html }
 }
-
-function escapeHtml(text) {
-  return String(text).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
-}

package/src/email-code.js

@@ -1,53 +1,67 @@
-import { codeMessage } from './email/message.js'
+import { defaultMessage } from './email/message.js'
 import { hmac, safeEqual } from './util.js'
 
-const CODE_MINUTES = 10
+export const CODE_MINUTES = 10
 const MAX_TRIES = 5
 const RESEND_SECONDS = 60
 
 /**
- * Sign in with a 6-digit code sent by email.
+ * 6-digit codes sent by email: for signing in, and for confirming a new address.
  *
- *   code:<email>  { hash, expiresAt, tries, sentAt }  (lives 10 minutes)
+ *   code:<email>              { hash, expiresAt, tries, sentAt, ... }  (lives 10 minutes)
+ *   code-change:<userId>      the same, for a new email address
  *
  * Only an HMAC of the code is stored. Each code allows 5 tries, and a new code can be
  * asked for once a minute per address.
  *
- * @param {{ store: import('./index.js').Store, secret: string, sender: import('./index.js').EmailSender, appName: string }} options
+ * @param {{ store: import('./index.js').Store, secret: string, sender: import('./index.js').EmailSender, appName: string, message?: import('./index.js').SlauthConfig['emails'] }} options
  */
-export function createEmailCodes({ store, secret, sender, appName }) {
+export function createEmailCodes({ store, secret, sender, appName, message }) {
   const hashOf = (email, code) => hmac(secret, `code:${email}:${code}`)
 
   return {
-    /** @returns {Promise<{ ok: true } | { ok: false, code: 'slow-down', retryAfter: number }>} */
-    async start(email) {
-      const existing = await store.get(`code:${email}`)
+    /**
+     * @param {string} email
+     * @param {{ key?: string, kind?: 'sign-in' | 'email-change', link?: string, data?: object }} [options]
+     * @returns {Promise<{ ok: true } | { ok: false, code: 'slow-down', retryAfter: number }>}
+     */
+    async start(email, { key = `code:${email}`, kind = 'sign-in', link, data = {} } = {}) {
+      const existing = await store.get(key)
       const wait = existing ? Math.ceil((existing.sentAt + RESEND_SECONDS * 1000 - Date.now()) / 1000) : 0
       if (wait > 0) return { ok: false, code: 'slow-down', retryAfter: wait }
 
       const code = randomCode()
       const now = Date.now()
-      await store.put(`code:${email}`, { hash: await hashOf(email, code), expiresAt: now + CODE_MINUTES * 60_000, tries: 0, sentAt: now }, { ttl: CODE_MINUTES * 60 })
-      await sender.send({ to: email, code, appName, ...codeMessage({ code, appName, minutes: CODE_MINUTES }) })
+      await store.put(key, { ...data, email, hash: await hashOf(email, code), expiresAt: now + CODE_MINUTES * 60_000, tries: 0, sentAt: now }, { ttl: CODE_MINUTES * 60 })
+      await send({ kind, to: email, code, link, minutes: CODE_MINUTES })
       return { ok: true }
     },
 
-    /** @returns {Promise<{ ok: true } | { ok: false, code: 'expired' | 'too-many-tries' | 'bad-code', triesLeft?: number }>} */
-    async verify(email, code) {
-      const entry = await store.get(`code:${email}`)
-      if (!entry || entry.expiresAt <= Date.now()) return { ok: false, code: 'expired' }
+    /** @returns {Promise<{ ok: true, entry: object } | { ok: false, code: 'expired' | 'too-many-tries' | 'bad-code', triesLeft?: number }>} */
+    async verify(email, code, { key = `code:${email}` } = {}) {
+      const entry = await store.get(key)
+      if (!entry || entry.expiresAt <= Date.now() || (entry.email && entry.email !== email)) return { ok: false, code: 'expired' }
       if (entry.tries >= MAX_TRIES) return { ok: false, code: 'too-many-tries' }
 
       const guess = String(code ?? '').replace(/\D/g, '')
       if (guess.length === 6 && safeEqual(await hashOf(email, guess), entry.hash)) {
-        await store.delete(`code:${email}`)
-        return { ok: true }
+        await store.delete(key)
+        return { ok: true, entry }
       }
       const tries = entry.tries + 1
       const ttl = Math.max(1, Math.ceil((entry.expiresAt - Date.now()) / 1000))
-      await store.put(`code:${email}`, { ...entry, tries }, { ttl })
+      await store.put(key, { ...entry, tries }, { ttl })
       return tries >= MAX_TRIES ? { ok: false, code: 'too-many-tries' } : { ok: false, code: 'bad-code', triesLeft: MAX_TRIES - tries }
     },
+
+    send,
+  }
+
+  /** Builds an email (yours, if you passed `emails`) and hands it to the sender. */
+  async function send({ kind, to, code, link, ...details }) {
+    const data = { code, link, appName, ...details }
+    const built = (message && (await message(kind, data))) || defaultMessage(kind, data)
+    await sender.send({ to, code, link, appName, kind, ...built })
   }
 }