slauthjs 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,72 @@
+# Changelog
+
+## 2.0.0
+
+slauth keeps its five-minute start and now goes as deep as a project needs. Everything
+new is opt-in and still dependency-free.
+
+### New
+
+- **Sign in with providers** (`providers`): `github()`, `google()`, `discord()`, `gitlab()`,
+  `microsoft()`, any OpenID Connect issuer with `oidc()`, or your own with `oauth2()`, from
+  `slauthjs/providers`. PKCE, browser-bound state, account linking and unlinking, and
+  sign-in by email only when the provider says it's verified.
+- **Magic links** (`magicLinks`): a one-tap link in the code email, behind a click so mail
+  scanners don't use it up.
+- **Passwords** (`passwords`): PBKDF2-SHA256, email-verified sign-up, per-email lockout.
+- **Two-factor** (`twoFactor`): TOTP with one-time recovery codes.
+- **Tokens** (`tokens`): ES256 JWTs at `GET /auth/token`, public keys at `/auth/jwks.json`,
+  `auth.createToken` / `auth.verifyToken`; `auth.user()` accepts them as bearer tokens.
+- **Organizations** (`organizations`): owners, admins and custom roles, email invitations,
+  `auth.orgs.require()`.
+- **Users**: `name`, `image`, `roles`, `metadata` (public) and `privateMetadata`;
+  `requireUser(request, { role })`; email change with a code; self-service deletion.
+- **Admin API**: `auth.users.get/byEmail/list/create/update/delete/ban/unban`,
+  `auth.sessions.list/revoke/revokeAll/create` (with `impersonatorId`), `auth.accounts.list`,
+  `auth.session(request)`.
+- **Sessions**: list your devices, sign one or all others out. Bearer session tokens for
+  apps without cookies (`X-Slauth-Transport: bearer`, `createClient({ token })`).
+- **Events** (`on`): `signUp`, `signIn`, `signOut`, `userUpdated`, `userDeleted`.
+- **Custom emails** (`emails`), and senders now get `kind` and `link`.
+- **Per-IP rate limits** (`rateLimit`) on code, password and two-factor routes.
+- `allow(email, context)` now gets the sign-in method, provider and profile.
+- `GET /auth/config` tells sign-in screens what's turned on.
+- `<slauth-sign-in>` offers providers, passwords, sign-up (`mode="sign-up"`) and the
+  two-factor step, and shows provider errors.
+- `<slauth-account>` (`slauthjs/account`): profile, email, passkeys, password, providers,
+  two-factor, devices, invitations, sign out and delete.
+- `Store.list()` (optional) on every built-in store, for `auth.users.list()`.
+- `baseUrl`, `signInPage`, `freshMinutes`, `allowDeletion` options.
+
+### Changed
+
+- **Adding a passkey now needs a recent sign-in** (15 minutes by default, `freshMinutes`),
+  like setting a password, changing email, turning on two-factor, linking a provider and
+  deleting the account. The sign-in box's passkey offer comes straight after sign-in, so
+  it's unaffected; a settings-page "Add passkey" button may now get `reauth-required`.
+  Set `freshMinutes: false` for the 1.x behaviour.
+- Users carry more fields. Users stored by 1.x are read with defaults; nothing to migrate.
+- `<slauth-sign-in>` without a bundler needs `ui.js` next to `element.js` and `client.js`.
+
+### Upgrading from 1.x
+
+No data migration: users and sessions saved by 1.x keep working (old sessions join the
+new per-user index the first time they're used). Check these:
+
+1. **A settings-page "Add passkey" button** may now answer `reauth-required` for people
+   who signed in over 15 minutes ago. Ask them to sign in again, or set `freshMinutes`.
+2. **Serving the element without a bundler?** Copy `ui.js` next to `element.js` and
+   `client.js`, or the element won't load.
+3. **Per-IP rate limits are on** where the host sets `CF-Connecting-IP`, `Fly-Client-IP`
+   or `X-Real-IP`: 10 code requests per IP per 10 minutes. Many people behind one office
+   IP could hit it; raise it with `rateLimit.limits` or set `rateLimit: false`.
+4. **A few more store writes**: each sign-in also updates the person's session list, and
+   rate limiting keeps counters. Fine for D1 and SQLite; on Workers KV's free tier
+   (1,000 writes a day), consider `rateLimit: false`.
+5. `auth.user()` returns more fields (`name`, `image`, `roles`, `metadata`). Code that
+   compared the whole object, or stored it, sees the new keys.
+
+## 1.0.0
+
+Email codes, passkeys, sessions, stores (D1, SQLite, KV, memory), Resend and Cloudflare
+Email senders, the client, `<slauth-sign-in>`, Cloudflare Access support and the PIN app lock.

package/README.md

@@ -1,9 +1,11 @@
 # slauth 🦥
 
-**Auth for side projects.** Email codes and passkeys in five minutes, in your own database,
-on whatever you deploy to. Zero dependencies, about 29 kB.
+**Open-source auth you own.** Email codes and passkeys in five minutes, in your own database,
+on whatever you deploy to. Then, when the side project grows up: "Sign in with GitHub",
+passwords, two-factor, organizations, an admin API and JWTs, one config key at a time.
+Zero dependencies.
 
-Sturdier than a password in an env var, and a lot less fuss than a hosted auth company.
+Like Auth.js meets a free Clerk, with the simplicity turned all the way up.
 
 ```js
 import { slauth } from 'slauthjs'
@@ -17,7 +19,7 @@ const auth = slauth({
 })
 
 if (url.pathname.startsWith('/auth/')) return auth.handle(request)
-const user = await auth.user(request) // { id, email, createdAt } or null
+const user = await auth.user(request) // { id, email, name, image, roles, metadata, createdAt } or null
 ```
 
 ```html
@@ -25,13 +27,45 @@ const user = await auth.user(request) // { id, email, createdAt } or null
 <slauth-sign-in app-name="My App" redirect="/"></slauth-sign-in>
 ```
 
+## Out of the box
+
 - **Email codes**: 6 digits, 10 minutes, 5 tries, stored as an HMAC.
 - **Passkeys**: WebAuthn (ES256 + RS256) checked with Web Crypto, no libraries.
 - **Your database**: D1, SQLite (bun:sqlite, node:sqlite, better-sqlite3), Workers KV, memory, or any `get`/`put`/`delete`.
 - **Runs anywhere** with `Request`/`Response`: Cloudflare Workers, Bun, Deno, Node, Next.js, Astro, Hono.
-- **Extras**: an allow list (`['me@example.com', '@family.com']`), an optional PIN app lock, and Cloudflare Access support.
+- **Sessions** that people can see and revoke, per-IP rate limits, CSRF protection.
+
+## When you need more
+
+Every one of these is off until you turn it on:
+
+```js
+import { github, google, oidc } from 'slauthjs/providers'
+
+slauth({
+  ...,
+  providers: [github({ clientId, clientSecret }), google({ clientId, clientSecret }), oidc({ id: 'okta', name: 'Okta', issuer, clientId })],
+  magicLinks: true,     // a one-tap link in the code email
+  passwords: true,      // optional, and only after proving the email
+  twoFactor: true,      // authenticator apps + recovery codes
+  organizations: true,  // teams, roles, email invitations
+  tokens: true,         // ES256 JWTs + /auth/jwks.json for your other services
+  on: { signUp: ({ user }) => createProfile(user.id) },
+})
+```
+
+| | |
+|---|---|
+| **Providers** | GitHub, Google, Discord, GitLab, Microsoft, any OpenID Connect issuer, or a custom `oauth2()`. PKCE, account linking, verified emails only. |
+| **Passwords** | PBKDF2 via Web Crypto. "Forgot password" is just an email code. |
+| **Two-factor** | TOTP (RFC 6238) with one-time recovery codes. Passkeys skip it. |
+| **Users** | Names, pictures, roles, public and private metadata, email change, self-service deletion. `requireUser(request, { role: 'admin' })`. |
+| **Admin API** | `auth.users.list/create/update/delete/ban`, `auth.sessions.revokeAll`, impersonation. |
+| **Organizations** | Owners, admins and your own roles; invitations by email; `auth.orgs.require(request, orgId)`. |
+| **Apps without cookies** | Bearer session tokens for mobile apps and CLIs. |
+| **UI** | `<slauth-sign-in>` offers whatever's on; `<slauth-account>` is a whole account page in one tag. |
 
-📖 **Docs: [slauth.dev/docs](https://slauth.dev/docs/)**: [quickstart](https://slauth.dev/docs/quickstart/), [frameworks](https://slauth.dev/docs/frameworks/cloudflare-workers/), [security](https://slauth.dev/docs/concepts/security/).
+📖 **Docs: [slauth.dev/docs](https://slauth.dev/docs/)**: [quickstart](https://slauth.dev/docs/quickstart/), [providers](https://slauth.dev/docs/sign-in/providers/), [frameworks](https://slauth.dev/docs/frameworks/cloudflare-workers/), [security](https://slauth.dev/docs/concepts/security/). What changed: [CHANGELOG.md](CHANGELOG.md).
 
 ## Examples
 
@@ -41,7 +75,7 @@ const user = await auth.user(request) // { id, email, createdAt } or null
 
 ## Not for
 
-Enterprise SSO/SAML, orgs and roles, or dozens of OAuth providers. For those, see
+SAML, SCIM, per-organization SSO, or a hosted dashboard you didn't build. For those, see
 [the comparison](https://slauth.dev/compare).
 
 ## Repository
@@ -51,6 +85,9 @@ Enterprise SSO/SAML, orgs and roles, or dozens of OAuth providers. For those, se
 | `src/` | the library (plain ESM + `.d.ts`) |
 | `test/` | test helpers, a simulated passkey authenticator, type checks, a browser test |
 | `examples/` | runnable apps |
-| `site/` | slauth.dev: Astro marketing pages + Starlight docs |
 
-See [CONTRIBUTING.md](CONTRIBUTING.md). MIT licensed.
+The site and docs (slauth.dev) live in a separate repository. Spotted a docs mistake?
+[Open an issue](https://github.com/silicondaydream/slauth/issues) here.
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) and [CODE_POLICY.md](CODE_POLICY.md). Security
+reports: [SECURITY.md](SECURITY.md). MIT licensed.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slauthjs",
-  "version": "1.0.0",
-  "description": "Auth for side projects: email codes and passkeys, your own database, zero dependencies. Runs on Workers, Bun, Deno and Node.",
+  "version": "2.0.0",
+  "description": "Open-source auth you own: email codes, passkeys, \"Sign in with GitHub/Google\", passwords, two-factor, sessions, organizations and JWTs. Your database, zero dependencies. Runs on Workers, Bun, Deno and Node.",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.js",
@@ -15,10 +15,18 @@
       "types": "./src/client.d.ts",
       "default": "./src/client.js"
     },
+    "./providers": {
+      "types": "./src/providers.d.ts",
+      "default": "./src/providers.js"
+    },
     "./element": {
       "types": "./src/element.d.ts",
       "default": "./src/element.js"
     },
+    "./account": {
+      "types": "./src/account-element.d.ts",
+      "default": "./src/account-element.js"
+    },
     "./node": {
       "types": "./src/node.d.ts",
       "default": "./src/node.js"
@@ -54,10 +62,12 @@
   },
   "files": [
     "src",
+    "CHANGELOG.md",
     "!src/**/*.test.js"
   ],
   "sideEffects": [
-    "./src/element.js"
+    "./src/element.js",
+    "./src/account-element.js"
   ],
   "engines": {
     "node": ">=20"
@@ -65,7 +75,8 @@
   "scripts": {
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.json",
-    "prepublishOnly": "vitest run && tsc -p tsconfig.json"
+    "prepublishOnly": "vitest run && tsc -p tsconfig.json",
+    "smoke": "node test/smoke.mjs"
   },
   "devDependencies": {
     "@types/node": "^22.20.5",
@@ -75,18 +86,31 @@
   "keywords": [
     "auth",
     "authentication",
+    "oauth",
+    "oidc",
+    "sign-in-with-github",
     "passkeys",
     "webauthn",
-    "magic-code",
+    "two-factor",
+    "totp",
+    "magic-link",
+    "sessions",
+    "organizations",
+    "jwt",
+    "nextauth-alternative",
+    "clerk-alternative",
     "cloudflare-workers",
     "d1",
     "bun",
-    "deno",
-    "side-project"
+    "deno"
   ],
   "homepage": "https://slauth.dev",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/silicondaydream/slauth.git"
+  },
+  "packageManager": "pnpm@10.28.0",
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/account-element.d.ts

@@ -0,0 +1,8 @@
+/** Importing this registers <slauth-account>. */
+export {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'slauth-account': HTMLElement
+  }
+}

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

@@ -1,26 +1,100 @@
-import type { Policy, SlauthUser } from './index.js'
+import type { OrgRole, Policy, SlauthUser } from './index.js'
 
 export class SlauthError extends Error {
-  /** e.g. "bad-code", "expired", "not-allowed", "slow-down", "signed-out", "offline". */
+  /** 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; lock?: { policy: Policy; required: boolean; pinSet: boolean; unlocked: boolean } }>
+  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): Promise<{ ok: true }>
-    verify(email: string, code: string): Promise<{ user: SlauthUser }>
+    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<{ user: SlauthUser }>
+    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 }>
@@ -31,4 +105,9 @@ export interface SlauthClient {
   }
 }
 
-export function createClient(options?: { basePath?: string; fetch?: typeof fetch }): SlauthClient
+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