slauthjs 1.0.0 → 2.0.0

package/src/session.js

@@ -3,47 +3,129 @@ import { base64Url, randomToken, readCookie, serializeCookie, sha256 } from './u
 const DAY = 24 * 60 * 60
 
 /**
- * Sessions: a random token in an HttpOnly cookie. Only a SHA-256 of the token is
- * stored, so a leaked database can't be used to sign in. Sessions slide: each day
- * someone uses the app, the 30 days start again.
+ * Sessions: a random token in an HttpOnly cookie (or, for apps that can't keep cookies,
+ * sent as `Authorization: Bearer <token>`). Only a SHA-256 of the token is stored, so a
+ * leaked database can't be used to sign in. Sessions slide: each day someone uses the
+ * app, the 30 days start again.
+ *
+ *   session:<id>      { userId, createdAt, refreshedAt, method, userAgent, ip, impersonatorId }
+ *   sessions:<userId> -> [id, ...]   (so people can see and end their other sessions)
+ *
+ * The id is the hash, which is safe to show: it can't be turned back into the token.
  *
  * @param {{ store: import('./index.js').Store, cookie: string, days: number }} options
  */
 export function createSessions({ store, cookie, days }) {
   const ttl = days * DAY
-  const keyFor = async (token) => `session:${base64Url(await sha256(token))}`
+  const idFor = async (token) => base64Url(await sha256(token))
   const secure = (request) => new URL(request.url).protocol === 'https:'
 
+  function tokenFrom(request) {
+    const auth = request.headers.get('authorization')
+    const bearer = auth?.startsWith('Bearer ') ? auth.slice(7).trim() : null
+    // A JWT (two dots) is for auth.verifyToken, not a session.
+    const token = bearer && bearer.split('.').length !== 3 ? bearer : readCookie(request.headers.get('cookie'), cookie)
+    return token && token.length <= 128 ? token : null
+  }
+
+  async function index(userId, change) {
+    const ids = (await store.get(`sessions:${userId}`)) ?? []
+    const next = change(ids)
+    if (next.length) await store.put(`sessions:${userId}`, next)
+    else await store.delete(`sessions:${userId}`)
+  }
+
+  async function revoke(userId, id) {
+    await store.delete(`session:${id}`)
+    await index(userId, (ids) => ids.filter((x) => x !== id))
+  }
+
   return {
-    /** Starts a session; returns the Set-Cookie value. */
-    async create(userId, request) {
+    cookieName: cookie,
+
+    /**
+     * Starts a session. Returns the token and the Set-Cookie value that carries it.
+     * @param {string} userId
+     * @param {Request} request
+     * @param {{ method?: string, impersonatorId?: string }} [details]
+     */
+    async create(userId, request, { method = 'unknown', impersonatorId = null } = {}) {
       const token = randomToken()
+      const id = await idFor(token)
       const now = Date.now()
-      await store.put(await keyFor(token), { userId, createdAt: now, refreshedAt: now }, { ttl })
-      return serializeCookie(cookie, token, { maxAge: ttl, secure: secure(request) })
+      const userAgent = (request.headers.get('user-agent') ?? '').slice(0, 300) || null
+      const ip = request.headers.get('cf-connecting-ip') ?? request.headers.get('x-real-ip') ?? null
+      await store.put(`session:${id}`, { userId, createdAt: now, refreshedAt: now, method, userAgent, ip, impersonatorId }, { ttl })
+      // At most 50 at once: the oldest is signed out to make room.
+      const ids = (await store.get(`sessions:${userId}`)) ?? []
+      for (const old of ids.slice(0, Math.max(0, ids.length - 49))) await store.delete(`session:${old}`)
+      await store.put(`sessions:${userId}`, [...ids.slice(-49), id])
+      return { id, token, cookie: serializeCookie(cookie, token, { maxAge: ttl, secure: secure(request) }) }
     },
 
     /** The session behind this request, or null. */
     async read(request) {
-      const token = readCookie(request.headers.get('cookie'), cookie)
-      if (!token || token.length > 128) return null
-      const session = await store.get(await keyFor(token))
-      return session ? { ...session, token } : null
+      const token = tokenFrom(request)
+      if (!token) return null
+      const id = await idFor(token)
+      const session = await store.get(`session:${id}`)
+      if (!session) return null
+      // A session from slauth 1.x: add it to the index, so revoking and banning reach it.
+      if (!('method' in session)) {
+        const left = Math.ceil((session.refreshedAt + ttl * 1000 - Date.now()) / 1000)
+        if (left <= 0) return null
+        Object.assign(session, { method: null, userAgent: null, ip: null, impersonatorId: null })
+        await store.put(`session:${id}`, session, { ttl: left })
+        const ids = (await store.get(`sessions:${session.userId}`)) ?? []
+        if (!ids.includes(id)) await store.put(`sessions:${session.userId}`, [...ids.slice(-49), id])
+      }
+      return { ...session, id, token }
     },
 
     /** Restarts the 30 days at most once a day; returns a Set-Cookie value when it did. */
     async refresh(session, request) {
       if (Date.now() - session.refreshedAt < DAY * 1000) return null
-      const { token, ...value } = session
-      await store.put(await keyFor(token), { ...value, refreshedAt: Date.now() }, { ttl })
+      const { token, id, ...value } = session
+      await store.put(`session:${id}`, { ...value, refreshedAt: Date.now() }, { ttl })
       return serializeCookie(cookie, token, { maxAge: ttl, secure: secure(request) })
     },
 
     /** Ends this request's session; returns the Set-Cookie value that clears it. */
     async destroy(request) {
-      const token = readCookie(request.headers.get('cookie'), cookie)
-      if (token && token.length <= 128) await store.delete(await keyFor(token))
+      const session = await this.read(request)
+      if (session) await revoke(session.userId, session.id)
+      return this.clear(request)
+    },
+
+    clear(request) {
       return serializeCookie(cookie, '', { maxAge: 0, secure: secure(request) })
     },
+
+    /** Someone's live sessions, newest first. */
+    async list(userId) {
+      const ids = (await store.get(`sessions:${userId}`)) ?? []
+      const out = []
+      for (const id of ids) {
+        const s = await store.get(`session:${id}`)
+        if (s && s.userId === userId) out.push({ id, createdAt: s.createdAt, lastActiveAt: s.refreshedAt, method: s.method ?? null, userAgent: s.userAgent ?? null, ip: s.ip ?? null, impersonatorId: s.impersonatorId ?? null })
+      }
+      if (out.length !== ids.length) await index(userId, () => out.map((s) => s.id))
+      return out.sort((a, b) => b.createdAt - a.createdAt)
+    },
+
+    /** Ends one of someone's sessions. Returns false when there was no such session. */
+    async revoke(userId, id) {
+      const s = typeof id === 'string' ? await store.get(`session:${id}`) : null
+      if (!s || s.userId !== userId) return false
+      await revoke(userId, id)
+      return true
+    },
+
+    /** Ends all of someone's sessions, except `keepId` if given. */
+    async revokeAll(userId, keepId = null) {
+      const ids = (await store.get(`sessions:${userId}`)) ?? []
+      for (const id of ids) if (id !== keepId) await store.delete(`session:${id}`)
+      await index(userId, () => (keepId && ids.includes(keepId) ? [keepId] : []))
+    },
   }
 }

package/src/stores/d1.js

@@ -40,5 +40,19 @@ export function d1(db, { table = 'slauth_kv' } = {}) {
       await init()
       await db.prepare(`DELETE FROM ${table} WHERE key = ?`).bind(key).run()
     },
+    async list(prefix, { limit = 100, cursor } = {}) {
+      await init()
+      const { results } = await db
+        .prepare(`SELECT key, value FROM ${table} WHERE key >= ? AND key < ? AND key > ? AND (expires_at IS NULL OR expires_at > ?) ORDER BY key LIMIT ?`)
+        .bind(prefix, prefix + '\uffff', cursor ?? '', Date.now(), limit + 1)
+        .all()
+      return page(results, limit)
+    },
   }
 }
+
+/** Shared by the SQL stores: rows (one more than asked for) → a page and its cursor. */
+export function page(rows, limit) {
+  const items = rows.slice(0, limit).map((row) => ({ key: row.key, value: JSON.parse(row.value) }))
+  return { items, cursor: rows.length > limit ? items.at(-1).key : null }
+}

package/src/stores/index.d.ts

@@ -1,5 +1,5 @@
 import type { Store } from '../index.js'
 export function memory(): Store
 export function d1(db: { prepare(sql: string): any }, options?: { table?: string }): Store
-export function kv(namespace: { get(key: string, type: 'json'): Promise<any>; put(key: string, value: string, options?: { expirationTtl?: number }): Promise<void>; delete(key: string): Promise<void> }, options?: { prefix?: string }): Store
-export function sqlite(db: { prepare(sql: string): { get(...args: unknown[]): any; run(...args: unknown[]): unknown } }, options?: { table?: string }): Store
+export function kv(namespace: { get(key: string, type: 'json'): Promise<any>; put(key: string, value: string, options?: { expirationTtl?: number }): Promise<void>; delete(key: string): Promise<void>; list?(options: { prefix: string; limit?: number; cursor?: string }): Promise<{ keys: { name: string }[]; list_complete: boolean; cursor?: string }> }, options?: { prefix?: string }): Store
+export function sqlite(db: { prepare(sql: string): { get(...args: unknown[]): any; run(...args: unknown[]): unknown; all?(...args: unknown[]): any[] } }, options?: { table?: string }): Store

package/src/stores/kv.js

@@ -14,5 +14,14 @@ export function kv(namespace, { prefix = 'slauth:' } = {}) {
     put: (key, value, { ttl } = {}) =>
       namespace.put(prefix + key, JSON.stringify(value), ttl ? { expirationTtl: Math.max(60, Math.ceil(ttl)) } : undefined),
     delete: (key) => namespace.delete(prefix + key),
+    async list(keyPrefix, { limit = 100, cursor } = {}) {
+      const page = await namespace.list({ prefix: prefix + keyPrefix, limit, cursor: cursor ?? undefined })
+      const items = []
+      for (const { name } of page.keys) {
+        const value = await namespace.get(name, 'json')
+        if (value !== null) items.push({ key: name.slice(prefix.length), value })
+      }
+      return { items, cursor: page.list_complete ? null : page.cursor }
+    },
   }
 }

package/src/stores/memory.js

@@ -26,5 +26,10 @@ export function memory() {
     async delete(key) {
       rows.delete(key)
     },
+    async list(prefix, { limit = 100, cursor } = {}) {
+      const keys = [...rows.keys()].filter((k) => k.startsWith(prefix) && (!cursor || k > cursor) && live(k)).sort()
+      const page = keys.slice(0, limit)
+      return { items: page.map((key) => ({ key, value: structuredClone(rows.get(key).value) })), cursor: keys.length > limit ? page.at(-1) : null }
+    },
   }
 }

package/src/stores/sqlite.js

@@ -1,8 +1,10 @@
+import { page } from './d1.js'
+
 /**
  * Any synchronous SQLite handle with `prepare(sql).get(...)` / `.run(...)`: bun:sqlite,
  * better-sqlite3 and node:sqlite all fit. Creates its own table on first use.
  *
- * @param {{ prepare(sql: string): { get(...args: unknown[]): any, run(...args: unknown[]): unknown } }} db
+ * @param {{ prepare(sql: string): { get(...args: unknown[]): any, run(...args: unknown[]): unknown, all(...args: unknown[]): any[] } }} db
  * @param {{ table?: string }} [options]
  * @returns {import('../index.js').Store}
  */
@@ -14,6 +16,7 @@ export function sqlite(db, { table = 'slauth_kv' } = {}) {
     `INSERT INTO ${table} (key, value, expires_at) VALUES (?, ?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value, expires_at = excluded.expires_at`,
   )
   const remove = db.prepare(`DELETE FROM ${table} WHERE key = ?`)
+  let scan = null
 
   return {
     async get(key) {
@@ -31,5 +34,9 @@ export function sqlite(db, { table = 'slauth_kv' } = {}) {
     async delete(key) {
       remove.run(key)
     },
+    async list(prefix, { limit = 100, cursor } = {}) {
+      scan ??= db.prepare(`SELECT key, value FROM ${table} WHERE key >= ? AND key < ? AND key > ? AND (expires_at IS NULL OR expires_at > ?) ORDER BY key LIMIT ?`)
+      return page(scan.all(prefix, prefix + '\uffff', cursor ?? '', Date.now(), limit + 1), limit)
+    },
   }
 }

package/src/tokens.js

@@ -0,0 +1,119 @@
+import { base64Url, fromBase64Url, randomId } from './util.js'
+
+const enc = new TextEncoder()
+const ES256 = { name: 'ECDSA', namedCurve: 'P-256' }
+
+/**
+ * Short-lived JWTs (ES256) for calling your other services, which can check them with
+ * the public keys at /auth/jwks.json and no shared secret, like Clerk's getToken().
+ *
+ *   jwk:current  -> kid
+ *   jwk:<kid>    { kid, publicJwk, privateJwk (AES-GCM encrypted with a key from `secret`), createdAt }
+ *
+ * The signing key is made on first use. Changing `secret` makes a new one; tokens only
+ * live a few minutes, so nothing much notices.
+ *
+ * @param {{ store: import('./index.js').Store, secret: string, minutes?: number, issuer?: string, audience?: string, claims?: (user: object) => object | Promise<object> }} options
+ */
+export function createTokens({ store, secret, minutes = 5, issuer, audience, claims }) {
+  let wrapKey = null
+  const wrapping = () =>
+    (wrapKey ??= crypto.subtle
+      .importKey('raw', enc.encode(secret), 'HKDF', false, ['deriveKey'])
+      .then((base) => crypto.subtle.deriveKey({ name: 'HKDF', hash: 'SHA-256', salt: enc.encode('slauth-jwk'), info: enc.encode('wrap') }, base, { name: 'AES-GCM', length: 256 }, false, ['encrypt', 'decrypt'])))
+
+  let signing = null
+
+  async function currentKey() {
+    // Re-check now and then, so every server ends up signing with the same key.
+    if (signing && Date.now() - signing.checkedAt < 60_000) return signing
+    const kid = await store.get('jwk:current')
+    if (signing && signing.kid === kid) return Object.assign(signing, { checkedAt: Date.now() })
+    const doc = kid ? await store.get(`jwk:${kid}`) : null
+    if (doc) {
+      try {
+        const iv = fromBase64Url(doc.privateJwk.iv)
+        const plain = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, await wrapping(), fromBase64Url(doc.privateJwk.data))
+        const key = await crypto.subtle.importKey('jwk', JSON.parse(new TextDecoder().decode(plain)), ES256, false, ['sign'])
+        return (signing = { kid, key, checkedAt: Date.now() })
+      } catch {
+        // Made with another secret: start over below.
+      }
+    }
+    const pair = await crypto.subtle.generateKey(ES256, true, ['sign', 'verify'])
+    const newKid = randomId('key', 9)
+    const publicJwk = { ...(await crypto.subtle.exportKey('jwk', pair.publicKey)), kid: newKid, alg: 'ES256', use: 'sig' }
+    delete publicJwk.key_ops
+    delete publicJwk.ext
+    const iv = crypto.getRandomValues(new Uint8Array(12))
+    const data = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, await wrapping(), enc.encode(JSON.stringify(await crypto.subtle.exportKey('jwk', pair.privateKey))))
+    await store.put(`jwk:${newKid}`, { kid: newKid, publicJwk, privateJwk: { iv: base64Url(iv), data: base64Url(data) }, createdAt: Date.now() })
+    const previous = kid ? [kid, ...((await store.get('jwk:previous')) ?? [])].slice(0, 2) : []
+    await store.put('jwk:previous', previous)
+    await store.put('jwk:current', newKid)
+    return (signing = { kid: newKid, key: pair.privateKey, checkedAt: Date.now() })
+  }
+
+  async function publicKey(kid) {
+    const doc = typeof kid === 'string' ? await store.get(`jwk:${kid}`) : null
+    return doc ? crypto.subtle.importKey('jwk', doc.publicJwk, ES256, false, ['verify']) : null
+  }
+
+  return {
+    /** A signed token for this user: { token, expiresAt }. */
+    async create(user, extra = {}) {
+      const { kid, key } = await currentKey()
+      const now = Math.floor(Date.now() / 1000)
+      const payload = {
+        ...(claims ? await claims(user) : {}),
+        ...extra,
+        sub: user.id,
+        email: user.email,
+        name: user.name ?? null,
+        roles: user.roles ?? [],
+        iat: now,
+        exp: now + minutes * 60,
+        ...(issuer ? { iss: issuer } : {}),
+        ...(audience ? { aud: audience } : {}),
+      }
+      const head = base64Url(enc.encode(JSON.stringify({ alg: 'ES256', typ: 'JWT', kid })))
+      const body = base64Url(enc.encode(JSON.stringify(payload)))
+      const signature = await crypto.subtle.sign({ name: 'ECDSA', hash: 'SHA-256' }, key, enc.encode(`${head}.${body}`))
+      return { token: `${head}.${body}.${base64Url(signature)}`, expiresAt: payload.exp * 1000 }
+    },
+
+    /** The claims of a token we signed that hasn't expired, or null. */
+    async verify(token) {
+      try {
+        const [head, body, signature] = String(token).split('.')
+        if (!signature) return null
+        const header = JSON.parse(new TextDecoder().decode(fromBase64Url(head)))
+        if (header.alg !== 'ES256') return null
+        const key = await publicKey(header.kid)
+        if (!key) return null
+        const ok = await crypto.subtle.verify({ name: 'ECDSA', hash: 'SHA-256' }, key, fromBase64Url(signature), enc.encode(`${head}.${body}`))
+        if (!ok) return null
+        const payload = JSON.parse(new TextDecoder().decode(fromBase64Url(body)))
+        const now = Math.floor(Date.now() / 1000)
+        if (typeof payload.exp !== 'number' || payload.exp < now - 30) return null
+        if (issuer && payload.iss !== issuer) return null
+        if (audience && payload.aud !== audience) return null
+        return payload
+      } catch {
+        return null
+      }
+    },
+
+    /** The public keys, as served at /auth/jwks.json. */
+    async jwks() {
+      await currentKey()
+      const kids = [await store.get('jwk:current'), ...((await store.get('jwk:previous')) ?? [])]
+      const keys = []
+      for (const kid of kids) {
+        const doc = kid ? await store.get(`jwk:${kid}`) : null
+        if (doc) keys.push(doc.publicJwk)
+      }
+      return { keys }
+    },
+  }
+}

package/src/two-factor.js

@@ -0,0 +1,142 @@
+import { base64Url, sha256, safeEqual } from './util.js'
+
+const STEP = 30
+const RECOVERY_CODES = 10
+
+/**
+ * Two-factor sign-in with an authenticator app (TOTP, RFC 6238: 6 digits, 30 seconds,
+ * SHA-1, which is what every app supports), plus one-time recovery codes.
+ *
+ *   totp:<userId>   { secret, enabledAt, lastStep, recovery: [sha256 of each code] }
+ *
+ * A code is accepted for the 30 seconds before and after its own, and only once.
+ *
+ * @param {{ store: import('./index.js').Store, issuer: string }} options
+ */
+export function createTwoFactor({ store, issuer }) {
+  const key = (userId) => `totp:${userId}`
+
+  return {
+    async enabled(userId) {
+      return Boolean((await store.get(key(userId)))?.enabledAt)
+    },
+
+    /** Starts setting up: a new secret and the otpauth:// link to show as a QR code. */
+    async setup(user) {
+      const secret = base32(crypto.getRandomValues(new Uint8Array(20)))
+      await store.put(key(user.id), { secret, enabledAt: null, lastStep: 0, recovery: [] })
+      const label = encodeURIComponent(`${issuer}:${user.email}`)
+      return { secret, uri: `otpauth://totp/${label}?secret=${secret}&issuer=${encodeURIComponent(issuer)}&algorithm=SHA1&digits=6&period=${STEP}` }
+    },
+
+    /** Finishes setting up once the app shows a right code. Returns the recovery codes, or null. */
+    async enable(userId, code) {
+      const doc = await store.get(key(userId))
+      if (!doc || doc.enabledAt) return null
+      const step = await matchStep(doc.secret, code, doc.lastStep)
+      if (step === null) return null
+      const recovery = newRecoveryCodes()
+      await store.put(key(userId), { ...doc, enabledAt: Date.now(), lastStep: step, recovery: await Promise.all(recovery.map(hashCode)) })
+      return recovery
+    },
+
+    /** Checks an app code or a recovery code (each recovery code works once). */
+    async check(userId, { code, recoveryCode } = {}) {
+      const doc = await store.get(key(userId))
+      if (!doc?.enabledAt) return false
+      if (recoveryCode) {
+        const hash = await hashCode(recoveryCode)
+        if (!doc.recovery.some((h) => safeEqual(h, hash))) return false
+        await store.put(key(userId), { ...doc, recovery: doc.recovery.filter((h) => h !== hash) })
+        return true
+      }
+      const step = await matchStep(doc.secret, code, doc.lastStep)
+      if (step === null) return false
+      await store.put(key(userId), { ...doc, lastStep: step })
+      return true
+    },
+
+    async recoveryLeft(userId) {
+      return (await store.get(key(userId)))?.recovery.length ?? 0
+    },
+
+    async regenerate(userId) {
+      const doc = await store.get(key(userId))
+      const recovery = newRecoveryCodes()
+      await store.put(key(userId), { ...doc, recovery: await Promise.all(recovery.map(hashCode)) })
+      return recovery
+    },
+
+    async disable(userId) {
+      await store.delete(key(userId))
+    },
+  }
+}
+
+/** The time step a 6-digit code belongs to (now ± 1), or null. Steps at or before `after` are spent. */
+async function matchStep(secret, code, after = 0) {
+  const guess = String(code ?? '').replace(/\D/g, '')
+  if (guess.length !== 6) return null
+  const now = Math.floor(Date.now() / 1000 / STEP)
+  for (const step of [now - 1, now, now + 1]) {
+    if (step > after && safeEqual(await totp(secret, step), guess)) return step
+  }
+  return null
+}
+
+/** The code for a base32 secret at a time step (exported for tests and your own tools). */
+export async function totp(secret, step = Math.floor(Date.now() / 1000 / STEP)) {
+  const counter = new Uint8Array(8)
+  new DataView(counter.buffer).setBigUint64(0, BigInt(step))
+  const key = await crypto.subtle.importKey('raw', fromBase32(secret), { name: 'HMAC', hash: 'SHA-1' }, false, ['sign'])
+  const mac = new Uint8Array(await crypto.subtle.sign('HMAC', key, counter))
+  const at = mac[19] & 0xf
+  const value = ((mac[at] & 0x7f) << 24) | (mac[at + 1] << 16) | (mac[at + 2] << 8) | mac[at + 3]
+  return String(value % 1_000_000).padStart(6, '0')
+}
+
+function newRecoveryCodes() {
+  const alphabet = 'abcdefghjkmnpqrstuvwxyz23456789'
+  return Array.from({ length: RECOVERY_CODES }, () => {
+    const bytes = crypto.getRandomValues(new Uint8Array(10))
+    const chars = [...bytes].map((b) => alphabet[b % alphabet.length]).join('')
+    return `${chars.slice(0, 5)}-${chars.slice(5)}`
+  })
+}
+
+async function hashCode(code) {
+  return base64Url(await sha256(String(code).trim().toLowerCase().replace(/[^a-z0-9]/g, '')))
+}
+
+const BASE32 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567'
+
+function base32(bytes) {
+  let bits = 0
+  let value = 0
+  let out = ''
+  for (const byte of bytes) {
+    value = (value << 8) | byte
+    bits += 8
+    while (bits >= 5) {
+      out += BASE32[(value >>> (bits - 5)) & 31]
+      bits -= 5
+    }
+  }
+  if (bits > 0) out += BASE32[(value << (5 - bits)) & 31]
+  return out
+}
+
+function fromBase32(text) {
+  let bits = 0
+  let value = 0
+  const out = []
+  for (const char of text.replace(/=+$/, '').toUpperCase()) {
+    value = (value << 5) | BASE32.indexOf(char)
+    bits += 5
+    if (bits >= 8) {
+      out.push((value >>> (bits - 8)) & 255)
+      bits -= 8
+    }
+  }
+  return new Uint8Array(out)
+}

package/src/ui.js

@@ -0,0 +1,49 @@
+/** Shared by <slauth-sign-in> and <slauth-account>. */
+
+export 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; }
+h3 { margin: 18px 0 8px; font-size: 15px; }
+p { margin: 0 0 14px; font-size: 14px; opacity: .8; }
+label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 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, button:focus-visible, a:focus-visible { outline: 3px solid var(--slauth-accent, #f59e0b); outline-offset: 1px; }
+button, a.button { box-sizing: border-box; display: block; text-align: center; text-decoration: none; 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-accent-ink, var(--slauth-ink, #2b2118)); border: 2px solid var(--slauth-ink, #2b2118); }
+.primary:active { transform: translate(1px, 1px); }
+.ghost, a.button { background: transparent; color: inherit; border: 2px solid currentColor; }
+.ghost.dashed { border-style: dashed; opacity: .85; }
+.providers { margin-top: 14px; }
+.providers a.button { margin-top: 8px; }
+.providers a.button:first-child { margin-top: 0; }
+.or { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: 12px; opacity: .6; }
+.or::before, .or::after { content: ''; flex: 1; border-top: 2px dashed currentColor; }
+.link { background: none; border: 0; padding: 4px; width: auto; display: inline; margin: 0; font-weight: 600; text-decoration: underline; opacity: .75; color: inherit; }
+button:disabled { opacity: .5; cursor: default; }
+.error { color: var(--slauth-error, #c2410c); font-size: 13px; font-weight: 600; min-height: 18px; margin: 8px 0 0; opacity: 1; }
+.row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
+.codes { font-family: ui-monospace, monospace; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 14px; margin: 0 0 12px; }
+.list { list-style: none; padding: 0; margin: 0 0 8px; }
+.list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 2px dashed color-mix(in srgb, currentColor 18%, transparent); font-size: 14px; }
+.list li span { overflow: hidden; text-overflow: ellipsis; }
+.muted { opacity: .65; font-size: 12px; }
+`
+
+/** What a slauth error code means to a person. */
+export const MESSAGES = {
+  'oauth-cancelled': 'Sign-in was cancelled.',
+  'oauth-failed': "Couldn't sign in with that account. Please try again.",
+  'oauth-state': 'That sign-in took too long. Please try again.',
+  'email-not-verified': "That account's email isn't verified, so it can't be used to sign in. Use an email code instead.",
+  'not-allowed': "That email isn't on the list for this app.",
+  'account-in-use': "That account is already linked to someone else's sign-in.",
+  banned: "This account can't sign in.",
+  'signed-out': 'Please sign in first.',
+  'reauth-required': 'Please sign in again to do that.',
+}
+
+export function escape(text) {
+  return String(text).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+}