From dbd60860e0da317f95c7537f4e909f5513de4772 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sat, 2 May 2026 01:38:00 +0100
Subject: [PATCH 01/16] feat: SCRAM-SHA-256, TOTP 2FA + biometric (WebAuthn)
 login

Adds three new SASL paths plus an enrolment UI for second-factor
credentials, all behind a single feature branch.

* `src/lib/sasl/scram.ts` - SCRAM-SHA-256 (RFC 7677) using Web Crypto
  for PBKDF2/HMAC/SHA-256.  Picked automatically when the server
  advertises it; falls back to PLAIN.
* `src/lib/sasl/webauthn.ts` - thin `navigator.credentials` wrapper for
  the DRAFT-WEBAUTHN-BIO mechanism and `2FA ADD webauthn` enrolment.
* `src/store/handlers/auth.ts` - per-server SASL session state machine
  that dispatches AUTHENTICATE messages by mechanism and routes
  `AUTHENTICATE 2FA-REQUIRED` to the step-up modal.
* `2FA` IRC command + `TWOFA` / `TWOFA_NOTE` events for status, listing,
  enrolment, removal, enable/disable replies from the server.
* `TotpStepUpModal` - prompts for the 6-digit code mid-SASL.
* `TwoFactorSettingsModal` - status, credential list, TOTP enrol with
  QR (qrcode dep), WebAuthn biometric enrol via `navigator.credentials.
  create`, removal, and password-free disable via TOTP proof.
* Wired into `EditServerModal` (button visible when the server
  advertises `draft/account-2fa`).
---
 package-lock.json                            | 281 ++++++++++-
 package.json                                 |   2 +
 src/App.tsx                                  |  12 +
 src/components/ui/EditServerModal.tsx        |  63 ++-
 src/components/ui/TotpStepUpModal.tsx        |  84 ++++
 src/components/ui/TwoFactorSettingsModal.tsx | 371 ++++++++++++++
 src/lib/irc/IRCClient.ts                     |  13 +
 src/lib/irc/handlers/auth.ts                 |  33 ++
 src/lib/irc/handlers/index.ts                |   3 +
 src/lib/sasl/scram.ts                        | 191 ++++++++
 src/lib/sasl/webauthn.ts                     | 147 ++++++
 src/store/handlers/auth.ts                   | 490 +++++++++++++------
 src/store/index.ts                           |  86 ++++
 src/types/index.ts                           |   3 +
 tests/fixtures/uiState.ts                    |   2 +
 15 files changed, 1600 insertions(+), 181 deletions(-)
 create mode 100644 src/components/ui/TotpStepUpModal.tsx
 create mode 100644 src/components/ui/TwoFactorSettingsModal.tsx
 create mode 100644 src/lib/sasl/scram.ts
 create mode 100644 src/lib/sasl/webauthn.ts

diff --git a/package-lock.json b/package-lock.json
index 18319fd7..d7fa8785 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@tauri-apps/plugin-notification": "^2.2.2",
         "@tauri-apps/plugin-opener": "^2.0.0",
         "@tauri-apps/plugin-os": "^2.2.1",
+        "@types/qrcode": "^1.5.6",
         "@types/uuid": "^10.0.0",
         "buffer": "^6.0.3",
         "clsx": "^2.1.1",
@@ -29,6 +30,7 @@
         "html-react-parser": "^5.2.7",
         "immer": "^11.1.4",
         "marked": "^16.4.0",
+        "qrcode": "^1.5.4",
         "react": "^19.2.5",
         "react-color": "^2.19.3",
         "react-dom": "^19.2.5",
@@ -2842,12 +2844,20 @@
       "version": "22.19.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.1.tgz",
       "integrity": "sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -3728,6 +3738,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -3857,6 +3876,63 @@
         "node": ">= 6"
       }
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/cloudflare-video-element": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/cloudflare-video-element/-/cloudflare-video-element-1.3.5.tgz",
@@ -4074,6 +4150,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
@@ -4114,6 +4199,12 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "license": "Apache-2.0"
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -4827,6 +4918,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/gh-pages": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.3.0.tgz",
@@ -6424,6 +6524,15 @@
         "ce-la-react": "^0.3.2"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.9",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
@@ -6751,6 +6860,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6986,6 +7112,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -7147,6 +7288,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-cookie-parser": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
@@ -7879,7 +8026,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/universalify": {
@@ -8270,6 +8416,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
@@ -8425,6 +8577,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -8432,6 +8590,125 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 95b0eabe..6defab93 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@tauri-apps/plugin-notification": "^2.2.2",
     "@tauri-apps/plugin-opener": "^2.0.0",
     "@tauri-apps/plugin-os": "^2.2.1",
+    "@types/qrcode": "^1.5.6",
     "@types/uuid": "^10.0.0",
     "buffer": "^6.0.3",
     "clsx": "^2.1.1",
@@ -52,6 +53,7 @@
     "html-react-parser": "^5.2.7",
     "immer": "^11.1.4",
     "marked": "^16.4.0",
+    "qrcode": "^1.5.4",
     "react": "^19.2.5",
     "react-color": "^2.19.3",
     "react-dom": "^19.2.5",
diff --git a/src/App.tsx b/src/App.tsx
index a33a508a..2610c090 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,6 +15,8 @@ import { EditServerModal } from "./components/ui/EditServerModal";
 import LinkSecurityWarningModal from "./components/ui/LinkSecurityWarningModal";
 import LoadingOverlay from "./components/ui/LoadingOverlay";
 import QuickActions from "./components/ui/QuickActions";
+import { TotpStepUpModal } from "./components/ui/TotpStepUpModal";
+import { TwoFactorSettingsModal } from "./components/ui/TwoFactorSettingsModal";
 import UserProfileModal from "./components/ui/UserProfileModal";
 import UserSettings from "./components/ui/UserSettings";
 import { useChannelTabSwitching } from "./hooks/useChannelTabSwitching";
@@ -80,6 +82,7 @@ const App: React.FC = () => {
     toggleAddServerModal,
     toggleEditServerModal,
     toggleQuickActions,
+    toggleTwoFactorSettings,
     ui: {
       isAddServerModalOpen,
       isChannelListModalOpen,
@@ -88,7 +91,9 @@ const App: React.FC = () => {
       isSettingsModalOpen,
       isQuickActionsOpen,
       isUserProfileModalOpen,
+      isTwoFactorSettingsOpen,
       editServerId,
+      twoFactorSettingsServerId,
       linkSecurityWarnings,
       profileViewRequest,
       prefillServerDetails,
@@ -306,6 +311,13 @@ const App: React.FC = () => {
                   onClose={() => toggleEditServerModal(false)}
                 />
               )}
+              {isTwoFactorSettingsOpen && twoFactorSettingsServerId && (
+                <TwoFactorSettingsModal
+                  serverId={twoFactorSettingsServerId}
+                  onClose={() => toggleTwoFactorSettings(false)}
+                />
+              )}
+              <TotpStepUpModal />
               {isSettingsModalOpen && <UserSettings />}
               {isQuickActionsOpen && <QuickActions />}
               {isChannelListModalOpen && <ChannelListModal />}
diff --git a/src/components/ui/EditServerModal.tsx b/src/components/ui/EditServerModal.tsx
index e824a786..1f8a0c16 100644
--- a/src/components/ui/EditServerModal.tsx
+++ b/src/components/ui/EditServerModal.tsx
@@ -247,29 +247,48 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
           )}
 
           {showAccount && (
-            <div className="mb-4 flex gap-4">
-              <div className="mb-4">
-                <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                  Account details
-                </label>
-                <TextInput
-                  value={saslAccountName || nickname}
-                  onChange={(e) => setSaslAccountName(e.target.value)}
-                  placeholder="SASL Account Name"
-                  className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-                />
-              </div>
-              <div className="mb-4">
-                <label className="block text-discord-text-muted text-sm font-medium mb-1 mt-6" />
-                <TextInput
-                  type="password"
-                  value={saslPassword ? atob(saslPassword) : ""}
-                  onChange={(e) => setSaslPassword(btoa(e.target.value))}
-                  placeholder="Password"
-                  className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-                />
+            <>
+              <div className="mb-4 flex gap-4">
+                <div className="mb-4">
+                  <label className="block text-discord-text-muted text-sm font-medium mb-1">
+                    Account details
+                  </label>
+                  <TextInput
+                    value={saslAccountName || nickname}
+                    onChange={(e) => setSaslAccountName(e.target.value)}
+                    placeholder="SASL Account Name"
+                    className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+                  />
+                </div>
+                <div className="mb-4">
+                  <label className="block text-discord-text-muted text-sm font-medium mb-1 mt-6" />
+                  <TextInput
+                    type="password"
+                    value={saslPassword ? atob(saslPassword) : ""}
+                    onChange={(e) => setSaslPassword(btoa(e.target.value))}
+                    placeholder="Password"
+                    className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+                  />
+                </div>
               </div>
-            </div>
+              {server?.capabilities?.some((c) =>
+                c.startsWith("draft/account-2fa"),
+              ) && (
+                <div className="mb-4">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      useStore
+                        .getState()
+                        .toggleTwoFactorSettings(true, serverId);
+                    }}
+                    className="px-3 py-2 rounded bg-discord-dark-400 text-discord-text-normal hover:bg-discord-dark-300 text-sm"
+                  >
+                    Manage two-factor authentication
+                  </button>
+                </div>
+              )}
+            </>
           )}
 
           {/* IRC Operator Section */}
diff --git a/src/components/ui/TotpStepUpModal.tsx b/src/components/ui/TotpStepUpModal.tsx
new file mode 100644
index 00000000..da0acb0f
--- /dev/null
+++ b/src/components/ui/TotpStepUpModal.tsx
@@ -0,0 +1,84 @@
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import useStore from "../../store";
+
+export const TotpStepUpModal: React.FC = () => {
+  const pending = useStore((s) => s.pendingTotpStepUp);
+  const submitTotpStepUp = useStore((s) => s.submitTotpStepUp);
+  const cancelTotpStepUp = useStore((s) => s.cancelTotpStepUp);
+
+  const [code, setCode] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (pending) {
+      setCode("");
+      setError(null);
+      // Autofocus once the modal mounts.
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [pending]);
+
+  if (!pending) return null;
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = code.trim();
+    if (!/^\d{6}$/.test(trimmed)) {
+      setError("Enter the 6-digit code from your authenticator app.");
+      return;
+    }
+    submitTotpStepUp(pending.serverId, trimmed);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+      <div className="bg-discord-dark-200 rounded-lg w-full max-w-sm p-5">
+        <h2 className="text-lg font-semibold mb-2 text-white">
+          Two-factor authentication required
+        </h2>
+        <p className="text-sm text-discord-text-muted mb-4">
+          Enter the 6-digit code from your authenticator app to finish signing
+          in
+          {pending.account ? ` as ${pending.account}` : ""}.
+        </p>
+        <form onSubmit={onSubmit}>
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            maxLength={6}
+            pattern="\d{6}"
+            value={code}
+            onChange={(e) => {
+              setCode(e.target.value.replace(/\D/g, ""));
+              setError(null);
+            }}
+            className="w-full px-3 py-2 rounded bg-discord-dark-300 text-white tracking-[0.4em] text-center text-xl font-mono focus:outline-none focus:ring-2 focus:ring-discord-blue"
+            placeholder="000000"
+          />
+          {error && <p className="text-discord-red text-xs mt-2">{error}</p>}
+          <div className="flex justify-end gap-2 mt-4">
+            <button
+              type="button"
+              onClick={() => cancelTotpStepUp(pending.serverId)}
+              className="px-3 py-2 rounded text-sm text-discord-text-muted hover:text-white"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 rounded bg-discord-blue text-white text-sm font-medium hover:bg-discord-blue-hover"
+            >
+              Verify
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default TotpStepUpModal;
diff --git a/src/components/ui/TwoFactorSettingsModal.tsx b/src/components/ui/TwoFactorSettingsModal.tsx
new file mode 100644
index 00000000..1cd65e01
--- /dev/null
+++ b/src/components/ui/TwoFactorSettingsModal.tsx
@@ -0,0 +1,371 @@
+import QRCode from "qrcode";
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import {
+  b64StdDecode,
+  bytesToB64Std,
+  isWebAuthnAvailable,
+  webauthnRegister,
+} from "../../lib/sasl/webauthn";
+import useStore from "../../store";
+
+const TYPE_LABELS: Record<string, string> = {
+  totp: "Authenticator app (TOTP)",
+  webauthn: "Biometric / security key",
+};
+
+function decodeChallenge(blob: string): unknown {
+  try {
+    return JSON.parse(new TextDecoder().decode(b64StdDecode(blob)));
+  } catch {
+    return null;
+  }
+}
+
+interface Props {
+  serverId: string;
+  onClose: () => void;
+}
+
+export const TwoFactorSettingsModal: React.FC<Props> = ({
+  serverId,
+  onClose,
+}) => {
+  const status = useStore((s) => s.twofaStatus[serverId] ?? "unknown") as
+    | "enabled"
+    | "disabled"
+    | "unknown";
+  const credentials = useStore((s) => s.twofaCredentials[serverId] ?? []);
+  const challenge = useStore((s) => s.pendingTwofaChallenge);
+  const server = useStore((s) => s.servers.find((srv) => srv.id === serverId));
+
+  const twofaStatusQuery = useStore((s) => s.twofaStatusQuery);
+  const twofaListQuery = useStore((s) => s.twofaListQuery);
+  const twofaChallenge = useStore((s) => s.twofaChallenge);
+  const twofaAdd = useStore((s) => s.twofaAdd);
+  const twofaRemove = useStore((s) => s.twofaRemove);
+  const twofaEnable = useStore((s) => s.twofaEnable);
+  const twofaDisable = useStore((s) => s.twofaDisable);
+
+  const supportsWebAuthn =
+    server?.capabilities?.some(
+      (c) => c.startsWith("draft/account-2fa") && c.includes("webauthn"),
+    ) ?? false;
+
+  const [enrollName, setEnrollName] = useState("");
+  const [enrollCode, setEnrollCode] = useState("");
+  const [enrollError, setEnrollError] = useState<string | null>(null);
+  const [enrollBusy, setEnrollBusy] = useState(false);
+  const [disableCode, setDisableCode] = useState("");
+  const [qrSvg, setQrSvg] = useState<string | null>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: store actions have unstable refs
+  useEffect(() => {
+    twofaStatusQuery(serverId);
+    twofaListQuery(serverId);
+  }, [serverId]);
+
+  // Render QR for the active TOTP enrolment challenge.
+  useEffect(() => {
+    if (
+      !challenge ||
+      challenge.serverId !== serverId ||
+      challenge.type !== "totp"
+    ) {
+      setQrSvg(null);
+      return;
+    }
+    const decoded = decodeChallenge(challenge.blob);
+    const uri =
+      decoded &&
+      typeof decoded === "object" &&
+      decoded !== null &&
+      "uri" in decoded &&
+      typeof (decoded as { uri: unknown }).uri === "string"
+        ? (decoded as { uri: string }).uri
+        : null;
+    if (!uri) {
+      setQrSvg(null);
+      return;
+    }
+    QRCode.toString(uri, { type: "svg", margin: 2, width: 220 })
+      .then(setQrSvg)
+      .catch(() => setQrSvg(null));
+  }, [challenge, serverId]);
+
+  const onAddTotp = () => {
+    setEnrollError(null);
+    setEnrollName("");
+    setEnrollCode("");
+    twofaChallenge(serverId, "totp");
+  };
+
+  const onAddWebAuthn = async () => {
+    if (!isWebAuthnAvailable()) {
+      setEnrollError("WebAuthn is not available in this environment.");
+      return;
+    }
+    setEnrollError(null);
+    twofaChallenge(serverId, "webauthn");
+  };
+
+  // When a webauthn challenge arrives, run the create() ceremony immediately.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: store actions have unstable refs
+  useEffect(() => {
+    if (
+      !challenge ||
+      challenge.serverId !== serverId ||
+      challenge.type !== "webauthn" ||
+      enrollBusy
+    )
+      return;
+    const decoded = decodeChallenge(challenge.blob);
+    if (!decoded || typeof decoded !== "object") {
+      setEnrollError("Server returned an invalid WebAuthn challenge.");
+      return;
+    }
+    const name = enrollName.trim() || `Device-${Date.now()}`;
+    setEnrollBusy(true);
+    webauthnRegister(decoded as Parameters<typeof webauthnRegister>[0])
+      .then((result) => {
+        const payload = bytesToB64Std(
+          new TextEncoder().encode(JSON.stringify(result)),
+        );
+        twofaAdd(serverId, "webauthn", name, payload);
+        setEnrollBusy(false);
+      })
+      .catch((err) => {
+        setEnrollError(err instanceof Error ? err.message : String(err));
+        setEnrollBusy(false);
+      });
+  }, [challenge?.blob, challenge?.type, challenge?.serverId, serverId]);
+
+  const onSubmitTotp = (e: React.FormEvent) => {
+    e.preventDefault();
+    setEnrollError(null);
+    const name = enrollName.trim();
+    if (!name || /\s/.test(name)) {
+      setEnrollError("Pick a single-word name (no spaces).");
+      return;
+    }
+    if (!/^\d{6}$/.test(enrollCode.trim())) {
+      setEnrollError("Enter the 6-digit code from your authenticator app.");
+      return;
+    }
+    twofaAdd(serverId, "totp", name, enrollCode.trim());
+    setEnrollName("");
+    setEnrollCode("");
+  };
+
+  const onDisable = () => {
+    setEnrollError(null);
+    if (!/^\d{6}$/.test(disableCode.trim())) {
+      setEnrollError(
+        "Enter a 6-digit code from any of your authenticator apps to disable 2FA.",
+      );
+      return;
+    }
+    twofaDisable(serverId, "totp", disableCode.trim());
+    setDisableCode("");
+  };
+
+  const inflightTotp = useMemo(
+    () =>
+      challenge?.serverId === serverId && challenge?.type === "totp" && !!qrSvg,
+    [challenge, qrSvg, serverId],
+  );
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+      <div className="bg-discord-dark-200 rounded-lg w-full max-w-lg p-5 max-h-[90vh] overflow-y-auto">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold text-white">
+            Two-factor authentication
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-discord-text-muted hover:text-white"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="mb-4 p-3 rounded bg-discord-dark-300">
+          <div className="text-sm text-white">
+            Status:{" "}
+            <span
+              className={
+                status === "enabled"
+                  ? "text-discord-green"
+                  : "text-discord-text-muted"
+              }
+            >
+              {status === "enabled"
+                ? "Enabled"
+                : status === "disabled"
+                  ? "Disabled"
+                  : "Loading…"}
+            </span>
+          </div>
+        </div>
+
+        <h3 className="text-sm font-semibold text-white mb-2">
+          Registered credentials
+        </h3>
+        {credentials.length === 0 ? (
+          <p className="text-sm text-discord-text-muted mb-4">
+            You have no 2FA credentials registered.
+          </p>
+        ) : (
+          <ul className="mb-4 space-y-2">
+            {credentials.map((c) => (
+              <li
+                key={c.id}
+                className="flex justify-between items-center p-2 rounded bg-discord-dark-300"
+              >
+                <div className="text-sm">
+                  <div className="text-white font-medium">{c.name}</div>
+                  <div className="text-xs text-discord-text-muted">
+                    {TYPE_LABELS[c.type] ?? c.type}
+                    {c.createdAt ? ` · added ${c.createdAt}` : ""}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => twofaRemove(serverId, c.id)}
+                  className="text-xs text-discord-red hover:text-white"
+                >
+                  Remove
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="grid grid-cols-2 gap-2 mb-4">
+          <button
+            type="button"
+            onClick={onAddTotp}
+            className="px-3 py-2 rounded bg-discord-blue text-white text-sm font-medium hover:bg-discord-blue-hover"
+          >
+            Add authenticator app
+          </button>
+          <button
+            type="button"
+            onClick={onAddWebAuthn}
+            disabled={!supportsWebAuthn || !isWebAuthnAvailable()}
+            className="px-3 py-2 rounded bg-discord-dark-100 text-white text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+            title={
+              !supportsWebAuthn
+                ? "Server does not advertise WebAuthn support"
+                : !isWebAuthnAvailable()
+                  ? "Browser does not expose WebAuthn"
+                  : ""
+            }
+          >
+            Add biometric / security key
+          </button>
+        </div>
+
+        {inflightTotp && qrSvg && (
+          <form
+            onSubmit={onSubmitTotp}
+            className="mb-4 p-3 rounded bg-discord-dark-300"
+          >
+            <p className="text-sm text-white mb-2">
+              Scan this QR code with your authenticator app, then confirm with
+              the 6-digit code it shows.
+            </p>
+            <div
+              className="bg-white p-2 rounded inline-block mb-2"
+              // biome-ignore lint/security/noDangerouslySetInnerHtml: QR SVG is generated by qrcode lib from a known otpauth URI
+              dangerouslySetInnerHTML={{ __html: qrSvg }}
+            />
+            <div className="flex flex-col gap-2 mt-2">
+              <input
+                type="text"
+                placeholder="Name (e.g. iPhone)"
+                value={enrollName}
+                onChange={(e) => setEnrollName(e.target.value)}
+                className="w-full px-3 py-2 rounded bg-discord-dark-200 text-white"
+              />
+              <input
+                type="text"
+                inputMode="numeric"
+                maxLength={6}
+                pattern="\d{6}"
+                placeholder="6-digit code"
+                value={enrollCode}
+                onChange={(e) =>
+                  setEnrollCode(e.target.value.replace(/\D/g, ""))
+                }
+                className="w-full px-3 py-2 rounded bg-discord-dark-200 text-white tracking-[0.4em] text-center font-mono"
+              />
+              <button
+                type="submit"
+                className="px-4 py-2 rounded bg-discord-green text-white text-sm font-medium"
+              >
+                Confirm enrolment
+              </button>
+            </div>
+          </form>
+        )}
+
+        {enrollError && (
+          <p className="text-discord-red text-xs mb-3">{enrollError}</p>
+        )}
+        {enrollBusy && (
+          <p className="text-discord-text-muted text-xs mb-3">
+            Waiting for biometric prompt…
+          </p>
+        )}
+
+        <hr className="border-discord-dark-100 my-3" />
+
+        {status === "enabled" ? (
+          <div className="p-3 rounded bg-discord-dark-300">
+            <p className="text-sm text-white mb-2">
+              Disable 2FA. Enter a 6-digit code from any of your registered
+              authenticator apps to confirm.
+            </p>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                inputMode="numeric"
+                maxLength={6}
+                pattern="\d{6}"
+                placeholder="000000"
+                value={disableCode}
+                onChange={(e) =>
+                  setDisableCode(e.target.value.replace(/\D/g, ""))
+                }
+                className="flex-1 px-3 py-2 rounded bg-discord-dark-200 text-white tracking-[0.4em] text-center font-mono"
+              />
+              <button
+                type="button"
+                onClick={onDisable}
+                className="px-3 py-2 rounded bg-discord-red text-white text-sm font-medium"
+              >
+                Disable
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => twofaEnable(serverId)}
+            disabled={credentials.length === 0}
+            className="w-full px-3 py-2 rounded bg-discord-green text-white text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {credentials.length === 0
+              ? "Add a credential to enable 2FA"
+              : "Enable 2FA"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TwoFactorSettingsModal;
diff --git a/src/lib/irc/IRCClient.ts b/src/lib/irc/IRCClient.ts
index 5b1d500e..aa6a0173 100644
--- a/src/lib/irc/IRCClient.ts
+++ b/src/lib/irc/IRCClient.ts
@@ -245,6 +245,15 @@ export interface EventMap {
     serviceName: string;
     jwtToken: string;
   };
+  TWOFA: EventWithTags & {
+    subcommand: string;
+    status: string;
+    args: string[];
+  };
+  TWOFA_NOTE: EventWithTags & {
+    code: string;
+    args: string[];
+  };
   WHOIS_BOT: {
     serverId: string;
     nick: string;
@@ -1356,6 +1365,10 @@ export class IRCClient implements IRCClientContext {
     return this.capNegotiationComplete.get(serverId) ?? false;
   }
 
+  getSaslMechanisms(serverId: string): string[] {
+    return this.saslMechanisms.get(serverId) ?? [];
+  }
+
   getNick(serverId: string): string | undefined {
     return this.nicks.get(serverId);
   }
diff --git a/src/lib/irc/handlers/auth.ts b/src/lib/irc/handlers/auth.ts
index 2d493236..4fa9e892 100644
--- a/src/lib/irc/handlers/auth.ts
+++ b/src/lib/irc/handlers/auth.ts
@@ -72,6 +72,14 @@ export function handleNote(
     target,
     message,
   });
+  if (cmd === "2FA") {
+    ctx.triggerEvent("TWOFA_NOTE", {
+      serverId,
+      mtags,
+      code,
+      args: parv.slice(2),
+    });
+  }
 }
 
 export function handleSuccess(
@@ -135,6 +143,31 @@ export function handleVerify(
   // original code only handles VERIFY SUCCESS with local variables, fires no event
 }
 
+// `:server 2FA <subcommand> [SUCCESS] [arg ...] :description`
+// Examples:
+//   :server 2FA ADD SUCCESS totp cred-1 :Credential 'Phone' registered.
+//   :server 2FA REMOVE SUCCESS cred-1 :...
+//   :server 2FA ENABLE SUCCESS :...
+//   :server 2FA DISABLE SUCCESS :...
+export function handleTwoFA(
+  ctx: IRCClientContext,
+  serverId: string,
+  _source: string,
+  parv: string[],
+  mtags: Record<string, string> | undefined,
+): void {
+  const subcommand = parv[0];
+  const status = parv[1];
+  const args = parv.slice(2);
+  ctx.triggerEvent("TWOFA", {
+    serverId,
+    mtags,
+    subcommand,
+    status,
+    args,
+  });
+}
+
 export function handleExtjwt(
   ctx: IRCClientContext,
   serverId: string,
diff --git a/src/lib/irc/handlers/index.ts b/src/lib/irc/handlers/index.ts
index 15aaf834..48e69c1f 100644
--- a/src/lib/irc/handlers/index.ts
+++ b/src/lib/irc/handlers/index.ts
@@ -6,6 +6,7 @@ import {
   handleNote,
   handleRegister,
   handleSuccess,
+  handleTwoFA,
   handleVerify,
   handleWarn,
 } from "./auth";
@@ -286,6 +287,8 @@ export const IRC_DISPATCH: Record<string, HandlerFn> = {
     handleRegister(ctx, serverId, source, parv, mtags),
   VERIFY: (ctx, serverId, source, parv, mtags) =>
     handleVerify(ctx, serverId, source, parv, mtags),
+  "2FA": (ctx, serverId, source, parv, mtags) =>
+    handleTwoFA(ctx, serverId, source, parv, mtags),
   EXTJWT: (ctx, serverId, source, parv, mtags) =>
     handleExtjwt(ctx, serverId, source, parv, mtags),
 
diff --git a/src/lib/sasl/scram.ts b/src/lib/sasl/scram.ts
new file mode 100644
index 00000000..df1c036d
--- /dev/null
+++ b/src/lib/sasl/scram.ts
@@ -0,0 +1,191 @@
+// SCRAM-SHA-256 (RFC 7677) client.  Uses Web Crypto: works in browsers,
+// Tauri WebView (WebKit/WebView2), and node (vitest provides crypto.subtle).
+
+import { Buffer } from "buffer";
+
+const ENC = new TextEncoder();
+const DEC = new TextDecoder();
+
+function bytesToB64(bytes: Uint8Array): string {
+  return Buffer.from(bytes).toString("base64");
+}
+
+function b64ToBytes(b64: string): Uint8Array {
+  return new Uint8Array(Buffer.from(b64, "base64"));
+}
+
+function strToBytes(s: string): Uint8Array {
+  return ENC.encode(s);
+}
+
+function xorBytes(a: Uint8Array, b: Uint8Array): Uint8Array {
+  const out = new Uint8Array(a.length);
+  for (let i = 0; i < a.length; i++) out[i] = a[i] ^ b[i];
+  return out;
+}
+
+// SCRAM allows '=' and ',' inside usernames only when escaped as =3D / =2C.
+function escapeUsername(u: string): string {
+  return u.replace(/=/g, "=3D").replace(/,/g, "=2C");
+}
+
+// Random nonce: alnum-only to keep it printable & comma-free.
+function randomNonce(bytes = 18): string {
+  const buf = new Uint8Array(bytes);
+  crypto.getRandomValues(buf);
+  const alpha =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let s = "";
+  for (const b of buf) s += alpha[b % alpha.length];
+  return s;
+}
+
+async function hmacSha256(
+  key: Uint8Array,
+  data: Uint8Array,
+): Promise<Uint8Array> {
+  const k = await crypto.subtle.importKey(
+    "raw",
+    key,
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"],
+  );
+  const sig = await crypto.subtle.sign("HMAC", k, data);
+  return new Uint8Array(sig);
+}
+
+async function sha256(data: Uint8Array): Promise<Uint8Array> {
+  const out = await crypto.subtle.digest("SHA-256", data);
+  return new Uint8Array(out);
+}
+
+async function pbkdf2Sha256(
+  password: string,
+  salt: Uint8Array,
+  iterations: number,
+): Promise<Uint8Array> {
+  const k = await crypto.subtle.importKey(
+    "raw",
+    strToBytes(password),
+    "PBKDF2",
+    false,
+    ["deriveBits"],
+  );
+  const bits = await crypto.subtle.deriveBits(
+    { name: "PBKDF2", salt, iterations, hash: "SHA-256" },
+    k,
+    256,
+  );
+  return new Uint8Array(bits);
+}
+
+export interface ScramState {
+  username: string;
+  password: string;
+  clientNonce: string;
+  clientFirstBare: string;
+  serverFirst?: string;
+  combinedNonce?: string;
+  serverSignature?: Uint8Array;
+}
+
+// Build the GS2 header + client-first-message-bare and remember the bare part
+// so we can build AuthMessage in step 2.
+export function scramStart(
+  username: string,
+  password: string,
+): {
+  state: ScramState;
+  message: string;
+} {
+  const cnonce = randomNonce();
+  const bare = `n=${escapeUsername(username)},r=${cnonce}`;
+  const message = `n,,${bare}`;
+  return {
+    state: {
+      username,
+      password,
+      clientNonce: cnonce,
+      clientFirstBare: bare,
+    },
+    message,
+  };
+}
+
+function parseAttrs(s: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const pair of s.split(",")) {
+    const eq = pair.indexOf("=");
+    if (eq <= 0) continue;
+    const k = pair.slice(0, eq);
+    const v = pair.slice(eq + 1);
+    out[k] = v;
+  }
+  return out;
+}
+
+// Consume server-first, produce client-final.  Stores ServerSignature in
+// state so the caller can verify server-final later.
+export async function scramFinal(
+  state: ScramState,
+  serverFirst: string,
+): Promise<string> {
+  const attrs = parseAttrs(serverFirst);
+  const r = attrs.r;
+  const s = attrs.s;
+  const i = attrs.i;
+  if (!r || !s || !i) throw new Error("SCRAM: malformed server-first");
+  if (!r.startsWith(state.clientNonce))
+    throw new Error("SCRAM: server nonce does not extend client nonce");
+
+  const salt = b64ToBytes(s);
+  const iterations = Number.parseInt(i, 10);
+  if (!Number.isFinite(iterations) || iterations < 1)
+    throw new Error("SCRAM: bad iteration count");
+
+  state.serverFirst = serverFirst;
+  state.combinedNonce = r;
+
+  // c=biws is base64("n,,") -- the GS2 header we sent in client-first.
+  const clientFinalNoProof = `c=biws,r=${r}`;
+  const authMessage = `${state.clientFirstBare},${serverFirst},${clientFinalNoProof}`;
+  const authMessageBytes = strToBytes(authMessage);
+
+  const saltedPassword = await pbkdf2Sha256(state.password, salt, iterations);
+  const clientKey = await hmacSha256(saltedPassword, strToBytes("Client Key"));
+  const storedKey = await sha256(clientKey);
+  const clientSignature = await hmacSha256(storedKey, authMessageBytes);
+  const clientProof = xorBytes(clientKey, clientSignature);
+
+  const serverKey = await hmacSha256(saltedPassword, strToBytes("Server Key"));
+  state.serverSignature = await hmacSha256(serverKey, authMessageBytes);
+
+  return `${clientFinalNoProof},p=${bytesToB64(clientProof)}`;
+}
+
+// Verify server-final's v= against our stored ServerSignature.
+export function scramVerifyServerFinal(
+  state: ScramState,
+  serverFinal: string,
+): boolean {
+  const attrs = parseAttrs(serverFinal);
+  const v = attrs.v;
+  if (!v || !state.serverSignature) return false;
+  const got = b64ToBytes(v);
+  if (got.length !== state.serverSignature.length) return false;
+  let diff = 0;
+  for (let i = 0; i < got.length; i++)
+    diff |= got[i] ^ state.serverSignature[i];
+  return diff === 0;
+}
+
+// Encode/decode the SASL chunk wire format (Base64 standard, padded).
+export const sasl = {
+  encodeUtf8(s: string): string {
+    return Buffer.from(s, "utf8").toString("base64");
+  },
+  decodeUtf8(b64: string): string {
+    return DEC.decode(b64ToBytes(b64));
+  },
+};
diff --git a/src/lib/sasl/webauthn.ts b/src/lib/sasl/webauthn.ts
new file mode 100644
index 00000000..10745da1
--- /dev/null
+++ b/src/lib/sasl/webauthn.ts
@@ -0,0 +1,147 @@
+// WebAuthn helpers for the DRAFT-WEBAUTHN-BIO mechanism and 2FA enrolment.
+// Uses the platform `navigator.credentials` API; works in modern browsers
+// and Tauri's WebView wrappers (WebKit2GTK, WKWebView, WebView2).
+
+import { Buffer } from "buffer";
+
+// SASL transport always uses standard Base64 (padded); the byte fields
+// inside our JSON payloads use Base64url (no padding) to match what
+// browser-side WebAuthn returns.
+export function b64uEncode(buf: ArrayBuffer | Uint8Array): string {
+  const bytes = buf instanceof Uint8Array ? buf : new Uint8Array(buf);
+  return Buffer.from(bytes)
+    .toString("base64")
+    .replace(/=+$/g, "")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_");
+}
+
+export function b64uDecode(s: string): Uint8Array {
+  const padded = s.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = padded.length % 4 ? 4 - (padded.length % 4) : 0;
+  return new Uint8Array(Buffer.from(padded + "=".repeat(pad), "base64"));
+}
+
+export function bytesToB64Std(buf: ArrayBuffer | Uint8Array): string {
+  const bytes = buf instanceof Uint8Array ? buf : new Uint8Array(buf);
+  return Buffer.from(bytes).toString("base64");
+}
+
+export function b64StdDecode(s: string): Uint8Array {
+  return new Uint8Array(Buffer.from(s, "base64"));
+}
+
+// True if WebAuthn is usable in this runtime.
+export function isWebAuthnAvailable(): boolean {
+  return (
+    typeof navigator !== "undefined" &&
+    typeof navigator.credentials !== "undefined" &&
+    typeof PublicKeyCredential !== "undefined" &&
+    typeof navigator.credentials.create === "function" &&
+    typeof navigator.credentials.get === "function"
+  );
+}
+
+// Server-issued enrolment challenge (decoded JSON from
+// NOTE 2FA REGISTRATION_CHALLENGE webauthn <Base64(JSON)>).
+interface CreationOptionsBlob {
+  challenge: string; // base64url
+  rpId: string;
+  rpName?: string;
+  userId: string; // base64url, opaque per-account handle
+  userName: string;
+  userVerification: "required" | "preferred" | "discouraged";
+  pubKeyCredParams?: PublicKeyCredentialParameters[];
+}
+
+// Run the WebAuthn create() ceremony with the server-issued options and
+// return the JSON the server expects in `2FA ADD webauthn <name> <data>`.
+export async function webauthnRegister(
+  blob: CreationOptionsBlob,
+): Promise<{ clientDataJSON: string; attestationObject: string }> {
+  if (!isWebAuthnAvailable())
+    throw new Error("WebAuthn is not available in this environment");
+
+  const params: PublicKeyCredentialParameters[] =
+    blob.pubKeyCredParams && blob.pubKeyCredParams.length > 0
+      ? blob.pubKeyCredParams
+      : [{ type: "public-key", alg: -7 }];
+
+  const cred = (await navigator.credentials.create({
+    publicKey: {
+      challenge: b64uDecode(blob.challenge),
+      rp: { id: blob.rpId, name: blob.rpName ?? blob.rpId },
+      user: {
+        id: b64uDecode(blob.userId),
+        name: blob.userName,
+        displayName: blob.userName,
+      },
+      pubKeyCredParams: params,
+      authenticatorSelection: {
+        userVerification: blob.userVerification,
+        residentKey: "preferred",
+        requireResidentKey: false,
+      },
+      timeout: 60_000,
+      attestation: "none",
+    },
+  })) as PublicKeyCredential | null;
+
+  if (!cred) throw new Error("WebAuthn create() returned null");
+
+  const r = cred.response as AuthenticatorAttestationResponse;
+  return {
+    clientDataJSON: b64uEncode(r.clientDataJSON),
+    attestationObject: b64uEncode(r.attestationObject),
+  };
+}
+
+// Server-issued challenge for SASL login (decoded from the AUTHENTICATE
+// step-4 message), as PublicKeyCredentialRequestOptions-shaped JSON.
+interface RequestOptionsBlob {
+  version?: number;
+  challenge: string; // base64url
+  rpId: string;
+  timeout?: number;
+  userVerification: "required" | "preferred" | "discouraged";
+  allowCredentials?: { type: "public-key"; id: string }[];
+}
+
+// Run the WebAuthn get() ceremony and return the assertion JSON the
+// server expects on the wire.
+export async function webauthnAssert(blob: RequestOptionsBlob): Promise<{
+  credentialId: string;
+  authenticatorData: string;
+  clientDataJSON: string;
+  signature: string;
+  userHandle?: string;
+}> {
+  if (!isWebAuthnAvailable())
+    throw new Error("WebAuthn is not available in this environment");
+
+  const allow = (blob.allowCredentials ?? []).map((c) => ({
+    type: "public-key" as const,
+    id: b64uDecode(c.id),
+  }));
+
+  const cred = (await navigator.credentials.get({
+    publicKey: {
+      challenge: b64uDecode(blob.challenge),
+      rpId: blob.rpId,
+      timeout: blob.timeout ?? 60_000,
+      userVerification: blob.userVerification,
+      allowCredentials: allow.length > 0 ? allow : undefined,
+    },
+  })) as PublicKeyCredential | null;
+
+  if (!cred) throw new Error("WebAuthn get() returned null");
+
+  const r = cred.response as AuthenticatorAssertionResponse;
+  return {
+    credentialId: b64uEncode(cred.rawId),
+    authenticatorData: b64uEncode(r.authenticatorData),
+    clientDataJSON: b64uEncode(r.clientDataJSON),
+    signature: b64uEncode(r.signature),
+    userHandle: r.userHandle ? b64uEncode(r.userHandle) : undefined,
+  };
+}
diff --git a/src/store/handlers/auth.ts b/src/store/handlers/auth.ts
index d383166c..b1062885 100644
--- a/src/store/handlers/auth.ts
+++ b/src/store/handlers/auth.ts
@@ -1,11 +1,70 @@
 import { v4 as uuidv4 } from "uuid";
 import type { StoreApi } from "zustand";
 import ircClient from "../../lib/ircClient";
+import {
+  type ScramState,
+  sasl as saslChunk,
+  scramFinal,
+  scramStart,
+  scramVerifyServerFinal,
+} from "../../lib/sasl/scram";
+import {
+  b64StdDecode,
+  bytesToB64Std,
+  isWebAuthnAvailable,
+  webauthnAssert,
+} from "../../lib/sasl/webauthn";
 import type { Message } from "../../types";
 import { normalizeHost } from "../helpers";
 import type { AppState } from "../index";
 import * as storage from "../localStorage";
 
+type SaslMech = "PLAIN" | "SCRAM-SHA-256" | "DRAFT-WEBAUTHN-BIO";
+
+interface SaslSession {
+  mech: SaslMech;
+  username: string;
+  password?: string;
+  scram?: ScramState;
+  step: number;
+}
+
+const sessions = new Map<string, SaslSession>();
+
+function chooseMechanism(
+  available: string[],
+  pref: "auto" | "PLAIN" | "SCRAM-SHA-256" | "DRAFT-WEBAUTHN-BIO" | undefined,
+): SaslMech {
+  if (pref === "DRAFT-WEBAUTHN-BIO" && available.includes("DRAFT-WEBAUTHN-BIO"))
+    return "DRAFT-WEBAUTHN-BIO";
+  if (pref === "PLAIN") return "PLAIN";
+  if (pref === "SCRAM-SHA-256" && available.includes("SCRAM-SHA-256"))
+    return "SCRAM-SHA-256";
+  // auto: prefer SCRAM-SHA-256 over PLAIN.
+  if (available.includes("SCRAM-SHA-256")) return "SCRAM-SHA-256";
+  return "PLAIN";
+}
+
+function loadCreds(
+  serverId: string,
+): { user: string; pass: string; mech: SaslMech } | null {
+  const servers = storage.servers.load();
+  const serv = servers.find((s) => s.id === serverId);
+  if (!serv?.saslEnabled) return null;
+  const user = serv.saslAccountName?.length
+    ? serv.saslAccountName
+    : serv.nickname;
+  const pass = serv.saslPassword ? atob(serv.saslPassword) : undefined;
+  if (!user || !pass) return null;
+  const available = ircClient.getSaslMechanisms(serverId);
+  const mech = chooseMechanism(available, serv.saslMechanism);
+  return { user, pass, mech };
+}
+
+function clearSession(serverId: string) {
+  sessions.delete(serverId);
+}
+
 export function registerAuthHandlers(store: StoreApi<AppState>): void {
   ircClient.on("CAP_ACKNOWLEDGED", ({ serverId, key, capabilities }) => {
     if (capabilities?.startsWith("draft/metadata")) {
@@ -24,84 +83,235 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
         ];
         store.getState().metadataSub(serverId, defaultKeys);
       }
-
-      // Note: Metadata restoration/sending is now handled in the "ready" event
-      // to ensure the server is ready to receive METADATA commands
     }
-    if (key === "sasl") {
-      const servers = storage.servers.load();
-      for (const serv of servers) {
-        if (serv.id !== serverId) continue;
+    if (key !== "sasl") return;
 
-        if (!serv.saslEnabled) return;
-      }
-      ircClient.sendRaw(serverId, "AUTHENTICATE PLAIN");
-    }
+    // Pick mechanism up-front so the AUTHENTICATE event handler knows what
+    // to do when the server says "+".
+    const servers = storage.servers.load();
+    const serv = servers.find((s) => s.id === serverId);
+    if (!serv?.saslEnabled) return;
+
+    const available = ircClient.getSaslMechanisms(serverId);
+    const mech = chooseMechanism(available, serv.saslMechanism);
+    const username = serv.saslAccountName?.length
+      ? serv.saslAccountName
+      : serv.nickname;
+    const password = serv.saslPassword ? atob(serv.saslPassword) : undefined;
+
+    sessions.set(serverId, {
+      mech,
+      username,
+      password,
+      step: 0,
+    });
+    ircClient.sendRaw(serverId, `AUTHENTICATE ${mech}`);
   });
 
-  ircClient.on("AUTHENTICATE", ({ serverId, param }) => {
-    if (param !== "+") return;
-
-    // Don't respond to AUTHENTICATE if CAP negotiation is already complete
+  ircClient.on("AUTHENTICATE", async ({ serverId, param }) => {
     if (ircClient.isCapNegotiationComplete(serverId)) return;
 
-    let user: string | undefined;
-    let pass: string | undefined;
-    const servers = storage.servers.load();
-    for (const serv of servers) {
-      if (serv.id !== serverId) continue;
+    // Synthetic step-up signal from the server (draft/account-2fa).
+    if (param === "2FA-REQUIRED") {
+      const session = sessions.get(serverId);
+      const acct = session?.username ?? "";
+      store.setState({ pendingTotpStepUp: { serverId, account: acct } });
+      return;
+    }
+
+    const session = sessions.get(serverId);
+    if (!session) {
+      // Either no SASL is in flight or a fresh PLAIN exchange started before
+      // our session was set up.  Fall back to the legacy PLAIN behaviour so
+      // older test fixtures still work.
+      if (param !== "+") return;
+      const creds = loadCreds(serverId);
+      if (!creds || creds.mech !== "PLAIN") return;
+      ircClient.sendRaw(
+        serverId,
+        `AUTHENTICATE ${btoa(`${creds.user}\x00${creds.user}\x00${creds.pass}`)}`,
+      );
+      return;
+    }
+
+    try {
+      if (session.mech === "PLAIN") {
+        if (param !== "+") return;
+        if (!session.password) return;
+        ircClient.sendRaw(
+          serverId,
+          `AUTHENTICATE ${btoa(`${session.username}\x00${session.username}\x00${session.password}`)}`,
+        );
+        return;
+      }
+
+      if (session.mech === "SCRAM-SHA-256") {
+        if (session.step === 0 && param === "+") {
+          if (!session.password) return;
+          const { state, message } = scramStart(
+            session.username,
+            session.password,
+          );
+          session.scram = state;
+          session.step = 1;
+          ircClient.sendRaw(
+            serverId,
+            `AUTHENTICATE ${saslChunk.encodeUtf8(message)}`,
+          );
+          return;
+        }
+        if (session.step === 1 && session.scram) {
+          const serverFirst = saslChunk.decodeUtf8(param);
+          const clientFinal = await scramFinal(session.scram, serverFirst);
+          session.step = 2;
+          ircClient.sendRaw(
+            serverId,
+            `AUTHENTICATE ${saslChunk.encodeUtf8(clientFinal)}`,
+          );
+          return;
+        }
+        if (session.step === 2 && session.scram) {
+          const serverFinal = saslChunk.decodeUtf8(param);
+          const ok = scramVerifyServerFinal(session.scram, serverFinal);
+          if (!ok) {
+            ircClient.sendRaw(serverId, "AUTHENTICATE *");
+          } else {
+            // Acknowledge by sending an empty client message; the server
+            // will then issue 900/903 (or AUTHENTICATE 2FA-REQUIRED).
+            ircClient.sendRaw(serverId, "AUTHENTICATE +");
+          }
+          session.step = 3;
+          return;
+        }
+        return;
+      }
 
-      if (!serv.saslEnabled) return;
+      if (session.mech === "DRAFT-WEBAUTHN-BIO") {
+        if (session.step === 0 && param === "+") {
+          // Send hello identifying the account; the server will reply with
+          // a challenge JSON in the next AUTHENTICATE message.
+          const hello = JSON.stringify({ username: session.username });
+          session.step = 1;
+          ircClient.sendRaw(serverId, `AUTHENTICATE ${btoa(hello)}`);
+          return;
+        }
+        if (session.step === 1) {
+          if (!isWebAuthnAvailable()) {
+            ircClient.sendRaw(serverId, "AUTHENTICATE *");
+            return;
+          }
+          const challengeJson = JSON.parse(
+            new TextDecoder().decode(b64StdDecode(param)),
+          );
+          const assertion = await webauthnAssert(challengeJson);
+          const reply = JSON.stringify(assertion);
+          session.step = 2;
+          ircClient.sendRaw(
+            serverId,
+            `AUTHENTICATE ${bytesToB64Std(new TextEncoder().encode(reply))}`,
+          );
+          return;
+        }
+        return;
+      }
+    } catch (err) {
+      console.error("[SASL] error:", err);
+      ircClient.sendRaw(serverId, "AUTHENTICATE *");
+      clearSession(serverId);
+    }
+  });
 
-      user = serv.saslAccountName?.length
-        ? serv.saslAccountName
-        : serv.nickname;
-      pass = serv.saslPassword ? atob(serv.saslPassword) : undefined;
+  // 2FA replies: server uses NOTE 2FA <code> <args...> :<desc>.
+  // `args` here is everything after the code; the trailing description is
+  // the LAST entry (parsed by the IRC layer as a single trailing param).
+  ircClient.on("TWOFA_NOTE", ({ serverId, code, args }) => {
+    // args[0..len-2] are positional, args[len-1] is the description.
+    const positional = args.slice(0, Math.max(0, args.length - 1));
+    if (code === "ENABLED") {
+      store.setState((s) => ({
+        twofaStatus: { ...s.twofaStatus, [serverId]: "enabled" },
+      }));
+    } else if (code === "DISABLED") {
+      store.setState((s) => ({
+        twofaStatus: { ...s.twofaStatus, [serverId]: "disabled" },
+      }));
+    } else if (code === "REGISTRATION_CHALLENGE") {
+      const type = positional[0] ?? "";
+      const blob = positional[1] ?? "";
+      store.setState({
+        pendingTwofaChallenge: { serverId, type, blob },
+      });
+    } else if (code === "CREDENTIAL") {
+      const id = positional[0] ?? "";
+      const credType = positional[1] ?? "";
+      const name = positional[2] ?? "";
+      const ts = positional[3] ?? "";
+      store.setState((s) => ({
+        twofaCredentials: {
+          ...s.twofaCredentials,
+          [serverId]: [
+            ...(s.twofaCredentials[serverId] ?? []),
+            { id, type: credType, name, createdAt: ts },
+          ],
+        },
+      }));
+    } else if (code === "NO_CREDENTIALS") {
+      store.setState((s) => ({
+        twofaCredentials: { ...s.twofaCredentials, [serverId]: [] },
+      }));
     }
-    if (!user || !pass)
-      // wtf happened lol
-      return;
+  });
 
-    ircClient.sendRaw(
-      serverId,
-      `AUTHENTICATE ${btoa(`${user}\x00${user}\x00${pass}`)}`,
-    );
-    // Note: CAP END will be sent by the IRC client when SASL authentication completes (903/904-907 responses)
-    // ircClient.sendRaw(serverId, "CAP END");
-    // ircClient.userOnConnect(serverId);
+  // `2FA <subcommand> SUCCESS ...` lands in the dedicated TWOFA event.
+  ircClient.on("TWOFA", ({ serverId, subcommand, status, args }) => {
+    if (status !== "SUCCESS") return;
+    if (subcommand === "ADD") {
+      // Args: <type> <id> :<description>
+      // We don't know the name from the success line alone; the LIST query
+      // below refreshes the table.
+      store.getState().twofaListQuery(serverId);
+      store.setState({ pendingTwofaChallenge: null });
+    } else if (subcommand === "REMOVE") {
+      const id = args[0] ?? "";
+      store.setState((s) => ({
+        twofaCredentials: {
+          ...s.twofaCredentials,
+          [serverId]: (s.twofaCredentials[serverId] ?? []).filter(
+            (c) => c.id !== id,
+          ),
+        },
+      }));
+    } else if (subcommand === "ENABLE") {
+      store.setState((s) => ({
+        twofaStatus: { ...s.twofaStatus, [serverId]: "enabled" },
+      }));
+    } else if (subcommand === "DISABLE") {
+      store.setState((s) => ({
+        twofaStatus: { ...s.twofaStatus, [serverId]: "disabled" },
+      }));
+    }
   });
 
   // Handle CAP LS to get informational capabilities like unrealircd.org/link-security
   ircClient.on("CAP LS", ({ serverId, cliCaps }) => {
-    // Parse link-security from CAP LS (informational capability)
     if (cliCaps.includes("unrealircd.org/link-security=")) {
       const match = cliCaps.match(/unrealircd\.org\/link-security=(\d+)/);
       if (match) {
         const linkSecurityValue = Number.parseInt(match[1], 10) || 0;
-
-        // Update server with link security value
         store.setState((state) => {
-          const updatedServers = state.servers.map((server) => {
-            if (server.id === serverId) {
-              return {
-                ...server,
-                linkSecurity: linkSecurityValue,
-              };
-            }
-            return server;
-          });
-
+          const updatedServers = state.servers.map((server) =>
+            server.id === serverId
+              ? { ...server, linkSecurity: linkSecurityValue }
+              : server,
+          );
           return { servers: updatedServers };
         });
 
-        // Show warning modal for low UnrealIRCd link-security value
         const currentState = store.getState();
         const currentServer = currentState.servers.find(
           (s) => s.id === serverId,
         );
         const hasLowLinkSecurity = linkSecurityValue < 2;
-
-        // Check if we should show warning based on individual skip preferences
         const savedServers = storage.servers.load();
         const serverConfig = currentServer
           ? savedServers.find(
@@ -110,20 +320,15 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
                 s.port === currentServer.port,
             )
           : undefined;
-
         const shouldWarnLinkSecurity =
           hasLowLinkSecurity && !serverConfig?.skipLinkSecurityWarning;
 
         if (shouldWarnLinkSecurity) {
           store.setState((state) => {
-            // Check if warning already exists for this server
             const existingWarning = state.ui.linkSecurityWarnings.find(
               (w) => w.serverId === serverId,
             );
-            if (existingWarning) {
-              return state; // Don't add duplicate warning
-            }
-
+            if (existingWarning) return state;
             return {
               ui: {
                 ...state.ui,
@@ -146,11 +351,9 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
       const tok = cap.split("=");
       const capName = tok[0];
       const capValue = tok[1];
-
       ircClient.capAck(serverId, capName, capValue ?? null);
     }
 
-    // Update server capabilities in store (merge, don't overwrite)
     store.setState((state) => {
       const updatedServers = state.servers.map((server) => {
         if (server.id === serverId) {
@@ -158,28 +361,20 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
           const newCaps = cliCaps.split(" ");
           const merged = [...existing];
           for (const cap of newCaps) {
-            if (!merged.includes(cap)) {
-              merged.push(cap);
-            }
+            if (!merged.includes(cap)) merged.push(cap);
           }
-          return {
-            ...server,
-            capabilities: merged,
-          };
+          return { ...server, capabilities: merged };
         }
         return server;
       });
       return { servers: updatedServers };
     });
 
-    // Check if we should prevent CAP END (for SASL, account registration, or link security warning)
     const state = store.getState();
     const server = state.servers.find((s) => s.id === serverId);
     let preventCapEnd = false;
 
-    // Check if SASL was requested and acknowledged, AND we have credentials
     if (caps.some((cap) => cap.startsWith("sasl"))) {
-      // Only prevent CAP END if we actually have SASL credentials
       const servers = storage.servers.load();
       const savedServer = servers.find((s) => s.id === serverId);
       if (savedServer?.saslEnabled && savedServer?.saslPassword) {
@@ -187,11 +382,9 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
       }
     }
 
-    // Check if there's pending account registration
     const pendingReg = state.pendingRegistration;
     if (pendingReg && pendingReg.serverId === serverId) {
       preventCapEnd = true;
-      // Check if server supports account registration
       if (server?.capabilities?.includes("draft/account-registration")) {
         store
           .getState()
@@ -201,17 +394,13 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
             pendingReg.email,
             pendingReg.password,
           );
-        // Clear the pending registration
         store.setState({ pendingRegistration: null });
       } else {
-        // Clear the pending registration
         store.setState({ pendingRegistration: null });
-        // Send CAP END since registration is not possible
         preventCapEnd = false;
       }
     }
 
-    // Check if link security warning modal is showing - prevent CAP END until user responds
     if (state.ui.linkSecurityWarnings.some((w) => w.serverId === serverId)) {
       preventCapEnd = true;
     }
@@ -219,7 +408,6 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     if (!preventCapEnd) {
       ircClient.sendRaw(serverId, "CAP END");
       ircClient.userOnConnect(serverId);
-    } else {
     }
   });
 
@@ -227,31 +415,28 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
   ircClient.on("REGISTER_SUCCESS", ({ serverId, account, message }) => {
     const state = store.getState();
     const server = state.servers.find((s) => s.id === serverId);
-    if (server) {
-      const channel = server.channels[0];
-      if (channel) {
-        const notificationMessage: Message = {
-          id: uuidv4(),
-          type: "system",
-          content: `Account registration successful for ${account}: ${message}`,
-          timestamp: new Date(),
-          userId: "system",
-          channelId: channel.id,
-          serverId: serverId,
-          reactions: [],
-          replyMessage: null,
-          mentioned: [],
-        };
-
-        const key = `${serverId}-${channel.id}`;
-        store.setState((state) => ({
-          messages: {
-            ...state.messages,
-            [key]: [...(state.messages[key] || []), notificationMessage],
-          },
-        }));
-      }
-    }
+    if (!server) return;
+    const channel = server.channels[0];
+    if (!channel) return;
+    const notificationMessage: Message = {
+      id: uuidv4(),
+      type: "system",
+      content: `Account registration successful for ${account}: ${message}`,
+      timestamp: new Date(),
+      userId: "system",
+      channelId: channel.id,
+      serverId: serverId,
+      reactions: [],
+      replyMessage: null,
+      mentioned: [],
+    };
+    const key = `${serverId}-${channel.id}`;
+    store.setState((s) => ({
+      messages: {
+        ...s.messages,
+        [key]: [...(s.messages[key] || []), notificationMessage],
+      },
+    }));
   });
 
   ircClient.on(
@@ -259,62 +444,56 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     ({ serverId, account, message }) => {
       const state = store.getState();
       const server = state.servers.find((s) => s.id === serverId);
-      if (server) {
-        const channel = server.channels[0];
-        if (channel) {
-          const notificationMessage: Message = {
-            id: uuidv4(),
-            type: "system",
-            content: `Account registration for ${account} requires verification: ${message}`,
-            timestamp: new Date(),
-            userId: "system",
-            channelId: channel.id,
-            serverId: serverId,
-            reactions: [],
-            replyMessage: null,
-            mentioned: [],
-          };
-
-          const key = `${serverId}-${channel.id}`;
-          store.setState((state) => ({
-            messages: {
-              ...state.messages,
-              [key]: [...(state.messages[key] || []), notificationMessage],
-            },
-          }));
-        }
-      }
+      if (!server) return;
+      const channel = server.channels[0];
+      if (!channel) return;
+      const notificationMessage: Message = {
+        id: uuidv4(),
+        type: "system",
+        content: `Account registration for ${account} requires verification: ${message}`,
+        timestamp: new Date(),
+        userId: "system",
+        channelId: channel.id,
+        serverId: serverId,
+        reactions: [],
+        replyMessage: null,
+        mentioned: [],
+      };
+      const key = `${serverId}-${channel.id}`;
+      store.setState((s) => ({
+        messages: {
+          ...s.messages,
+          [key]: [...(s.messages[key] || []), notificationMessage],
+        },
+      }));
     },
   );
 
   ircClient.on("VERIFY_SUCCESS", ({ serverId, account, message }) => {
     const state = store.getState();
     const server = state.servers.find((s) => s.id === serverId);
-    if (server) {
-      const channel = server.channels[0];
-      if (channel) {
-        const notificationMessage: Message = {
-          id: uuidv4(),
-          type: "system",
-          content: `Account verification successful for ${account}: ${message}`,
-          timestamp: new Date(),
-          userId: "system",
-          channelId: channel.id,
-          serverId: serverId,
-          reactions: [],
-          replyMessage: null,
-          mentioned: [],
-        };
-
-        const key = `${serverId}-${channel.id}`;
-        store.setState((state) => ({
-          messages: {
-            ...state.messages,
-            [key]: [...(state.messages[key] || []), notificationMessage],
-          },
-        }));
-      }
-    }
+    if (!server) return;
+    const channel = server.channels[0];
+    if (!channel) return;
+    const notificationMessage: Message = {
+      id: uuidv4(),
+      type: "system",
+      content: `Account verification successful for ${account}: ${message}`,
+      timestamp: new Date(),
+      userId: "system",
+      channelId: channel.id,
+      serverId: serverId,
+      reactions: [],
+      replyMessage: null,
+      mentioned: [],
+    };
+    const key = `${serverId}-${channel.id}`;
+    store.setState((s) => ({
+      messages: {
+        ...s.messages,
+        [key]: [...(s.messages[key] || []), notificationMessage],
+      },
+    }));
   });
 
   ircClient.on(
@@ -327,12 +506,9 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
         jwtToken: jwtToken ? "present" : "missing",
       });
       store.setState((state) => {
-        const updatedServers = state.servers.map((server) => {
-          if (server.id === serverId) {
-            return { ...server, jwtToken };
-          }
-          return server;
-        });
+        const updatedServers = state.servers.map((server) =>
+          server.id === serverId ? { ...server, jwtToken } : server,
+        );
         return { servers: updatedServers };
       });
     },
diff --git a/src/store/index.ts b/src/store/index.ts
index 7ef1cff3..67e9c5f5 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -372,6 +372,8 @@ interface UIState {
   isAddServerModalOpen: boolean | undefined;
   isEditServerModalOpen: boolean;
   editServerId: string | null;
+  isTwoFactorSettingsOpen: boolean;
+  twoFactorSettingsServerId: string | null;
   isSettingsModalOpen: boolean;
   isQuickActionsOpen: boolean;
   isDarkMode: boolean;
@@ -524,6 +526,23 @@ export interface AppState {
     email: string;
     password: string;
   } | null;
+  // 2FA: SASL step-up modal trigger.  Set when the server replies
+  // `AUTHENTICATE 2FA-REQUIRED`; the modal observes this and prompts the
+  // user for a TOTP code.  Cleared on submit / cancel / SASL completion.
+  pendingTotpStepUp: { serverId: string; account: string } | null;
+  // 2FA management state per server (populated by `2FA LIST` / `2FA STATUS`).
+  twofaStatus: Record<string, "enabled" | "disabled" | "unknown">;
+  twofaCredentials: Record<
+    string,
+    Array<{ id: string; type: string; name: string; createdAt: string }>
+  >;
+  // Active enrolment challenge (server reply to `2FA CHALLENGE <type>`),
+  // base64-encoded JSON.  Consumed by the enrolment dialogs.
+  pendingTwofaChallenge: {
+    serverId: string;
+    type: string;
+    blob: string;
+  } | null;
   // Channel order persistence
   channelOrder: ChannelOrderMap; // serverId -> ordered array of channel names
   // Message deduplication tracking
@@ -565,6 +584,22 @@ export interface AppState {
     password: string,
   ) => void;
   verifyAccount: (serverId: string, account: string, code: string) => void;
+  // 2FA actions
+  twofaStatusQuery: (serverId: string) => void;
+  twofaListQuery: (serverId: string) => void;
+  twofaChallenge: (serverId: string, type: string) => void;
+  twofaAdd: (
+    serverId: string,
+    type: string,
+    name: string,
+    data: string,
+  ) => void;
+  twofaRemove: (serverId: string, id: string) => void;
+  twofaEnable: (serverId: string) => void;
+  twofaDisable: (serverId: string, type: string, data: string) => void;
+  submitTotpStepUp: (serverId: string, code: string) => void;
+  cancelTotpStepUp: (serverId: string) => void;
+  toggleTwoFactorSettings: (isOpen?: boolean, serverId?: string | null) => void;
   setAway: (serverId: string, message?: string) => void;
   clearAway: (serverId: string) => void;
   warnUser: (
@@ -845,6 +880,10 @@ const useStore = create<AppState>((set, get) => ({
   metadataChangeCounter: 0,
   whoisData: {},
   pendingRegistration: null,
+  pendingTotpStepUp: null,
+  twofaStatus: {},
+  twofaCredentials: {},
+  pendingTwofaChallenge: null,
   channelOrder: loadChannelOrder(),
   processedMessageIds: new Set<string>(),
   hasConnectedToSavedServers: false,
@@ -860,6 +899,8 @@ const useStore = create<AppState>((set, get) => ({
     },
     isAddServerModalOpen: false,
     isEditServerModalOpen: false,
+    isTwoFactorSettingsOpen: false,
+    twoFactorSettingsServerId: null,
     editServerId: null,
     isSettingsModalOpen: false,
     isQuickActionsOpen: false,
@@ -1365,6 +1406,41 @@ const useStore = create<AppState>((set, get) => ({
     ircClient.verifyAccount(serverId, account, code);
   },
 
+  twofaStatusQuery: (serverId) => {
+    ircClient.sendRaw(serverId, "2FA STATUS");
+  },
+  twofaListQuery: (serverId) => {
+    set((state) => ({
+      twofaCredentials: { ...state.twofaCredentials, [serverId]: [] },
+    }));
+    ircClient.sendRaw(serverId, "2FA LIST");
+  },
+  twofaChallenge: (serverId, type) => {
+    ircClient.sendRaw(serverId, `2FA CHALLENGE ${type}`);
+  },
+  twofaAdd: (serverId, type, name, data) => {
+    ircClient.sendRaw(serverId, `2FA ADD ${type} ${name} ${data}`);
+  },
+  twofaRemove: (serverId, id) => {
+    ircClient.sendRaw(serverId, `2FA REMOVE ${id}`);
+  },
+  twofaEnable: (serverId) => {
+    ircClient.sendRaw(serverId, "2FA ENABLE");
+  },
+  twofaDisable: (serverId, type, data) => {
+    ircClient.sendRaw(serverId, `2FA DISABLE ${type} ${data}`);
+  },
+  submitTotpStepUp: (serverId, code) => {
+    ircClient.sendRaw(serverId, "AUTHENTICATE TOTP");
+    const b64 = btoa(code.trim());
+    ircClient.sendRaw(serverId, `AUTHENTICATE ${b64}`);
+    set({ pendingTotpStepUp: null });
+  },
+  cancelTotpStepUp: (serverId) => {
+    ircClient.sendRaw(serverId, "AUTHENTICATE *");
+    set({ pendingTotpStepUp: null });
+  },
+
   setAway: (serverId, message) => {
     const awayMsg = message || get().globalSettings.awayMessage || "Away";
     ircClient.setAway(serverId, awayMsg);
@@ -2540,6 +2616,16 @@ const useStore = create<AppState>((set, get) => ({
     }));
   },
 
+  toggleTwoFactorSettings: (isOpen, serverId = null) => {
+    set((state) => ({
+      ui: {
+        ...state.ui,
+        isTwoFactorSettingsOpen: isOpen ?? false,
+        twoFactorSettingsServerId: isOpen ? serverId : null,
+      },
+    }));
+  },
+
   toggleSettingsModal: (isOpen) => {
     set((state) => ({
       ui: {
diff --git a/src/types/index.ts b/src/types/index.ts
index d5694eff..e2835f05 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -59,6 +59,9 @@ export interface ServerConfig {
   saslAccountName?: string;
   saslPassword?: string;
   saslEnabled: boolean;
+  // "auto" prefers SCRAM-SHA-256 when the server advertises it and falls
+  // back to PLAIN, "webauthn" uses DRAFT-WEBAUTHN-BIO directly.
+  saslMechanism?: "auto" | "PLAIN" | "SCRAM-SHA-256" | "DRAFT-WEBAUTHN-BIO";
   skipLinkSecurityWarning?: boolean;
   skipLocalhostWarning?: boolean;
   operUsername?: string;
diff --git a/tests/fixtures/uiState.ts b/tests/fixtures/uiState.ts
index ed3698c8..68ad1ece 100644
--- a/tests/fixtures/uiState.ts
+++ b/tests/fixtures/uiState.ts
@@ -5,4 +5,6 @@ export const defaultUIExtensions = {
   inviteUserRequest: null,
   openedMedia: null,
   activeMedia: null,
+  isTwoFactorSettingsOpen: false,
+  twoFactorSettingsServerId: null,
 };

From af2064bc00fab8db2b83003e9b77abae206ccdf1 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sat, 2 May 2026 14:22:51 +0100
Subject: [PATCH 02/16] feat: tic-tac-toe (compatible with KiwiIRC plugin)

Implements the same TAGMSG protocol used by
ItsOnlyBinary/kiwiirc-plugin-tictactoe so KiwiIRC and ObsidianIRC
users can play each other.

* `src/lib/games/tictactoe.ts` -- pure game logic: board, turn
  bookkeeping, win/draw detection, marker assignment.
* `src/lib/games/tictactoeProtocol.ts` -- IRC message-tag escape and
  unescape per IRCv3 message-tags.
* `src/store/handlers/tictactoeActions.ts` -- store-side actions
  (invite/accept/decline/move/terminate) that mutate state and emit
  TAGMSGs over `+kiwiirc.com/ttt`.
* `src/store/handlers/tictactoe.ts` -- inbound TAGMSG dispatch.
  Auto-opens the modal on incoming invites, replays moves into the
  local board, detects out-of-sync turns, handles forfeit / decline.
* `src/components/ui/TicTacToeModal.tsx` -- minimal 3x3 board UI with
  invite accept/decline, in-game forfeit, and game-over close.
* "Play Tic-Tac-Toe" entry in the chat-header overflow menu when a
  private chat is selected.
---
 src/App.tsx                            |   2 +
 src/components/layout/ChatHeader.tsx   |  12 ++
 src/components/ui/TicTacToeModal.tsx   | 154 ++++++++++++++++++
 src/lib/games/tictactoe.ts             | 176 ++++++++++++++++++++
 src/lib/games/tictactoeProtocol.ts     |  30 ++++
 src/store/handlers/index.ts            |   2 +
 src/store/handlers/tictactoe.ts        | 215 +++++++++++++++++++++++++
 src/store/handlers/tictactoeActions.ts | 201 +++++++++++++++++++++++
 src/store/index.ts                     |  45 ++++++
 9 files changed, 837 insertions(+)
 create mode 100644 src/components/ui/TicTacToeModal.tsx
 create mode 100644 src/lib/games/tictactoe.ts
 create mode 100644 src/lib/games/tictactoeProtocol.ts
 create mode 100644 src/store/handlers/tictactoe.ts
 create mode 100644 src/store/handlers/tictactoeActions.ts

diff --git a/src/App.tsx b/src/App.tsx
index 2610c090..586a6a9a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,6 +15,7 @@ import { EditServerModal } from "./components/ui/EditServerModal";
 import LinkSecurityWarningModal from "./components/ui/LinkSecurityWarningModal";
 import LoadingOverlay from "./components/ui/LoadingOverlay";
 import QuickActions from "./components/ui/QuickActions";
+import { TicTacToeModal } from "./components/ui/TicTacToeModal";
 import { TotpStepUpModal } from "./components/ui/TotpStepUpModal";
 import { TwoFactorSettingsModal } from "./components/ui/TwoFactorSettingsModal";
 import UserProfileModal from "./components/ui/UserProfileModal";
@@ -318,6 +319,7 @@ const App: React.FC = () => {
                 />
               )}
               <TotpStepUpModal />
+              <TicTacToeModal />
               {isSettingsModalOpen && <UserSettings />}
               {isQuickActionsOpen && <QuickActions />}
               {isChannelListModalOpen && <ChannelListModal />}
diff --git a/src/components/layout/ChatHeader.tsx b/src/components/layout/ChatHeader.tsx
index 24cb6bda..18a7b3c3 100644
--- a/src/components/layout/ChatHeader.tsx
+++ b/src/components/layout/ChatHeader.tsx
@@ -316,6 +316,18 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
       onClick: onOpenInviteUser,
       show: !!selectedChannel,
     },
+    {
+      label: "Play Tic-Tac-Toe",
+      icon: <span aria-hidden="true">🎮</span>,
+      onClick: () => {
+        if (selectedServerId && selectedPrivateChat) {
+          useStore
+            .getState()
+            .tictactoeInvite(selectedServerId, selectedPrivateChat.username);
+        }
+      },
+      show: !!selectedPrivateChat,
+    },
     {
       label: "Server Channels",
       icon: <FaList />,
diff --git a/src/components/ui/TicTacToeModal.tsx b/src/components/ui/TicTacToeModal.tsx
new file mode 100644
index 00000000..4a6823c7
--- /dev/null
+++ b/src/components/ui/TicTacToeModal.tsx
@@ -0,0 +1,154 @@
+import type React from "react";
+import { useMemo } from "react";
+import { isLocalTurn, isWinningCell } from "../../lib/games/tictactoe";
+import useStore from "../../store";
+
+export const TicTacToeModal: React.FC = () => {
+  const open = useStore((s) => s.tictactoe?.open ?? null);
+  const games = useStore((s) => s.tictactoe?.games ?? {});
+  const accept = useStore((s) => s.tictactoeAccept);
+  const decline = useStore((s) => s.tictactoeDecline);
+  const move = useStore((s) => s.tictactoeMove);
+  const terminate = useStore((s) => s.tictactoeTerminate);
+  const closeModal = useStore((s) => s.tictactoeCloseModal);
+
+  const game = useMemo(() => {
+    if (!open) return null;
+    return games[open.serverId]?.[open.opponent.toLowerCase()] ?? null;
+  }, [open, games]);
+
+  if (!open || !game) return null;
+
+  const myTurn = game.active && !game.gameOver && isLocalTurn(game);
+  const onClose = () => {
+    terminate(open.serverId, open.opponent);
+    closeModal();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+      <div className="bg-discord-dark-200 rounded-lg w-full max-w-sm p-5">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold text-white">
+            Tic-Tac-Toe vs {open.opponent}
+          </h2>
+          <button
+            type="button"
+            onClick={() => closeModal()}
+            className="text-discord-text-muted hover:text-white"
+            aria-label="Close"
+          >
+            ✕
+          </button>
+        </div>
+
+        {game.inviteIncoming && (
+          <div className="mb-4 p-3 rounded bg-discord-dark-300">
+            <p className="text-sm text-white mb-3">
+              {open.opponent} has invited you to play.
+            </p>
+            <div className="flex gap-2 justify-end">
+              <button
+                type="button"
+                onClick={() => decline(open.serverId, open.opponent)}
+                className="px-3 py-2 rounded bg-discord-dark-100 text-white text-sm"
+              >
+                Decline
+              </button>
+              <button
+                type="button"
+                onClick={() => accept(open.serverId, open.opponent)}
+                className="px-3 py-2 rounded bg-discord-green text-white text-sm"
+              >
+                Accept
+              </button>
+            </div>
+          </div>
+        )}
+
+        {game.invitePending && !game.active && (
+          <div className="mb-4 p-3 rounded bg-discord-dark-300 text-sm text-white">
+            Waiting for {open.opponent} to accept…
+          </div>
+        )}
+
+        {(game.active || game.gameOver) && (
+          <div className="mb-3">
+            <table className="mx-auto border-collapse">
+              <tbody>
+                {game.board.map((row, r) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: 3x3 fixed grid
+                  <tr key={r}>
+                    {row.map((cell, c) => {
+                      const playable = myTurn && cell === "" && !game.gameOver;
+                      const win = isWinningCell(game, r, c);
+                      return (
+                        <td
+                          // biome-ignore lint/suspicious/noArrayIndexKey: 3x3 fixed grid
+                          key={c}
+                          onClick={
+                            playable
+                              ? () => move(open.serverId, open.opponent, r, c)
+                              : undefined
+                          }
+                          onKeyDown={
+                            playable
+                              ? (e) => {
+                                  if (e.key === "Enter" || e.key === " ")
+                                    move(open.serverId, open.opponent, r, c);
+                                }
+                              : undefined
+                          }
+                          tabIndex={playable ? 0 : -1}
+                          className={`w-20 h-20 text-4xl font-bold text-center border-4 border-discord-dark-100 select-none ${
+                            playable
+                              ? "cursor-pointer hover:bg-discord-dark-300"
+                              : ""
+                          } ${
+                            win ? "bg-discord-green text-white" : "text-white"
+                          }`}
+                        >
+                          {cell}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        <div className="text-center text-sm text-white min-h-[1.25rem]">
+          {game.statusMessage}
+        </div>
+
+        {game.gameOver && (
+          <div className="mt-3 flex justify-end">
+            <button
+              type="button"
+              onClick={() => closeModal()}
+              className="px-4 py-2 rounded bg-discord-blue text-white text-sm"
+            >
+              Close
+            </button>
+          </div>
+        )}
+
+        {!game.gameOver && game.active && (
+          <div className="mt-3 flex justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3 py-2 rounded bg-discord-red text-white text-sm"
+            >
+              Forfeit
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TicTacToeModal;
diff --git a/src/lib/games/tictactoe.ts b/src/lib/games/tictactoe.ts
new file mode 100644
index 00000000..816daf26
--- /dev/null
+++ b/src/lib/games/tictactoe.ts
@@ -0,0 +1,176 @@
+// Compatible-by-design with the KiwiIRC tic-tac-toe plugin
+// (https://github.com/ItsOnlyBinary/kiwiirc-plugin-tictactoe).
+//
+// All exchanges are IRC TAGMSGs to the opponent's nick carrying a single
+// client-only message tag, `+kiwiirc.com/ttt`, whose value is a JSON object.
+
+export const TTT_TAG = "+kiwiirc.com/ttt";
+
+export type Cell = "" | "X" | "O";
+export type Board = Cell[][]; // 3x3
+
+// Wire commands.
+export type TttMessage =
+  | { cmd: "invite" }
+  | { cmd: "invite_received" }
+  | { cmd: "invite_accepted"; startPlayer: string }
+  | { cmd: "invite_declined" }
+  | { cmd: "action"; clicked: [number, number]; turn: number }
+  | { cmd: "error"; message: string }
+  | { cmd: "terminate" };
+
+export interface GameSnapshot {
+  serverId: string;
+  localPlayer: string;
+  remotePlayer: string;
+  startPlayer: string | null;
+  board: Board;
+  turn: number; // increments each move, starts at 1
+  gameOver: boolean;
+  winner: "X" | "O" | "draw" | null;
+  winLine: Array<[number, number]> | null;
+  // UI state
+  invitePending: boolean; // we sent invite, awaiting their response
+  inviteIncoming: boolean; // they sent invite, awaiting our response
+  active: boolean; // game accepted and in progress
+  terminated: boolean; // explicitly ended (by them or us)
+  statusMessage: string;
+}
+
+const WIN_LINES: Array<Array<[number, number]>> = [
+  // rows
+  [
+    [0, 0],
+    [0, 1],
+    [0, 2],
+  ],
+  [
+    [1, 0],
+    [1, 1],
+    [1, 2],
+  ],
+  [
+    [2, 0],
+    [2, 1],
+    [2, 2],
+  ],
+  // columns
+  [
+    [0, 0],
+    [1, 0],
+    [2, 0],
+  ],
+  [
+    [0, 1],
+    [1, 1],
+    [2, 1],
+  ],
+  [
+    [0, 2],
+    [1, 2],
+    [2, 2],
+  ],
+  // diagonals
+  [
+    [0, 0],
+    [1, 1],
+    [2, 2],
+  ],
+  [
+    [0, 2],
+    [1, 1],
+    [2, 0],
+  ],
+];
+
+export function emptyBoard(): Board {
+  return [
+    ["", "", ""],
+    ["", "", ""],
+    ["", "", ""],
+  ];
+}
+
+export function makeGame(
+  serverId: string,
+  localPlayer: string,
+  remotePlayer: string,
+): GameSnapshot {
+  return {
+    serverId,
+    localPlayer,
+    remotePlayer,
+    startPlayer: null,
+    board: emptyBoard(),
+    turn: 1,
+    gameOver: false,
+    winner: null,
+    winLine: null,
+    invitePending: false,
+    inviteIncoming: false,
+    active: false,
+    terminated: false,
+    statusMessage: "",
+  };
+}
+
+export function markerForTurn(turn: number): "X" | "O" {
+  return turn % 2 === 1 ? "X" : "O";
+}
+
+// The starter is X.  Whoever the accepter chose as startPlayer takes the
+// first move; subsequent turns alternate.
+export function isLocalTurn(g: GameSnapshot): boolean {
+  if (!g.active || g.gameOver) return false;
+  // turn 1 is the start player.  start === local => local plays on odd turns.
+  const odd = g.turn % 2 === 1;
+  return g.startPlayer === g.localPlayer ? odd : !odd;
+}
+
+// Apply a move (idempotent against an already-occupied cell -> returns false).
+// Caller is expected to already have validated whose turn it is.
+export function applyMove(g: GameSnapshot, row: number, col: number): boolean {
+  if (row < 0 || row > 2 || col < 0 || col > 2) return false;
+  if (g.board[row][col] !== "") return false;
+  g.board[row][col] = markerForTurn(g.turn);
+  g.turn += 1;
+  evaluate(g);
+  return true;
+}
+
+// Check for win or draw and update game state accordingly.
+export function evaluate(g: GameSnapshot): void {
+  for (const line of WIN_LINES) {
+    const [a, b, c] = line;
+    const va = g.board[a[0]][a[1]];
+    const vb = g.board[b[0]][b[1]];
+    const vc = g.board[c[0]][c[1]];
+    if (va !== "" && va === vb && vb === vc) {
+      g.gameOver = true;
+      g.winner = va;
+      g.winLine = line;
+      return;
+    }
+  }
+  if (g.board.every((row) => row.every((c) => c !== ""))) {
+    g.gameOver = true;
+    g.winner = "draw";
+    g.winLine = null;
+  }
+}
+
+export function isWinningCell(
+  g: GameSnapshot,
+  row: number,
+  col: number,
+): boolean {
+  if (!g.winLine) return false;
+  return g.winLine.some(([r, c]) => r === row && c === col);
+}
+
+// Whose nick goes first when both peers agree on a flip.  Either side is
+// fine -- we randomise on the accepter side and tell the inviter via
+// `invite_accepted`.
+export function pickStartPlayer(local: string, remote: string): string {
+  return Math.random() < 0.5 ? local : remote;
+}
diff --git a/src/lib/games/tictactoeProtocol.ts b/src/lib/games/tictactoeProtocol.ts
new file mode 100644
index 00000000..cafd9b33
--- /dev/null
+++ b/src/lib/games/tictactoeProtocol.ts
@@ -0,0 +1,30 @@
+// IRC message-tag value escape per IRCv3 message-tags spec.  Used to safely
+// embed JSON payloads inside the `+kiwiirc.com/ttt` tag.
+
+export function escapeTagValue(v: string): string {
+  return v
+    .replace(/\\/g, "\\\\")
+    .replace(/;/g, "\\:")
+    .replace(/ /g, "\\s")
+    .replace(/\r/g, "\\r")
+    .replace(/\n/g, "\\n");
+}
+
+export function unescapeTagValue(v: string): string {
+  let out = "";
+  for (let i = 0; i < v.length; i++) {
+    const c = v[i];
+    if (c !== "\\" || i + 1 >= v.length) {
+      out += c;
+      continue;
+    }
+    const next = v[++i];
+    if (next === ":") out += ";";
+    else if (next === "s") out += " ";
+    else if (next === "r") out += "\r";
+    else if (next === "n") out += "\n";
+    else if (next === "\\") out += "\\";
+    else out += next;
+  }
+  return out;
+}
diff --git a/src/store/handlers/index.ts b/src/store/handlers/index.ts
index f6c59eb1..40c67902 100644
--- a/src/store/handlers/index.ts
+++ b/src/store/handlers/index.ts
@@ -6,6 +6,7 @@ import { registerChannelHandlers } from "./channels";
 import { registerConnectionHandlers } from "./connection";
 import { registerMessageHandlers } from "./messages";
 import { registerMetadataHandlers } from "./metadata";
+import { registerTicTacToeHandlers } from "./tictactoe";
 import { registerUserHandlers } from "./users";
 import { registerWhoisHandlers } from "./whois";
 
@@ -18,4 +19,5 @@ export function registerAllHandlers(store: StoreApi<AppState>): void {
   registerMetadataHandlers(store);
   registerBatchHandlers(store);
   registerAuthHandlers(store);
+  registerTicTacToeHandlers(store);
 }
diff --git a/src/store/handlers/tictactoe.ts b/src/store/handlers/tictactoe.ts
new file mode 100644
index 00000000..6232c453
--- /dev/null
+++ b/src/store/handlers/tictactoe.ts
@@ -0,0 +1,215 @@
+// TAGMSG receiver for tic-tac-toe games.  Listens on the existing TAGMSG
+// event the IRC layer fires and reacts to messages tagged with
+// `+kiwiirc.com/ttt`.
+
+import type { StoreApi } from "zustand";
+import {
+  applyMove,
+  type GameSnapshot,
+  isLocalTurn,
+  makeGame,
+  TTT_TAG,
+  type TttMessage,
+} from "../../lib/games/tictactoe";
+import { unescapeTagValue } from "../../lib/games/tictactoeProtocol";
+import ircClient from "../../lib/ircClient";
+import type { AppState } from "../index";
+import * as actions from "./tictactoeActions";
+
+function key(opponent: string): string {
+  return opponent.toLowerCase();
+}
+
+function getGame(
+  state: AppState,
+  serverId: string,
+  opponent: string,
+): GameSnapshot | undefined {
+  return state.tictactoe.games[serverId]?.[key(opponent)];
+}
+
+function putGame(
+  store: StoreApi<AppState>,
+  serverId: string,
+  opponent: string,
+  g: GameSnapshot,
+) {
+  store.setState((state) => ({
+    tictactoe: {
+      ...state.tictactoe,
+      games: {
+        ...state.tictactoe.games,
+        [serverId]: {
+          ...(state.tictactoe.games[serverId] ?? {}),
+          [key(opponent)]: g,
+        },
+      },
+    },
+  }));
+}
+
+export function registerTicTacToeHandlers(store: StoreApi<AppState>) {
+  ircClient.on("TAGMSG", ({ serverId, mtags, sender, channelName }) => {
+    const me = ircClient.getNick(serverId);
+    if (!me || !mtags) return;
+    // Only direct messages from another nick to us.
+    if (channelName !== me) return;
+    if (!sender || sender === me) return;
+
+    const raw = mtags[TTT_TAG];
+    if (!raw) return;
+    const value = unescapeTagValue(raw);
+    if (!value || value[0] !== "{") return;
+
+    let data: TttMessage | null = null;
+    try {
+      data = JSON.parse(value) as TttMessage;
+    } catch {
+      return;
+    }
+    if (!data || typeof data !== "object" || !("cmd" in data)) return;
+
+    const opponent = sender;
+    const state = store.getState();
+    let game = getGame(state, serverId, opponent);
+
+    switch (data.cmd) {
+      case "invite": {
+        if (!game) {
+          game = makeGame(serverId, me, opponent);
+        }
+        game = {
+          ...game,
+          inviteIncoming: true,
+          invitePending: false,
+          statusMessage: `${opponent} invited you to play.`,
+        };
+        putGame(store, serverId, opponent, game);
+        store.setState((state) => ({
+          tictactoe: {
+            ...state.tictactoe,
+            open: state.tictactoe.open ?? { serverId, opponent },
+          },
+        }));
+        // Acknowledge.
+        ircClient.sendRaw(
+          serverId,
+          `@${TTT_TAG}={"cmd"\\:"invite_received"} TAGMSG ${opponent}`,
+        );
+        break;
+      }
+      case "invite_received": {
+        // Inviter side: the other side has UI for the invite now -- we
+        // don't need to do anything but stop any "still waiting" timer
+        // (we don't have one).  Update status for clarity.
+        if (game) {
+          game = {
+            ...game,
+            statusMessage: `${opponent} sees the invite…`,
+          };
+          putGame(store, serverId, opponent, game);
+        }
+        break;
+      }
+      case "invite_accepted": {
+        if (!game) return;
+        const startPlayer = data.startPlayer;
+        const next: GameSnapshot = {
+          ...game,
+          startPlayer,
+          active: true,
+          gameOver: false,
+          winner: null,
+          winLine: null,
+          turn: 1,
+          board: [
+            ["", "", ""],
+            ["", "", ""],
+            ["", "", ""],
+          ],
+          invitePending: false,
+          inviteIncoming: false,
+          terminated: false,
+          statusMessage: "",
+        };
+        next.statusMessage = isLocalTurn(next)
+          ? "Your turn!"
+          : `Waiting for ${opponent}…`;
+        putGame(store, serverId, opponent, next);
+        // Auto-open the modal so the inviter sees the game.
+        store.setState((state) => ({
+          tictactoe: {
+            ...state.tictactoe,
+            open: { serverId, opponent },
+          },
+        }));
+        break;
+      }
+      case "invite_declined": {
+        if (!game) return;
+        actions.terminate(store.setState, store.getState, serverId, opponent);
+        break;
+      }
+      case "action": {
+        if (!game?.active || game.gameOver) return;
+        const [row, col] = data.clicked ?? [-1, -1];
+        // The remote turn number is the turn they had BEFORE making the
+        // move; if it doesn't match our current turn we've gone out of
+        // sync and the safe thing to do is end the game.
+        if (data.turn !== game.turn) {
+          const broken: GameSnapshot = {
+            ...game,
+            gameOver: true,
+            statusMessage: "Out of sync — game ended.",
+          };
+          putGame(store, serverId, opponent, broken);
+          ircClient.sendRaw(
+            serverId,
+            `@${TTT_TAG}={"cmd"\\:"error"\\,"message"\\:"out of sync"} TAGMSG ${opponent}`,
+          );
+          return;
+        }
+        const next: GameSnapshot = {
+          ...game,
+          board: game.board.map((r) => [...r]),
+        };
+        if (!applyMove(next, row, col)) {
+          return;
+        }
+        if (!next.gameOver) {
+          next.statusMessage = isLocalTurn(next)
+            ? "Your turn!"
+            : `Waiting for ${opponent}…`;
+        } else if (next.winner === "draw") {
+          next.statusMessage = "Draw!";
+        } else {
+          next.statusMessage = `${opponent} wins! (${next.winner})`;
+        }
+        putGame(store, serverId, opponent, next);
+        break;
+      }
+      case "error": {
+        if (!game) return;
+        putGame(store, serverId, opponent, {
+          ...game,
+          gameOver: true,
+          statusMessage:
+            "message" in data
+              ? `Error from ${opponent}: ${data.message}`
+              : `Error from ${opponent}`,
+        });
+        break;
+      }
+      case "terminate": {
+        if (!game) return;
+        putGame(store, serverId, opponent, {
+          ...game,
+          gameOver: true,
+          terminated: true,
+          statusMessage: `${opponent} ended the game.`,
+        });
+        break;
+      }
+    }
+  });
+}
diff --git a/src/store/handlers/tictactoeActions.ts b/src/store/handlers/tictactoeActions.ts
new file mode 100644
index 00000000..66ed2e45
--- /dev/null
+++ b/src/store/handlers/tictactoeActions.ts
@@ -0,0 +1,201 @@
+// Store-side actions for tic-tac-toe.  These both mutate the Zustand store
+// and send TAGMSG packets via ircClient.  Imported from store/index.ts.
+
+import {
+  applyMove,
+  type GameSnapshot,
+  isLocalTurn,
+  makeGame,
+  pickStartPlayer,
+  TTT_TAG,
+  type TttMessage,
+} from "../../lib/games/tictactoe";
+import { escapeTagValue } from "../../lib/games/tictactoeProtocol";
+import ircClient from "../../lib/ircClient";
+import type { AppState } from "../index";
+
+type SetFn = (
+  partial: Partial<AppState> | ((state: AppState) => Partial<AppState>),
+) => void;
+type GetFn = () => AppState;
+
+function key(opponent: string): string {
+  return opponent.toLowerCase();
+}
+
+function getGame(
+  state: AppState,
+  serverId: string,
+  opponent: string,
+): GameSnapshot | undefined {
+  return state.tictactoe.games[serverId]?.[key(opponent)];
+}
+
+function setGame(
+  set: SetFn,
+  serverId: string,
+  opponent: string,
+  g: GameSnapshot,
+) {
+  set((state) => ({
+    tictactoe: {
+      ...state.tictactoe,
+      games: {
+        ...state.tictactoe.games,
+        [serverId]: {
+          ...(state.tictactoe.games[serverId] ?? {}),
+          [key(opponent)]: g,
+        },
+      },
+    },
+  }));
+}
+
+function deleteGame(set: SetFn, serverId: string, opponent: string) {
+  set((state) => {
+    const games = { ...state.tictactoe.games };
+    if (games[serverId]) {
+      const inner = { ...games[serverId] };
+      delete inner[key(opponent)];
+      games[serverId] = inner;
+    }
+    const open =
+      state.tictactoe.open &&
+      state.tictactoe.open.serverId === serverId &&
+      key(state.tictactoe.open.opponent) === key(opponent)
+        ? null
+        : state.tictactoe.open;
+    return { tictactoe: { ...state.tictactoe, games, open } };
+  });
+}
+
+function sendTtt(serverId: string, target: string, msg: TttMessage) {
+  const json = JSON.stringify(msg);
+  const escaped = escapeTagValue(json);
+  ircClient.sendRaw(serverId, `@${TTT_TAG}=${escaped} TAGMSG ${target}`);
+}
+
+function localNick(serverId: string): string | undefined {
+  return ircClient.getNick(serverId);
+}
+
+export function invite(
+  set: SetFn,
+  get: GetFn,
+  serverId: string,
+  opponent: string,
+) {
+  const me = localNick(serverId);
+  if (!me) return;
+  const existing = getGame(get(), serverId, opponent);
+  const g = existing ?? makeGame(serverId, me, opponent);
+  g.invitePending = true;
+  g.inviteIncoming = false;
+  g.terminated = false;
+  g.statusMessage = `Invite sent to ${opponent}`;
+  setGame(set, serverId, opponent, { ...g });
+  sendTtt(serverId, opponent, { cmd: "invite" });
+  set((state) => ({
+    tictactoe: { ...state.tictactoe, open: { serverId, opponent } },
+  }));
+}
+
+export function accept(
+  set: SetFn,
+  get: GetFn,
+  serverId: string,
+  opponent: string,
+) {
+  const me = localNick(serverId);
+  if (!me) return;
+  const g =
+    getGame(get(), serverId, opponent) ?? makeGame(serverId, me, opponent);
+  const startPlayer = pickStartPlayer(me, opponent);
+  g.startPlayer = startPlayer;
+  g.active = true;
+  g.gameOver = false;
+  g.winner = null;
+  g.winLine = null;
+  g.turn = 1;
+  g.board = [
+    ["", "", ""],
+    ["", "", ""],
+    ["", "", ""],
+  ];
+  g.inviteIncoming = false;
+  g.invitePending = false;
+  g.terminated = false;
+  g.statusMessage = isLocalTurn(g) ? "Your turn!" : `Waiting for ${opponent}…`;
+  setGame(set, serverId, opponent, { ...g });
+  sendTtt(serverId, opponent, { cmd: "invite_accepted", startPlayer });
+  set((state) => ({
+    tictactoe: { ...state.tictactoe, open: { serverId, opponent } },
+  }));
+}
+
+export function decline(
+  set: SetFn,
+  _get: GetFn,
+  serverId: string,
+  opponent: string,
+) {
+  sendTtt(serverId, opponent, { cmd: "invite_declined" });
+  deleteGame(set, serverId, opponent);
+}
+
+export function move(
+  set: SetFn,
+  get: GetFn,
+  serverId: string,
+  opponent: string,
+  row: number,
+  col: number,
+) {
+  const g = getGame(get(), serverId, opponent);
+  if (!g?.active || g.gameOver) return;
+  if (!isLocalTurn(g)) return;
+  const turnAtSend = g.turn;
+  const next: GameSnapshot = {
+    ...g,
+    board: g.board.map((r) => [...r]),
+  };
+  if (!applyMove(next, row, col)) return;
+  if (!next.gameOver) {
+    next.statusMessage = `Waiting for ${opponent}…`;
+  } else if (next.winner === "draw") {
+    next.statusMessage = "Draw!";
+  } else {
+    next.statusMessage = isLocalTurn({
+      ...next,
+      turn: turnAtSend,
+      gameOver: false,
+    })
+      ? `You win! (${next.winner})`
+      : `${opponent} wins! (${next.winner})`;
+  }
+  setGame(set, serverId, opponent, next);
+  sendTtt(serverId, opponent, {
+    cmd: "action",
+    clicked: [row, col],
+    turn: turnAtSend,
+  });
+}
+
+export function terminate(
+  set: SetFn,
+  get: GetFn,
+  serverId: string,
+  opponent: string,
+) {
+  const g = getGame(get(), serverId, opponent);
+  if (!g) return;
+  if (g.inviteIncoming) {
+    sendTtt(serverId, opponent, { cmd: "invite_declined" });
+    deleteGame(set, serverId, opponent);
+    return;
+  }
+  if (g.active && !g.gameOver) {
+    sendTtt(serverId, opponent, { cmd: "terminate" });
+  }
+  deleteGame(set, serverId, opponent);
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index 67e9c5f5..b23a44e0 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -15,6 +15,7 @@ import type {
 } from "../types";
 import { registerAllHandlers } from "./handlers";
 import { readyProcessedServers } from "./handlers/connection";
+import * as tictactoeActions from "./handlers/tictactoeActions";
 import { MAX_MESSAGES_PER_CHANNEL } from "./helpers";
 import * as storage from "./localStorage";
 import { runPendingMigrations } from "./migrations";
@@ -543,6 +544,15 @@ export interface AppState {
     type: string;
     blob: string;
   } | null;
+  // Tic-tac-toe games keyed serverId -> opponent-nick-lower.  Used by both
+  // the TAGMSG handler and the modal UI.
+  tictactoe: {
+    games: Record<
+      string,
+      Record<string, import("../lib/games/tictactoe").GameSnapshot>
+    >;
+    open: { serverId: string; opponent: string } | null;
+  };
   // Channel order persistence
   channelOrder: ChannelOrderMap; // serverId -> ordered array of channel names
   // Message deduplication tracking
@@ -600,6 +610,19 @@ export interface AppState {
   submitTotpStepUp: (serverId: string, code: string) => void;
   cancelTotpStepUp: (serverId: string) => void;
   toggleTwoFactorSettings: (isOpen?: boolean, serverId?: string | null) => void;
+  // Tic-tac-toe actions
+  tictactoeInvite: (serverId: string, opponent: string) => void;
+  tictactoeAccept: (serverId: string, opponent: string) => void;
+  tictactoeDecline: (serverId: string, opponent: string) => void;
+  tictactoeMove: (
+    serverId: string,
+    opponent: string,
+    row: number,
+    col: number,
+  ) => void;
+  tictactoeTerminate: (serverId: string, opponent: string) => void;
+  tictactoeOpenModal: (serverId: string, opponent: string) => void;
+  tictactoeCloseModal: () => void;
   setAway: (serverId: string, message?: string) => void;
   clearAway: (serverId: string) => void;
   warnUser: (
@@ -884,6 +907,7 @@ const useStore = create<AppState>((set, get) => ({
   twofaStatus: {},
   twofaCredentials: {},
   pendingTwofaChallenge: null,
+  tictactoe: { games: {}, open: null },
   channelOrder: loadChannelOrder(),
   processedMessageIds: new Set<string>(),
   hasConnectedToSavedServers: false,
@@ -2616,6 +2640,27 @@ const useStore = create<AppState>((set, get) => ({
     }));
   },
 
+  tictactoeInvite: (serverId, opponent) =>
+    tictactoeActions.invite(set, get, serverId, opponent),
+  tictactoeAccept: (serverId, opponent) =>
+    tictactoeActions.accept(set, get, serverId, opponent),
+  tictactoeDecline: (serverId, opponent) =>
+    tictactoeActions.decline(set, get, serverId, opponent),
+  tictactoeMove: (serverId, opponent, row, col) =>
+    tictactoeActions.move(set, get, serverId, opponent, row, col),
+  tictactoeTerminate: (serverId, opponent) =>
+    tictactoeActions.terminate(set, get, serverId, opponent),
+  tictactoeOpenModal: (serverId, opponent) => {
+    set((state) => ({
+      tictactoe: { ...state.tictactoe, open: { serverId, opponent } },
+    }));
+  },
+  tictactoeCloseModal: () => {
+    set((state) => ({
+      tictactoe: { ...state.tictactoe, open: null },
+    }));
+  },
+
   toggleTwoFactorSettings: (isOpen, serverId = null) => {
     set((state) => ({
       ui: {

From b6e6bd95fbe0404ed9461fe5c8fbf051b8d233c7 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sat, 2 May 2026 18:32:58 +0100
Subject: [PATCH 03/16] feat: surface tic-tac-toe button in the PM header
 action row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The overflow menu is only rendered in the channel header (and only on
mobile), so the previous "Play Tic-Tac-Toe" entry was unreachable in
private chats.  Add a dedicated 🎮 button next to the existing Media /
Search controls in the PM action cluster instead.
---
 src/components/layout/ChatHeader.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/layout/ChatHeader.tsx b/src/components/layout/ChatHeader.tsx
index 18a7b3c3..8f026c53 100644
--- a/src/components/layout/ChatHeader.tsx
+++ b/src/components/layout/ChatHeader.tsx
@@ -831,6 +831,23 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
                   <FaFilm />
                 </button>
               )}
+              <button
+                className="p-2 md:p-0 hover:text-discord-text-normal"
+                onClick={() => {
+                  if (selectedServerId && selectedPrivateChat) {
+                    useStore
+                      .getState()
+                      .tictactoeInvite(
+                        selectedServerId,
+                        selectedPrivateChat.username,
+                      );
+                  }
+                }}
+                aria-label="Play Tic-Tac-Toe"
+                title="Play Tic-Tac-Toe"
+              >
+                <span aria-hidden="true">🎮</span>
+              </button>
               <button
                 className="md:hidden p-2 hover:text-discord-text-normal"
                 onClick={() => setIsSearchExpanded(!isSearchExpanded)}

From 25f5b0dd05df4efa62df1a2ae5a73a88a3d706c1 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sun, 3 May 2026 01:39:56 +0100
Subject: [PATCH 04/16] 2FA: confirm-before-remove, block removing last
 credential while enabled

The remove button used to fire an immediate `2FA REMOVE`.  That had two
problems:

1. No undo path -- a stray click silently dropped a TOTP credential.
2. With 2FA enforcement on, the server's REMOVE_LAST_CREDENTIAL guard
   would reject the request, but we'd still surface the failure as a
   plain error toast with no recovery hint.

Now the button just stages a confirm prompt inline.  When 2FA is enabled
and the credential being removed is the only one left, the confirm
prompt is replaced with a "can't remove your last credential" notice
that points the user at adding another credential or disabling 2FA
first.  Otherwise the user gets a normal "remove '<name>'?" confirm.
---
 src/components/ui/TwoFactorSettingsModal.tsx | 102 +++++++++++++++----
 1 file changed, 82 insertions(+), 20 deletions(-)

diff --git a/src/components/ui/TwoFactorSettingsModal.tsx b/src/components/ui/TwoFactorSettingsModal.tsx
index 1cd65e01..5298e844 100644
--- a/src/components/ui/TwoFactorSettingsModal.tsx
+++ b/src/components/ui/TwoFactorSettingsModal.tsx
@@ -58,6 +58,7 @@ export const TwoFactorSettingsModal: React.FC<Props> = ({
   const [enrollBusy, setEnrollBusy] = useState(false);
   const [disableCode, setDisableCode] = useState("");
   const [qrSvg, setQrSvg] = useState<string | null>(null);
+  const [removingId, setRemovingId] = useState<string | null>(null);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: store actions have unstable refs
   useEffect(() => {
@@ -219,27 +220,88 @@ export const TwoFactorSettingsModal: React.FC<Props> = ({
           </p>
         ) : (
           <ul className="mb-4 space-y-2">
-            {credentials.map((c) => (
-              <li
-                key={c.id}
-                className="flex justify-between items-center p-2 rounded bg-discord-dark-300"
-              >
-                <div className="text-sm">
-                  <div className="text-white font-medium">{c.name}</div>
-                  <div className="text-xs text-discord-text-muted">
-                    {TYPE_LABELS[c.type] ?? c.type}
-                    {c.createdAt ? ` · added ${c.createdAt}` : ""}
-                  </div>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => twofaRemove(serverId, c.id)}
-                  className="text-xs text-discord-red hover:text-white"
+            {credentials.map((c) => {
+              // Mirror the server-side REMOVE_LAST_CREDENTIAL guard locally
+              // so we never even send the request: with 2FA enforcement on,
+              // removing the last credential would either be rejected by
+              // the server or, worse on a buggy server, lock the account
+              // out of login entirely (see account-2fa.md "Account With No
+              // Registered Credentials").
+              const isLastWhileEnabled =
+                status === "enabled" && credentials.length === 1;
+              const isPendingRemoval = removingId === c.id;
+              return (
+                <li
+                  key={c.id}
+                  className="p-2 rounded bg-discord-dark-300 space-y-2"
                 >
-                  Remove
-                </button>
-              </li>
-            ))}
+                  <div className="flex justify-between items-center">
+                    <div className="text-sm">
+                      <div className="text-white font-medium">{c.name}</div>
+                      <div className="text-xs text-discord-text-muted">
+                        {TYPE_LABELS[c.type] ?? c.type}
+                        {c.createdAt ? ` · added ${c.createdAt}` : ""}
+                      </div>
+                    </div>
+                    {!isPendingRemoval && (
+                      <button
+                        type="button"
+                        onClick={() => setRemovingId(c.id)}
+                        className="text-xs text-discord-red hover:text-white"
+                      >
+                        Remove
+                      </button>
+                    )}
+                  </div>
+                  {isPendingRemoval && isLastWhileEnabled && (
+                    <div className="text-xs bg-discord-dark-400 p-2 rounded">
+                      <p className="text-discord-yellow font-medium mb-1">
+                        Can't remove your last 2FA credential
+                      </p>
+                      <p className="text-discord-text-muted mb-2">
+                        2FA is currently enforced on this account. Removing the
+                        only registered credential would lock you out of login.
+                        Add another credential first, or disable 2FA below.
+                      </p>
+                      <button
+                        type="button"
+                        onClick={() => setRemovingId(null)}
+                        className="px-2 py-1 rounded bg-discord-dark-100 text-white"
+                      >
+                        OK
+                      </button>
+                    </div>
+                  )}
+                  {isPendingRemoval && !isLastWhileEnabled && (
+                    <div className="text-xs bg-discord-dark-400 p-2 rounded">
+                      <p className="text-white mb-2">
+                        Remove "{c.name}"? You will no longer be able to use it
+                        as a second factor.
+                      </p>
+                      <div className="flex gap-2">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            twofaRemove(serverId, c.id);
+                            setRemovingId(null);
+                          }}
+                          className="px-2 py-1 rounded bg-discord-red text-white"
+                        >
+                          Confirm remove
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setRemovingId(null)}
+                          className="px-2 py-1 rounded bg-discord-dark-100 text-white"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </li>
+              );
+            })}
           </ul>
         )}
 

From d82124b79e6d57c9b9bdd2e1e47b5b42b8aade00 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Mon, 4 May 2026 05:02:43 +0100
Subject: [PATCH 05/16] Request draft/account-2fa CAP so the client merges it
 into server.capabilities

Without this CAP REQ, the server's CAP LS advertisement of draft/account-2fa
never lands on server.capabilities (the merger only writes from CAP ACK), so
EditServerModal's gate

  server?.capabilities?.some(c => c.startsWith("draft/account-2fa"))

stays false and the 'Manage two-factor authentication' button never renders.
---
 src/lib/irc/IRCClient.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/irc/IRCClient.ts b/src/lib/irc/IRCClient.ts
index aa6a0173..e38b264f 100644
--- a/src/lib/irc/IRCClient.ts
+++ b/src/lib/irc/IRCClient.ts
@@ -469,6 +469,7 @@ export class IRCClient implements IRCClientContext {
     "draft/metadata-2",
     "draft/message-redaction",
     "draft/account-registration",
+    "draft/account-2fa",
     "batch",
     "draft/multiline",
     "draft/typing",

From cca2abdf38493c1aa9b8583bc77c59dcc2da6d65 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Mon, 4 May 2026 05:15:50 +0100
Subject: [PATCH 06/16] =?UTF-8?q?Move=202FA=20management=20into=20UserSett?=
 =?UTF-8?q?ings=20=E2=86=92=20Account;=20raise=202FA=20modal=20z-index=20a?=
 =?UTF-8?q?bove=20LoadingOverlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button in EditServerModal was buried behind the 'Login to an account'
checkbox, so users wouldn't find it. Surface it in the always-reachable
Account category of UserSettings instead, gated on the currently selected
server's draft/account-2fa capability.

LoadingOverlay sits at z-[100001]; the 2FA / TOTP step-up modals were at
z-50 and got hidden behind it whenever the server reconnected. Bump both
modals to z-[100002].
---
 src/components/ui/TotpStepUpModal.tsx        |  2 +-
 src/components/ui/TwoFactorSettingsModal.tsx |  2 +-
 src/components/ui/UserSettings.tsx           | 29 ++++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/TotpStepUpModal.tsx b/src/components/ui/TotpStepUpModal.tsx
index da0acb0f..74d107c2 100644
--- a/src/components/ui/TotpStepUpModal.tsx
+++ b/src/components/ui/TotpStepUpModal.tsx
@@ -33,7 +33,7 @@ export const TotpStepUpModal: React.FC = () => {
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-[100002]">
       <div className="bg-discord-dark-200 rounded-lg w-full max-w-sm p-5">
         <h2 className="text-lg font-semibold mb-2 text-white">
           Two-factor authentication required
diff --git a/src/components/ui/TwoFactorSettingsModal.tsx b/src/components/ui/TwoFactorSettingsModal.tsx
index 5298e844..9a9de773 100644
--- a/src/components/ui/TwoFactorSettingsModal.tsx
+++ b/src/components/ui/TwoFactorSettingsModal.tsx
@@ -177,7 +177,7 @@ export const TwoFactorSettingsModal: React.FC<Props> = ({
   );
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-[100002]">
       <div className="bg-discord-dark-200 rounded-lg w-full max-w-lg p-5 max-h-[90vh] overflow-y-auto">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-lg font-semibold text-white">
diff --git a/src/components/ui/UserSettings.tsx b/src/components/ui/UserSettings.tsx
index 4ad0f8c4..1dae7e62 100644
--- a/src/components/ui/UserSettings.tsx
+++ b/src/components/ui/UserSettings.tsx
@@ -1299,8 +1299,37 @@ export const UserSettings: React.FC = React.memo(() => {
       );
     }
 
+    const supportsTwoFactor =
+      currentServer?.capabilities?.some((c) =>
+        c.startsWith("draft/account-2fa"),
+      ) ?? false;
+
     return (
       <div className="space-y-4">
+        {/* Two-Factor Authentication */}
+        {supportsTwoFactor && (
+          <div className="space-y-4 p-4 bg-discord-dark-400 rounded">
+            <h3 className="text-discord-text-normal font-medium">
+              Two-Factor Authentication
+            </h3>
+            <p className="text-discord-text-muted text-sm">
+              Add an authenticator app or biometric / security key to require a
+              second factor when logging in.
+            </p>
+            <button
+              type="button"
+              onClick={() => {
+                useStore
+                  .getState()
+                  .toggleTwoFactorSettings(true, currentServer.id);
+              }}
+              className="rounded bg-discord-button-secondary-default px-4 py-2 text-discord-text-normal hover:bg-discord-button-secondary-hover"
+            >
+              Manage two-factor authentication
+            </button>
+          </div>
+        )}
+
         {/* IRC Operator Authentication */}
         <div className="space-y-4 p-4 bg-discord-dark-400 rounded">
           <h3 className="text-discord-text-normal font-medium">IRC Operator</h3>

From b096e0b025be13c210805ecd87db70b07cf3b011 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Mon, 4 May 2026 05:26:32 +0100
Subject: [PATCH 07/16] Don't send spurious AUTHENTICATE + after SCRAM
 server-final

Per IRCv3 SASL, the server completes the exchange itself after server-final
by emitting 900/903 (or AUTHENTICATE 2FA-REQUIRED for step-up). UnrealIRCd's
saslserv reads our extra 'AUTHENTICATE +' as an empty/abort payload and
fires 904 SASL authentication failed, which dropped the SASL session before
the user could supply their TOTP code.
---
 src/store/handlers/auth.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/store/handlers/auth.ts b/src/store/handlers/auth.ts
index b1062885..f7de43bd 100644
--- a/src/store/handlers/auth.ts
+++ b/src/store/handlers/auth.ts
@@ -175,11 +175,11 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
           const ok = scramVerifyServerFinal(session.scram, serverFinal);
           if (!ok) {
             ircClient.sendRaw(serverId, "AUTHENTICATE *");
-          } else {
-            // Acknowledge by sending an empty client message; the server
-            // will then issue 900/903 (or AUTHENTICATE 2FA-REQUIRED).
-            ircClient.sendRaw(serverId, "AUTHENTICATE +");
           }
+          // On success the server completes the exchange itself by
+          // emitting 900/903 (normal) or AUTHENTICATE 2FA-REQUIRED
+          // (step-up). Sending another "AUTHENTICATE +" here is read
+          // as an empty/abort payload by saslserv and trips 904.
           session.step = 3;
           return;
         }

From 8fd71bb530e0aad7e0a9c6d87db0c8eda563cc7b Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sat, 9 May 2026 19:39:29 +0100
Subject: [PATCH 08/16] feat(auth): SASL IRCV3BEARER + per-server OAuth2/OIDC
 sign-in

Lets ObsidianIRC connect to obbyircd via OAuth2 instead of (or in
addition to) PLAIN. Each server entry now carries its own provider
config, so admins can point one server at Logto, another at Auth0,
Keycloak, Okta, or any custom OIDC issuer.

Flow

  1. In Edit Server -> "OAuth2 / OIDC sign-in", admin picks a preset
     (Logto, Auth0, Keycloak, Custom), pastes the issuer URL + client
     ID, optionally tweaks scopes/redirect URI, and clicks "Sign in".
  2. We discover the issuer's metadata, build an authorize URL with
     PKCE (S256), and open the IdP in a popup.
  3. The popup redirects to /oauth/callback (a new same-origin
     SPA route) which postMessages the auth code back to the opener
     and closes itself.
  4. The opener exchanges code+verifier at the token endpoint and
     stores the resulting access/id/refresh tokens on the server.
  5. On every connect, if the server has an access token, the SASL
     step picks IRCV3BEARER, sends "[authzid]\0jwt\0<token>" in 400-
     char AUTHENTICATE chunks, and the server validates the JWT
     against its configured oauth-provider/JWKS.

Notes

  * Tokens live in localStorage with the rest of the server config;
    expired tokens just yield a 904 and the user re-authenticates.
  * IRCClient gained an oauthBearerEnabled flag on connect() so CAP
    requests SASL and we don't race CAP END against AUTHENTICATE.
  * saslFrames.ts also exports buildOauthBearerPayload for the
    RFC 7628 mech, even though the wired-up flow uses IRCV3BEARER.

Tests cover OIDC discovery, PKCE verifier/challenge (incl. the
RFC 7636 vector), authorize-URL construction, and both SASL frame
builders + chunker behavior. Full suite passes (722 tests).
---
 src/App.tsx                           |   2 +
 src/components/OAuthCallback.tsx      |  60 +++++
 src/components/ui/EditServerModal.tsx |  10 +-
 src/components/ui/OAuthSection.tsx    | 315 ++++++++++++++++++++++++++
 src/lib/irc/IRCClient.ts              |  24 +-
 src/lib/oauth.ts                      | 287 +++++++++++++++++++++++
 src/lib/saslFrames.ts                 | Bin 0 -> 2079 bytes
 src/store/handlers/auth.ts            |  72 ++++--
 src/store/index.ts                    |   5 +
 src/types/index.ts                    |  14 ++
 tests/lib/oauth.test.ts               | 104 +++++++++
 tests/lib/saslFrames.test.ts          |  80 +++++++
 12 files changed, 947 insertions(+), 26 deletions(-)
 create mode 100644 src/components/OAuthCallback.tsx
 create mode 100644 src/components/ui/OAuthSection.tsx
 create mode 100644 src/lib/oauth.ts
 create mode 100644 src/lib/saslFrames.ts
 create mode 100644 tests/lib/oauth.test.ts
 create mode 100644 tests/lib/saslFrames.test.ts

diff --git a/src/App.tsx b/src/App.tsx
index a33a508a..06ae7369 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from "react";
 import { Route, Routes } from "react-router-dom";
 import AppLayout from "./components/layout/AppLayout";
 import { ServerNoticesPopup } from "./components/message/ServerNoticesPopup";
+import OAuthCallback from "./components/OAuthCallback";
 import PrivacyPolicy from "./components/PrivacyPolicy";
 import AddServerModal from "./components/ui/AddServerModal";
 import ChannelListModal from "./components/ui/ChannelListModal";
@@ -294,6 +295,7 @@ const App: React.FC = () => {
     <div className="h-screen overflow-hidden">
       <Routes>
         <Route path="/privacy" element={<PrivacyPolicy />} />
+        <Route path="/oauth/callback" element={<OAuthCallback />} />
         <Route
           path="/*"
           element={
diff --git a/src/components/OAuthCallback.tsx b/src/components/OAuthCallback.tsx
new file mode 100644
index 00000000..575a4289
--- /dev/null
+++ b/src/components/OAuthCallback.tsx
@@ -0,0 +1,60 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import type { OAuthCallbackMessage } from "../lib/oauth";
+
+// Loaded at /oauth/callback inside the popup window the OAuth flow opened.
+// Pulls `code` and `state` (or `error`) from the query string, sends them
+// back to the opener via postMessage, then closes itself.
+export const OAuthCallback: React.FC = () => {
+  const [message, setMessage] = useState("Completing sign-in...");
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get("code") ?? undefined;
+    const state = params.get("state") ?? "";
+    const error = params.get("error") ?? undefined;
+    const errorDescription = params.get("error_description") ?? undefined;
+
+    const payload: OAuthCallbackMessage = {
+      type: "obsidianirc:oauth-callback",
+      state,
+      code,
+      error,
+      errorDescription,
+    };
+
+    if (window.opener && window.opener !== window) {
+      try {
+        window.opener.postMessage(payload, window.location.origin);
+        setMessage("Sign-in complete. You can close this window.");
+        setTimeout(() => {
+          try {
+            window.close();
+          } catch {}
+        }, 300);
+        return;
+      } catch (err) {
+        setMessage(
+          `Could not return tokens to the main window: ${
+            err instanceof Error ? err.message : String(err)
+          }`,
+        );
+        return;
+      }
+    }
+    setMessage(
+      "OAuth callback was loaded outside its popup. You can close this tab.",
+    );
+  }, []);
+
+  return (
+    <div className="flex h-screen items-center justify-center bg-discord-dark-200 text-discord-text-normal">
+      <div className="max-w-md p-6 text-center">
+        <h1 className="text-xl font-bold mb-2">OAuth sign-in</h1>
+        <p className="text-discord-text-muted">{message}</p>
+      </div>
+    </div>
+  );
+};
+
+export default OAuthCallback;
diff --git a/src/components/ui/EditServerModal.tsx b/src/components/ui/EditServerModal.tsx
index e824a786..b7eda9be 100644
--- a/src/components/ui/EditServerModal.tsx
+++ b/src/components/ui/EditServerModal.tsx
@@ -2,7 +2,8 @@ import type React from "react";
 import { useState } from "react";
 import { FaQuestionCircle, FaTimes } from "react-icons/fa";
 import useStore, { loadSavedServers } from "../../store";
-import type { ServerConfig } from "../../types";
+import type { ServerConfig, ServerOAuthConfig } from "../../types";
+import { OAuthSection } from "./OAuthSection";
 import { TextInput } from "./TextInput";
 
 interface EditServerModalProps {
@@ -48,6 +49,10 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
   );
   const [forgetOperCredentials, setForgetOperCredentials] = useState(false);
 
+  const [oauthConfig, setOauthConfig] = useState<ServerOAuthConfig | undefined>(
+    serverConfig?.oauth,
+  );
+
   const [showServerPassword, setShowServerPassword] = useState(false);
   const [showAccount, setShowAccount] = useState(false);
   const [registerAccount, setRegisterAccount] = useState(false);
@@ -109,6 +114,7 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
               }
             : {}),
         operOnConnect,
+        oauth: oauthConfig,
       };
 
       updateServer(serverId, updatedConfig);
@@ -272,6 +278,8 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
             </div>
           )}
 
+          <OAuthSection initial={oauthConfig} onChange={setOauthConfig} />
+
           {/* IRC Operator Section */}
           <div className="mb-4 border-t border-discord-dark-300 pt-4">
             <h3 className="text-discord-text-normal text-lg font-semibold mb-3">
diff --git a/src/components/ui/OAuthSection.tsx b/src/components/ui/OAuthSection.tsx
new file mode 100644
index 00000000..7b426c09
--- /dev/null
+++ b/src/components/ui/OAuthSection.tsx
@@ -0,0 +1,315 @@
+import type React from "react";
+import { useState } from "react";
+import { beginOauthLogin, OAUTH_PRESETS } from "../../lib/oauth";
+import type { ServerOAuthConfig } from "../../types";
+import { TextInput } from "./TextInput";
+
+interface OAuthSectionProps {
+  // Initial config loaded from the saved server (may be undefined for a
+  // freshly added server).
+  initial: ServerOAuthConfig | undefined;
+  // Called whenever any field changes; the parent persists on submit.
+  onChange: (next: ServerOAuthConfig | undefined) => void;
+}
+
+// In-modal panel: pick a provider preset, fill in issuer + clientId, hit
+// "Sign in" to run the popup OAuth flow, and persist the resulting tokens
+// alongside the rest of the server config. Tokens are written to the
+// outer config via onChange so the parent's submit picks them up.
+export const OAuthSection: React.FC<OAuthSectionProps> = ({
+  initial,
+  onChange,
+}) => {
+  const [enabled, setEnabled] = useState(initial?.enabled ?? false);
+  const [presetId, setPresetId] = useState<string>(() => {
+    if (!initial?.issuer) return "custom";
+    const lower = initial.issuer.toLowerCase();
+    if (lower.includes("logto")) return "logto";
+    if (lower.includes("auth0")) return "auth0";
+    if (lower.includes("/realms/")) return "keycloak";
+    return "custom";
+  });
+  const preset =
+    OAUTH_PRESETS.find((p) => p.id === presetId) ?? OAUTH_PRESETS[0];
+
+  const [providerLabel, setProviderLabel] = useState(
+    initial?.providerLabel ?? preset.label,
+  );
+  const [issuer, setIssuer] = useState(initial?.issuer ?? "");
+  const [clientId, setClientId] = useState(initial?.clientId ?? "");
+  const [scopes, setScopes] = useState(initial?.scopes ?? preset.defaultScopes);
+  const [redirectUri, setRedirectUri] = useState(initial?.redirectUri ?? "");
+  const [accessToken, setAccessToken] = useState(initial?.accessToken ?? "");
+  const [idToken, setIdToken] = useState(initial?.idToken ?? "");
+  const [refreshToken, setRefreshToken] = useState(initial?.refreshToken ?? "");
+  const [tokenExpiresAt, setTokenExpiresAt] = useState<number | undefined>(
+    initial?.tokenExpiresAt,
+  );
+
+  const [signingIn, setSigningIn] = useState(false);
+  const [signInError, setSignInError] = useState<string | null>(null);
+
+  // Centralize the parent notification so every state setter goes through
+  // the same shape. Pass overrides for the field that just changed, since
+  // useState's setters won't have flushed yet.
+  const emit = (patch: Partial<ServerOAuthConfig> = {}) => {
+    if (!enabled && patch.enabled !== true) {
+      onChange(undefined);
+      return;
+    }
+    onChange({
+      enabled: patch.enabled ?? enabled,
+      providerLabel: patch.providerLabel ?? providerLabel,
+      issuer: patch.issuer ?? issuer,
+      clientId: patch.clientId ?? clientId,
+      scopes: patch.scopes ?? scopes,
+      redirectUri: patch.redirectUri ?? redirectUri ?? undefined,
+      accessToken: patch.accessToken ?? accessToken ?? undefined,
+      idToken: patch.idToken ?? idToken ?? undefined,
+      refreshToken: patch.refreshToken ?? refreshToken ?? undefined,
+      tokenExpiresAt: patch.tokenExpiresAt ?? tokenExpiresAt,
+    });
+  };
+
+  const onPresetChange = (next: string) => {
+    setPresetId(next);
+    const np = OAUTH_PRESETS.find((p) => p.id === next) ?? OAUTH_PRESETS[0];
+    if (!providerLabel.trim() || providerLabel === preset.label) {
+      setProviderLabel(np.label);
+    }
+    if (!scopes.trim()) {
+      setScopes(np.defaultScopes);
+    }
+  };
+
+  const handleSignIn = async () => {
+    setSignInError(null);
+    if (!issuer.trim()) {
+      setSignInError("Issuer URL is required.");
+      return;
+    }
+    if (!clientId.trim()) {
+      setSignInError("Client ID is required.");
+      return;
+    }
+    setSigningIn(true);
+    try {
+      const result = await beginOauthLogin({
+        issuer: issuer.trim(),
+        clientId: clientId.trim(),
+        scopes: scopes.trim() || undefined,
+        redirectUri: redirectUri.trim() || undefined,
+      });
+      setAccessToken(result.accessToken);
+      setIdToken(result.idToken ?? "");
+      setRefreshToken(result.refreshToken ?? "");
+      setTokenExpiresAt(result.tokenExpiresAt);
+      setEnabled(true);
+      emit({
+        enabled: true,
+        accessToken: result.accessToken,
+        idToken: result.idToken ?? undefined,
+        refreshToken: result.refreshToken ?? undefined,
+        tokenExpiresAt: result.tokenExpiresAt,
+      });
+    } catch (err) {
+      setSignInError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSigningIn(false);
+    }
+  };
+
+  const handleSignOut = () => {
+    setAccessToken("");
+    setIdToken("");
+    setRefreshToken("");
+    setTokenExpiresAt(undefined);
+    emit({
+      accessToken: undefined,
+      idToken: undefined,
+      refreshToken: undefined,
+      tokenExpiresAt: undefined,
+    });
+  };
+
+  const tokenStatus = (() => {
+    if (!accessToken) return "Not signed in";
+    if (tokenExpiresAt) {
+      const remaining = tokenExpiresAt - Math.floor(Date.now() / 1000);
+      if (remaining <= 0) return "Signed in (token expired)";
+      const mins = Math.floor(remaining / 60);
+      return `Signed in (token expires in ~${mins}m)`;
+    }
+    return "Signed in";
+  })();
+
+  return (
+    <div className="mb-4 border-t border-discord-dark-300 pt-4">
+      <h3 className="text-discord-text-normal text-lg font-semibold mb-3">
+        OAuth2 / OIDC sign-in
+      </h3>
+
+      <div className="mb-3 flex items-center space-x-2">
+        <input
+          type="checkbox"
+          id="oauthEnabled"
+          checked={enabled}
+          onChange={(e) => {
+            setEnabled(e.target.checked);
+            emit({ enabled: e.target.checked });
+          }}
+          className="accent-discord-accent rounded"
+        />
+        <label
+          htmlFor="oauthEnabled"
+          className="text-discord-text-muted text-sm"
+        >
+          Use OAuth2 to sign in (SASL IRCV3BEARER)
+        </label>
+      </div>
+
+      {enabled && (
+        <>
+          <div className="mb-3">
+            <label className="block text-discord-text-muted text-sm font-medium mb-1">
+              Provider preset
+            </label>
+            <select
+              value={presetId}
+              onChange={(e) => onPresetChange(e.target.value)}
+              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+            >
+              {OAUTH_PRESETS.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.label}
+                </option>
+              ))}
+            </select>
+            {preset.hint && (
+              <p className="text-discord-text-muted text-xs mt-1">
+                {preset.hint}
+              </p>
+            )}
+          </div>
+
+          <div className="mb-3">
+            <label className="block text-discord-text-muted text-sm font-medium mb-1">
+              Display name
+            </label>
+            <TextInput
+              value={providerLabel}
+              onChange={(e) => {
+                setProviderLabel(e.target.value);
+                emit({ providerLabel: e.target.value });
+              }}
+              placeholder="Logto"
+              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+            />
+          </div>
+
+          <div className="mb-3">
+            <label className="block text-discord-text-muted text-sm font-medium mb-1">
+              Issuer URL
+            </label>
+            <TextInput
+              value={issuer}
+              onChange={(e) => {
+                setIssuer(e.target.value);
+                emit({ issuer: e.target.value });
+              }}
+              placeholder="https://my-tenant.logto.app/oidc"
+              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+            />
+          </div>
+
+          <div className="mb-3">
+            <label className="block text-discord-text-muted text-sm font-medium mb-1">
+              Client ID
+            </label>
+            <TextInput
+              value={clientId}
+              onChange={(e) => {
+                setClientId(e.target.value);
+                emit({ clientId: e.target.value });
+              }}
+              placeholder="m0obbyircd1234"
+              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+            />
+          </div>
+
+          <div className="mb-3">
+            <label className="block text-discord-text-muted text-sm font-medium mb-1">
+              Scopes (space-separated)
+            </label>
+            <TextInput
+              value={scopes}
+              onChange={(e) => {
+                setScopes(e.target.value);
+                emit({ scopes: e.target.value });
+              }}
+              placeholder="openid"
+              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+            />
+          </div>
+
+          <div className="mb-3">
+            <label className="block text-discord-text-muted text-sm font-medium mb-1">
+              Redirect URI override (optional)
+            </label>
+            <TextInput
+              value={redirectUri}
+              onChange={(e) => {
+                setRedirectUri(e.target.value);
+                emit({ redirectUri: e.target.value });
+              }}
+              placeholder={`${window.location.origin}/oauth/callback`}
+              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+            />
+            <p className="text-discord-text-muted text-xs mt-1">
+              Default: <code>{`${window.location.origin}/oauth/callback`}</code>
+              . Register this in your IdP.
+            </p>
+          </div>
+
+          <div className="mb-3 text-xs text-discord-text-muted">
+            {tokenStatus}
+          </div>
+
+          {signInError && (
+            <div className="mb-3 text-sm text-discord-red">{signInError}</div>
+          )}
+
+          <div className="mb-3 flex gap-2">
+            <button
+              type="button"
+              onClick={handleSignIn}
+              disabled={signingIn}
+              className={`px-3 py-1 text-sm rounded font-medium ${
+                signingIn
+                  ? "bg-gray-600 text-gray-300 cursor-not-allowed"
+                  : "bg-discord-primary text-white hover:bg-opacity-80"
+              }`}
+            >
+              {signingIn
+                ? "Signing in..."
+                : accessToken
+                  ? `Re-sign in with ${providerLabel || "OAuth"}`
+                  : `Sign in with ${providerLabel || "OAuth"}`}
+            </button>
+            {accessToken && (
+              <button
+                type="button"
+                onClick={handleSignOut}
+                className="px-3 py-1 text-sm rounded font-medium bg-gray-600 text-gray-300 hover:bg-gray-500"
+              >
+                Sign out
+              </button>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default OAuthSection;
diff --git a/src/lib/irc/IRCClient.ts b/src/lib/irc/IRCClient.ts
index b8d7857d..7b35b3a5 100644
--- a/src/lib/irc/IRCClient.ts
+++ b/src/lib/irc/IRCClient.ts
@@ -496,6 +496,7 @@ export class IRCClient implements IRCClientContext {
     _saslAccountName?: string,
     _saslPassword?: string,
     serverId?: string,
+    oauthBearerEnabled?: boolean,
   ): Promise<Server> {
     const connectionKey = `${host}:${port}`;
 
@@ -604,8 +605,20 @@ export class IRCClient implements IRCClientContext {
         saslAccountName: _saslAccountName,
         saslPassword: _saslPassword,
       });
-      // Only enable SASL if we have both account name AND password
-      this.saslEnabled.set(server.id, !!(_saslAccountName && _saslPassword));
+      // Enable SASL if we have either PLAIN credentials or an OAuth bearer
+      // path. OAuth path is signaled by the caller; tokens themselves are
+      // read from storage by the auth handler at AUTHENTICATE time. On
+      // internal reconnect (oauthBearerEnabled === undefined) preserve the
+      // previously-set value so the OAuth flag survives reconnects.
+      const priorSaslEnabled = this.saslEnabled.get(server.id) ?? false;
+      const wantOauth =
+        oauthBearerEnabled === undefined
+          ? priorSaslEnabled
+          : !!oauthBearerEnabled;
+      this.saslEnabled.set(
+        server.id,
+        !!(_saslAccountName && _saslPassword) || wantOauth,
+      );
 
       // Store SASL credentials if provided
       if (_saslAccountName && _saslPassword) {
@@ -1358,6 +1371,13 @@ export class IRCClient implements IRCClientContext {
     this.triggerEvent("CAP_ACKNOWLEDGED", { serverId, key, capabilities });
   }
 
+  // Allow handlers (e.g. the OAuth path) to flip the SASL-pending flag
+  // before onCapAck's auto-send-CAP-END check runs. Called from the
+  // CAP_ACKNOWLEDGED listener that initiates AUTHENTICATE IRCV3BEARER.
+  setSaslEnabled(serverId: string, enabled: boolean): void {
+    this.saslEnabled.set(serverId, enabled);
+  }
+
   capEnd(_serverId: string) {}
 
   isCapNegotiationComplete(serverId: string): boolean {
diff --git a/src/lib/oauth.ts b/src/lib/oauth.ts
new file mode 100644
index 00000000..becfeb30
--- /dev/null
+++ b/src/lib/oauth.ts
@@ -0,0 +1,287 @@
+// OAuth2 / OIDC client used to obtain a bearer token that the IRC server
+// will accept via SASL IRCV3BEARER. We support any IdP that publishes an
+// OIDC discovery document and issues JWT access or ID tokens (Logto, Auth0,
+// Keycloak, Okta, ...).
+//
+// Flow:
+//  1. discoverOidc(issuer) -- caches metadata
+//  2. beginOauthLogin(config) -- opens a popup, waits for postMessage from
+//     /oauth/callback, exchanges the auth code for tokens, returns them
+//  3. caller stores the result on its ServerConfig.oauth and reconnects
+//
+// The redirect URI must be registered with the IdP. If the caller doesn't
+// override it we use `<origin>/oauth/callback`, which the SPA serves via
+// the OAuthCallback component.
+
+import type { ServerOAuthConfig } from "../types";
+
+export interface OidcMetadata {
+  issuer: string;
+  authorization_endpoint: string;
+  token_endpoint: string;
+  jwks_uri?: string;
+  end_session_endpoint?: string;
+  // Some providers omit this; we tolerate.
+  code_challenge_methods_supported?: string[];
+}
+
+export interface OAuthTokenResponse {
+  access_token: string;
+  id_token?: string;
+  refresh_token?: string;
+  token_type?: string;
+  expires_in?: number;
+  scope?: string;
+}
+
+export interface OAuthLoginResult {
+  accessToken: string;
+  idToken?: string;
+  refreshToken?: string;
+  tokenExpiresAt?: number;
+  scope?: string;
+}
+
+const discoveryCache = new Map<string, OidcMetadata>();
+
+export function defaultRedirectUri(): string {
+  return `${window.location.origin}/oauth/callback`;
+}
+
+export async function discoverOidc(issuer: string): Promise<OidcMetadata> {
+  const trimmed = issuer.replace(/\/+$/, "");
+  const cached = discoveryCache.get(trimmed);
+  if (cached) return cached;
+  const url = `${trimmed}/.well-known/openid-configuration`;
+  const res = await fetch(url, { credentials: "omit" });
+  if (!res.ok) {
+    throw new Error(`OIDC discovery failed (${res.status}) at ${url}`);
+  }
+  const meta = (await res.json()) as OidcMetadata;
+  if (!meta.authorization_endpoint || !meta.token_endpoint) {
+    throw new Error("OIDC metadata missing endpoints");
+  }
+  discoveryCache.set(trimmed, meta);
+  return meta;
+}
+
+// Crockford-safe base64url with no padding.
+function base64UrlEncode(bytes: Uint8Array): string {
+  let bin = "";
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+// 32 bytes of randomness encoded base64url -- yields 43 chars.
+export function generateCodeVerifier(): string {
+  const buf = new Uint8Array(32);
+  crypto.getRandomValues(buf);
+  return base64UrlEncode(buf);
+}
+
+export async function deriveCodeChallenge(verifier: string): Promise<string> {
+  const enc = new TextEncoder().encode(verifier);
+  const digest = await crypto.subtle.digest("SHA-256", enc);
+  return base64UrlEncode(new Uint8Array(digest));
+}
+
+export function buildAuthorizeUrl(
+  meta: OidcMetadata,
+  params: {
+    clientId: string;
+    redirectUri: string;
+    scope: string;
+    state: string;
+    codeChallenge: string;
+  },
+): string {
+  const u = new URL(meta.authorization_endpoint);
+  u.searchParams.set("response_type", "code");
+  u.searchParams.set("client_id", params.clientId);
+  u.searchParams.set("redirect_uri", params.redirectUri);
+  u.searchParams.set("scope", params.scope);
+  u.searchParams.set("state", params.state);
+  u.searchParams.set("code_challenge", params.codeChallenge);
+  u.searchParams.set("code_challenge_method", "S256");
+  return u.toString();
+}
+
+export async function exchangeCodeForToken(args: {
+  meta: OidcMetadata;
+  clientId: string;
+  redirectUri: string;
+  code: string;
+  codeVerifier: string;
+}): Promise<OAuthTokenResponse> {
+  const body = new URLSearchParams({
+    grant_type: "authorization_code",
+    code: args.code,
+    redirect_uri: args.redirectUri,
+    client_id: args.clientId,
+    code_verifier: args.codeVerifier,
+  });
+  const res = await fetch(args.meta.token_endpoint, {
+    method: "POST",
+    headers: { "content-type": "application/x-www-form-urlencoded" },
+    body: body.toString(),
+    credentials: "omit",
+  });
+  if (!res.ok) {
+    const txt = await res.text();
+    throw new Error(`Token exchange failed (${res.status}): ${txt}`);
+  }
+  return (await res.json()) as OAuthTokenResponse;
+}
+
+const POPUP_W = 480;
+const POPUP_H = 720;
+
+export interface OAuthCallbackMessage {
+  type: "obsidianirc:oauth-callback";
+  state: string;
+  code?: string;
+  error?: string;
+  errorDescription?: string;
+}
+
+// Run the full authorization-code-with-PKCE dance via a popup. Returns the
+// tokens. Caller is responsible for storing them on the server config.
+export async function beginOauthLogin(
+  cfg: Pick<
+    ServerOAuthConfig,
+    "issuer" | "clientId" | "scopes" | "redirectUri"
+  >,
+): Promise<OAuthLoginResult> {
+  const meta = await discoverOidc(cfg.issuer);
+  const codeVerifier = generateCodeVerifier();
+  const codeChallenge = await deriveCodeChallenge(codeVerifier);
+  const state = generateCodeVerifier();
+  const scope = cfg.scopes?.trim() || "openid";
+  const redirectUri = cfg.redirectUri?.trim() || defaultRedirectUri();
+  const url = buildAuthorizeUrl(meta, {
+    clientId: cfg.clientId,
+    redirectUri,
+    scope,
+    state,
+    codeChallenge,
+  });
+
+  const left = window.screenX + (window.outerWidth - POPUP_W) / 2;
+  const top = window.screenY + (window.outerHeight - POPUP_H) / 2;
+  const popup = window.open(
+    url,
+    "obsidianirc-oauth",
+    `width=${POPUP_W},height=${POPUP_H},left=${left},top=${top},popup=yes`,
+  );
+  if (!popup) {
+    throw new Error(
+      "Popup was blocked. Allow popups for this site and try again.",
+    );
+  }
+
+  const code = await new Promise<string>((resolve, reject) => {
+    let closed = false;
+    const cleanup = () => {
+      window.removeEventListener("message", onMessage);
+      clearInterval(closeTimer);
+    };
+    const onMessage = (event: MessageEvent) => {
+      // Same-origin only; the callback page is served by the SPA.
+      if (event.origin !== window.location.origin) return;
+      const data = event.data as OAuthCallbackMessage | undefined;
+      if (!data || data.type !== "obsidianirc:oauth-callback") return;
+      if (data.state !== state) {
+        cleanup();
+        reject(new Error("OAuth state mismatch (possible CSRF)"));
+        return;
+      }
+      cleanup();
+      try {
+        popup.close();
+      } catch {}
+      if (data.error) {
+        reject(
+          new Error(
+            data.errorDescription
+              ? `${data.error}: ${data.errorDescription}`
+              : data.error,
+          ),
+        );
+      } else if (data.code) {
+        resolve(data.code);
+      } else {
+        reject(new Error("OAuth callback returned no code"));
+      }
+    };
+    window.addEventListener("message", onMessage);
+    const closeTimer = setInterval(() => {
+      if (popup.closed && !closed) {
+        closed = true;
+        cleanup();
+        reject(new Error("OAuth popup was closed before completing"));
+      }
+    }, 500);
+  });
+
+  const tokens = await exchangeCodeForToken({
+    meta,
+    clientId: cfg.clientId,
+    redirectUri,
+    code,
+    codeVerifier,
+  });
+  const expiresAt = tokens.expires_in
+    ? Math.floor(Date.now() / 1000) + tokens.expires_in
+    : undefined;
+  return {
+    accessToken: tokens.access_token,
+    idToken: tokens.id_token,
+    refreshToken: tokens.refresh_token,
+    tokenExpiresAt: expiresAt,
+    scope: tokens.scope,
+  };
+}
+
+// Provider presets surfaced in the UI dropdown. "custom" lets the admin type
+// any issuer URL.
+export interface OAuthProviderPreset {
+  id: string;
+  label: string;
+  // Either a fully-qualified issuer (e.g. "https://accounts.google.com") or
+  // null for providers where the admin must paste their tenant URL (Logto).
+  issuer: string | null;
+  defaultScopes: string;
+  // Helper text shown under the issuer field when this preset is picked.
+  hint?: string;
+}
+
+export const OAUTH_PRESETS: OAuthProviderPreset[] = [
+  {
+    id: "custom",
+    label: "Custom OIDC provider",
+    issuer: null,
+    defaultScopes: "openid",
+    hint: "Any IdP that publishes /.well-known/openid-configuration and issues JWT access tokens.",
+  },
+  {
+    id: "logto",
+    label: "Logto",
+    issuer: null,
+    defaultScopes: "openid",
+    hint: "Paste your tenant URL, e.g. https://my-tenant.logto.app/oidc",
+  },
+  {
+    id: "auth0",
+    label: "Auth0",
+    issuer: null,
+    defaultScopes: "openid profile",
+    hint: "Issuer is https://<your-tenant>.us.auth0.com/",
+  },
+  {
+    id: "keycloak",
+    label: "Keycloak",
+    issuer: null,
+    defaultScopes: "openid",
+    hint: "Issuer is https://<host>/realms/<realm>",
+  },
+];
diff --git a/src/lib/saslFrames.ts b/src/lib/saslFrames.ts
new file mode 100644
index 0000000000000000000000000000000000000000..889bbdf67f2b38845c82e85664daa5657d52b2d5
GIT binary patch
literal 2079
zcma)7VQ<?u5bbCGii4105^O788f1YJCvXfG4O+BA;tVL#pr$0+;;c{_NjcFn|M%UI
zk}bClurIbqzPo$8d%Qb5gsW0y37C{a#56xShJsaD&Jqp$x!|$k2}Bj#j&DE0_08nZ
zw^!5g&GZJCOyKkQZuZ`-!_FbP%1sKAqlL*K;-HI67!VRy$AdvXPMKopPyyLZKh3Tu
z<JlDAw3I6i1@03I3_`waK#c@K7=uwvWI`^%+q3L?AT($$G04IiFN9>7^N2^}hd*P;
ztRe!q&y*%^S}Y02Wzx?V{e&47b~<q`wXt!(P2S&q`T!#`I_q>6rHqZpC6s1y>gyqB
zqmWE6ggd<3=~yXN!Al1~aZ@UZ8F+#je>PJY=LuJS5OVwF>)@=jY58*rf2Z=ttIBZg
zNA%nFiXmJq>ptTKA|a8N=bd4=MXtc7O@Uj3GyFTpQlX15<8o<I-05}$YtkLTttA~U
zFxmw3FhOcA;JtW2UR(B&$(fH~99PU>yXv(zhH%eHll~);2lzUGbCa*Q{AQ|xU+mTw
zl>T{*n^UC_AYztbHTYv;D(LrZ(KJ_UEIy`6tU02b2!O?LUSes9F}b3B8|YUJb6rMr
zh%+W0!w%{+SBPuM6p^B@RlI(C#hK#j4<~4!sU>EY3T53ixuv_?jT!R49D?`PlkwnR
z@N(jQ<UR}bcgbzm>kA>!l?F??UnZxctw*d41rB!`mzORE1$N-tX9I1P1hg?7D&;Ie
zh*jbI;H5@w-W<GaeQ(~(Z7sJP8vKqz>pU+Fo|9a6LiQ<2Eg<MpV(NvpLyJ&zV?jL_
z?Cl}62Q6!RSU-vHm5zS!7~cZcwbezM-UI&4y9xY$a&#ID2?DUxM}6|m6&6VL*vNzP
zIsq5p^*o1K@v6UOSxK+x>+|3@@CY+<G5|EOi9(Ii8U6fRJD<twe`}|v(GmnenrpMS
zK?=nUSw2Qwy&{>~(W@$;r@mU_@tml)Z-!#nN^C=ibJ7;}M63Cb*aR(8T90ZQ`raJ8
ztk#=-8zS7cp><<J-z^&_wz@SCJ*v-6pFQh+%jy+HSXI|Pf~_{b2%ga-VsZN22(eQG
zimcSYTJr%%0?h*<c?M4@m((>#8|}f6;q0R6<^}`yb?Ph;_L_vL>c@6sBi%BcHGL#H
zIc^^R_T}F{*v8^g;U-#x!J`q}KTt(}+ObcLcl{cuQRAp}6DY7gu}Rno85X5ZeGDGz
rOvKz5J?!}1Hr&3rO<j2cx;X&9v_LQ#;jjqye0p84{a9T%dY=CQ_n)9}

literal 0
HcmV?d00001

diff --git a/src/store/handlers/auth.ts b/src/store/handlers/auth.ts
index 7943a163..7c3d1c7c 100644
--- a/src/store/handlers/auth.ts
+++ b/src/store/handlers/auth.ts
@@ -1,11 +1,26 @@
 import { v4 as uuidv4 } from "uuid";
 import type { StoreApi } from "zustand";
 import ircClient from "../../lib/ircClient";
-import type { Message } from "../../types";
+import {
+  buildIrcv3BearerPayload,
+  chunkSaslPayload,
+} from "../../lib/saslFrames";
+import type { Message, ServerConfig, ServerOAuthConfig } from "../../types";
 import { normalizeHost } from "../helpers";
 import type { AppState } from "../index";
 import * as storage from "../localStorage";
 
+// OAuth path is active if the user enabled it AND we hold an access token.
+// We don't gate on local expiry: the server is the authority and surfaces a
+// useful 904 if the token is bad, prompting the user to re-authenticate.
+function getActiveOauth(
+  serv: ServerConfig | undefined,
+): ServerOAuthConfig | undefined {
+  if (!serv?.oauth?.enabled) return undefined;
+  if (!serv.oauth.accessToken) return undefined;
+  return serv.oauth;
+}
+
 export function registerAuthHandlers(store: StoreApi<AppState>): void {
   ircClient.on("CAP_ACKNOWLEDGED", ({ serverId, key, capabilities }) => {
     if (capabilities?.startsWith("draft/metadata")) {
@@ -30,11 +45,16 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     }
     if (key === "sasl") {
       const servers = storage.servers.load();
-      for (const serv of servers) {
-        if (serv.id !== serverId) continue;
-
-        if (!serv.saslEnabled) return;
+      const serv = servers.find((s) => s.id === serverId);
+      if (!serv) return;
+      if (getActiveOauth(serv)) {
+        // Flip the SASL-pending flag so IRCClient.onCapAck's race-y CAP END
+        // path waits for 903/904 before tearing down the negotiation.
+        ircClient.setSaslEnabled(serverId, true);
+        ircClient.sendRaw(serverId, "AUTHENTICATE IRCV3BEARER");
+        return;
       }
+      if (!serv.saslEnabled) return;
       ircClient.sendRaw(serverId, "AUTHENTICATE PLAIN");
     }
   });
@@ -45,30 +65,31 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     // Don't respond to AUTHENTICATE if CAP negotiation is already complete
     if (ircClient.isCapNegotiationComplete(serverId)) return;
 
-    let user: string | undefined;
-    let pass: string | undefined;
     const servers = storage.servers.load();
-    for (const serv of servers) {
-      if (serv.id !== serverId) continue;
-
-      if (!serv.saslEnabled) return;
-
-      user = serv.saslAccountName?.length
-        ? serv.saslAccountName
-        : serv.nickname;
-      pass = serv.saslPassword ? atob(serv.saslPassword) : undefined;
-    }
-    if (!user || !pass)
-      // wtf happened lol
+    const serv = servers.find((s) => s.id === serverId);
+    if (!serv) return;
+
+    const oauth = getActiveOauth(serv);
+    if (oauth?.accessToken) {
+      const b64 = buildIrcv3BearerPayload({ token: oauth.accessToken });
+      for (const chunk of chunkSaslPayload(b64)) {
+        ircClient.sendRaw(serverId, `AUTHENTICATE ${chunk}`);
+      }
       return;
+    }
+
+    if (!serv.saslEnabled) return;
+    const user = serv.saslAccountName?.length
+      ? serv.saslAccountName
+      : serv.nickname;
+    const pass = serv.saslPassword ? atob(serv.saslPassword) : undefined;
+    if (!user || !pass) return;
 
     ircClient.sendRaw(
       serverId,
       `AUTHENTICATE ${btoa(`${user}\x00${user}\x00${pass}`)}`,
     );
     // Note: CAP END will be sent by the IRC client when SASL authentication completes (903/904-907 responses)
-    // ircClient.sendRaw(serverId, "CAP END");
-    // ircClient.userOnConnect(serverId);
   });
 
   // Handle CAP LS to get informational capabilities like unrealircd.org/link-security
@@ -179,10 +200,15 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
 
     // Check if SASL was requested and acknowledged, AND we have credentials
     if (caps.some((cap) => cap.startsWith("sasl"))) {
-      // Only prevent CAP END if we actually have SASL credentials
+      // Only prevent CAP END if we actually have SASL credentials --
+      // either a PLAIN password or an OAuth bearer token.
       const servers = storage.servers.load();
       const savedServer = servers.find((s) => s.id === serverId);
-      if (savedServer?.saslEnabled && savedServer?.saslPassword) {
+      const hasPlain =
+        savedServer?.saslEnabled && Boolean(savedServer?.saslPassword);
+      const hasOauth =
+        savedServer?.oauth?.enabled && Boolean(savedServer?.oauth?.accessToken);
+      if (hasPlain || hasOauth) {
         preventCapEnd = true;
       }
     }
diff --git a/src/store/index.ts b/src/store/index.ts
index 04acaaa4..599b9cf5 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -985,6 +985,10 @@ const useStore = create<AppState>((set, get) => ({
         (s) => normalizeHost(s.host) === normalizeHost(host) && s.port === port,
       );
 
+      const oauthBearerEnabled = !!(
+        existingSavedServer?.oauth?.enabled &&
+        existingSavedServer.oauth.accessToken
+      );
       const server = await ircClient.connect(
         name,
         host,
@@ -994,6 +998,7 @@ const useStore = create<AppState>((set, get) => ({
         saslAccountName,
         saslPassword,
         existingSavedServer?.id, // Pass the saved server ID if it exists
+        oauthBearerEnabled,
       );
 
       // Save server to localStorage
diff --git a/src/types/index.ts b/src/types/index.ts
index 8d66cef7..617c5c35 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -69,6 +69,20 @@ export interface ServerConfig {
   operPassword?: string;
   operOnConnect?: boolean;
   addedAt?: number; // Timestamp when server was added (ms since epoch)
+  oauth?: ServerOAuthConfig;
+}
+
+export interface ServerOAuthConfig {
+  enabled: boolean;
+  providerLabel: string;
+  issuer: string;
+  clientId: string;
+  scopes?: string;
+  redirectUri?: string;
+  accessToken?: string;
+  idToken?: string;
+  refreshToken?: string;
+  tokenExpiresAt?: number;
 }
 
 export interface Channel {
diff --git a/tests/lib/oauth.test.ts b/tests/lib/oauth.test.ts
new file mode 100644
index 00000000..54778aea
--- /dev/null
+++ b/tests/lib/oauth.test.ts
@@ -0,0 +1,104 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  buildAuthorizeUrl,
+  defaultRedirectUri,
+  deriveCodeChallenge,
+  discoverOidc,
+  generateCodeVerifier,
+} from "../../src/lib/oauth";
+
+describe("generateCodeVerifier / deriveCodeChallenge", () => {
+  it("produces a 43-char base64url string with no padding", () => {
+    const v = generateCodeVerifier();
+    expect(v).toMatch(/^[A-Za-z0-9_-]{43}$/);
+  });
+
+  it("derives an S256 challenge of the same shape", async () => {
+    const v = generateCodeVerifier();
+    const c = await deriveCodeChallenge(v);
+    expect(c).toMatch(/^[A-Za-z0-9_-]{43}$/);
+    // Must be deterministic for the same verifier.
+    expect(await deriveCodeChallenge(v)).toBe(c);
+  });
+
+  it("matches a known RFC 7636 vector", async () => {
+    const verifier = "dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk";
+    const expected = "E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM";
+    expect(await deriveCodeChallenge(verifier)).toBe(expected);
+  });
+});
+
+describe("buildAuthorizeUrl", () => {
+  it("includes PKCE + state + scope params", () => {
+    const url = buildAuthorizeUrl(
+      {
+        issuer: "https://idp.example/",
+        authorization_endpoint: "https://idp.example/oauth/authorize",
+        token_endpoint: "https://idp.example/oauth/token",
+      },
+      {
+        clientId: "abc",
+        redirectUri: "https://app.example/oauth/callback",
+        scope: "openid profile",
+        state: "STATE",
+        codeChallenge: "CHAL",
+      },
+    );
+    const u = new URL(url);
+    expect(u.searchParams.get("client_id")).toBe("abc");
+    expect(u.searchParams.get("response_type")).toBe("code");
+    expect(u.searchParams.get("redirect_uri")).toBe(
+      "https://app.example/oauth/callback",
+    );
+    expect(u.searchParams.get("scope")).toBe("openid profile");
+    expect(u.searchParams.get("state")).toBe("STATE");
+    expect(u.searchParams.get("code_challenge")).toBe("CHAL");
+    expect(u.searchParams.get("code_challenge_method")).toBe("S256");
+  });
+});
+
+describe("defaultRedirectUri", () => {
+  it("derives <origin>/oauth/callback from window.location", () => {
+    expect(defaultRedirectUri()).toBe(
+      `${window.location.origin}/oauth/callback`,
+    );
+  });
+});
+
+describe("discoverOidc", () => {
+  const fetchMock = vi.fn();
+  beforeEach(() => {
+    fetchMock.mockReset();
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+  });
+  afterEach(() => {
+    fetchMock.mockReset();
+  });
+
+  it("hits /.well-known/openid-configuration and returns parsed metadata", async () => {
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        issuer: "https://idp.example/",
+        authorization_endpoint: "https://idp.example/oauth/authorize",
+        token_endpoint: "https://idp.example/oauth/token",
+      }),
+    });
+    const meta = await discoverOidc("https://idp.example/test/");
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(fetchMock.mock.calls[0][0]).toBe(
+      "https://idp.example/test/.well-known/openid-configuration",
+    );
+    expect(meta.token_endpoint).toBe("https://idp.example/oauth/token");
+  });
+
+  it("rejects when the document misses required endpoints", async () => {
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ issuer: "https://idp.example/missing/" }),
+    });
+    await expect(
+      discoverOidc("https://idp.example/missing/"),
+    ).rejects.toThrow();
+  });
+});
diff --git a/tests/lib/saslFrames.test.ts b/tests/lib/saslFrames.test.ts
new file mode 100644
index 00000000..a5d6caf8
--- /dev/null
+++ b/tests/lib/saslFrames.test.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildIrcv3BearerPayload,
+  buildOauthBearerPayload,
+  chunkSaslPayload,
+} from "../../src/lib/saslFrames";
+
+function decodeB64(b64: string): string {
+  const bin = atob(b64);
+  let out = "";
+  for (let i = 0; i < bin.length; i++) {
+    const ch = bin.charCodeAt(i);
+    out += ch === 0 ? "\\0" : String.fromCharCode(ch);
+  }
+  return out;
+}
+
+describe("buildIrcv3BearerPayload", () => {
+  it("formats [authzid]\\0type\\0token with empty authzid by default", () => {
+    const b64 = buildIrcv3BearerPayload({ token: "TOK" });
+    expect(decodeB64(b64)).toBe("\\0jwt\\0TOK");
+  });
+
+  it("respects an explicit authzid", () => {
+    const b64 = buildIrcv3BearerPayload({
+      token: "TOK",
+      authzid: "alice",
+      tokenType: "oauth2",
+    });
+    expect(decodeB64(b64)).toBe("alice\\0oauth2\\0TOK");
+  });
+
+  it("preserves multibyte UTF-8 in the token", () => {
+    const b64 = buildIrcv3BearerPayload({ token: "héllo" });
+    const bin = atob(b64);
+    // 0x00 j w t 0x00 h é(2 bytes utf-8: c3 a9) l l o
+    expect(bin.length).toBe(1 + 3 + 1 + 6);
+  });
+});
+
+describe("buildOauthBearerPayload", () => {
+  it("emits the RFC 7628 GS2 frame", () => {
+    const b64 = buildOauthBearerPayload({ token: "TOK", authzid: "alice" });
+    const decoded = atob(b64);
+    expect(decoded).toBe("n,a=alice,\x01auth=Bearer TOK\x01\x01");
+  });
+
+  it("includes optional host/port hints", () => {
+    const b64 = buildOauthBearerPayload({
+      token: "TOK",
+      host: "irc.example.com",
+      port: 6697,
+    });
+    const decoded = atob(b64);
+    expect(decoded).toBe(
+      "n,a=,\x01port=6697\x01host=irc.example.com\x01auth=Bearer TOK\x01\x01",
+    );
+  });
+});
+
+describe("chunkSaslPayload", () => {
+  it("returns the input as a single chunk when shorter than 400", () => {
+    expect(chunkSaslPayload("abc")).toEqual(["abc"]);
+  });
+
+  it("splits at every 400-character boundary", () => {
+    const s = "x".repeat(950);
+    const chunks = chunkSaslPayload(s);
+    expect(chunks.length).toBe(3);
+    expect(chunks[0].length).toBe(400);
+    expect(chunks[1].length).toBe(400);
+    expect(chunks[2].length).toBe(150);
+  });
+
+  it("appends a + sentinel when the final chunk is exactly 400 chars", () => {
+    const s = "x".repeat(800);
+    const chunks = chunkSaslPayload(s);
+    expect(chunks).toEqual(["x".repeat(400), "x".repeat(400), "+"]);
+  });
+});

From 68140b41eb73f0a9b72bbe0576169b8c03cf7d5d Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sat, 9 May 2026 20:30:29 +0100
Subject: [PATCH 09/16] feat(auth): bake OAuth config into the build for
 lock-mode deployments

When the client is built with VITE_HIDE_SERVER_LIST=true (single-server
deploy where users can't add their own servers), admins can now bake
the OAuth provider settings into the build via VITE_DEFAULT_OAUTH_*
env vars. Users see a "Sign in with <ProviderLabel>" button instead of
an editable issuer/client_id form -- they don't need to know what
Logto, Auth0 or Keycloak even is.

  VITE_DEFAULT_OAUTH_PROVIDER_LABEL  e.g. "Logto"
  VITE_DEFAULT_OAUTH_ISSUER          e.g. https://my-tenant.logto.app/oidc
  VITE_DEFAULT_OAUTH_CLIENT_ID
  VITE_DEFAULT_OAUTH_SCOPES          optional, defaults "openid"
  VITE_DEFAULT_OAUTH_REDIRECT_URI    optional, defaults <origin>/oauth/callback

Both the welcome AddServerModal and EditServerModal pull
getBuiltinOAuthConfig() and pass it as `locked` to OAuthSection,
which in locked mode renders only the Sign-in / Sign-out actions
plus a token status line. The provider fields are no longer editable.

In multi-server builds (VITE_HIDE_SERVER_LIST unset), behavior is
unchanged: the editable per-server OAuth panel still drives.

Tests cover getBuiltinOAuthConfig() across all four
present/missing-field combinations. Dockerfile + BUILD.md updated.
---
 BUILD.md                              | 15 +++++
 Dockerfile                            | 10 +++
 src/components/ui/AddServerModal.tsx  | 22 +++++++
 src/components/ui/EditServerModal.tsx |  7 ++-
 src/components/ui/OAuthSection.tsx    | 87 +++++++++++++++++++++++++--
 src/lib/oauth.ts                      | 29 +++++++++
 src/store/index.ts                    | 21 ++++++-
 src/vite-env.d.ts                     |  5 ++
 tests/lib/oauth.test.ts               | 44 ++++++++++++++
 vite.config.ts                        |  5 ++
 10 files changed, 235 insertions(+), 10 deletions(-)

diff --git a/BUILD.md b/BUILD.md
index 4c624ac4..518a4aae 100644
--- a/BUILD.md
+++ b/BUILD.md
@@ -30,6 +30,18 @@ VITE_HIDE_SERVER_LIST=true
 # Optional comma-separated list of trusted media URLs
 # Useful for chat bridges like Matterbridge or Matrix bridges that host media
 VITE_TRUSTED_MEDIA_URLS="https://matterbridge.example.com,https://matrix-media.example.com"
+
+# Optional OAuth2 / OIDC defaults. Only surfaced when VITE_HIDE_SERVER_LIST=true,
+# i.e. single-server lock-mode. Users see a "Sign in with <label>" button
+# instead of having to enter the issuer/client_id themselves. Requires the
+# IRC server to support SASL IRCV3BEARER (e.g. obbyircd's oauth-provider).
+VITE_DEFAULT_OAUTH_PROVIDER_LABEL="Logto"
+VITE_DEFAULT_OAUTH_ISSUER="https://my-tenant.logto.app/oidc"
+VITE_DEFAULT_OAUTH_CLIENT_ID="m0obbyircd1234"
+# Optional, defaults to "openid"
+VITE_DEFAULT_OAUTH_SCOPES="openid"
+# Optional, defaults to <origin>/oauth/callback. Must be registered with the IdP.
+VITE_DEFAULT_OAUTH_REDIRECT_URI="https://chat.example.com/oauth/callback"
 ```
 
 ### Docker
@@ -47,6 +59,9 @@ docker build \
   --build-arg VITE_DEFAULT_IRC_CHANNELS="#general,#random" \
   --build-arg VITE_HIDE_SERVER_LIST=false \
   --build-arg VITE_TRUSTED_MEDIA_URLS="https://matterbridge.example.com,https://matrix-media.example.com" \
+  --build-arg VITE_DEFAULT_OAUTH_PROVIDER_LABEL="Logto" \
+  --build-arg VITE_DEFAULT_OAUTH_ISSUER="https://my-tenant.logto.app/oidc" \
+  --build-arg VITE_DEFAULT_OAUTH_CLIENT_ID="m0obbyircd1234" \
   -t obsidianirc .
 ```
 
diff --git a/Dockerfile b/Dockerfile
index 22b44aec..9dd3b57a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -5,12 +5,22 @@ ARG VITE_DEFAULT_IRC_SERVER_NAME
 ARG VITE_DEFAULT_IRC_CHANNELS
 ARG VITE_HIDE_SERVER_LIST
 ARG VITE_TRUSTED_MEDIA_URLS
+ARG VITE_DEFAULT_OAUTH_PROVIDER_LABEL
+ARG VITE_DEFAULT_OAUTH_ISSUER
+ARG VITE_DEFAULT_OAUTH_CLIENT_ID
+ARG VITE_DEFAULT_OAUTH_SCOPES
+ARG VITE_DEFAULT_OAUTH_REDIRECT_URI
 
 ENV VITE_DEFAULT_IRC_SERVER=$VITE_DEFAULT_IRC_SERVER
 ENV VITE_DEFAULT_IRC_SERVER_NAME=$VITE_DEFAULT_IRC_SERVER_NAME
 ENV VITE_DEFAULT_IRC_CHANNELS=$VITE_DEFAULT_IRC_CHANNELS
 ENV VITE_HIDE_SERVER_LIST=$VITE_HIDE_SERVER_LIST
 ENV VITE_TRUSTED_MEDIA_URLS=$VITE_TRUSTED_MEDIA_URLS
+ENV VITE_DEFAULT_OAUTH_PROVIDER_LABEL=$VITE_DEFAULT_OAUTH_PROVIDER_LABEL
+ENV VITE_DEFAULT_OAUTH_ISSUER=$VITE_DEFAULT_OAUTH_ISSUER
+ENV VITE_DEFAULT_OAUTH_CLIENT_ID=$VITE_DEFAULT_OAUTH_CLIENT_ID
+ENV VITE_DEFAULT_OAUTH_SCOPES=$VITE_DEFAULT_OAUTH_SCOPES
+ENV VITE_DEFAULT_OAUTH_REDIRECT_URI=$VITE_DEFAULT_OAUTH_REDIRECT_URI
 
 WORKDIR /app
 COPY package*.json ./
diff --git a/src/components/ui/AddServerModal.tsx b/src/components/ui/AddServerModal.tsx
index 62fba956..ed73de61 100644
--- a/src/components/ui/AddServerModal.tsx
+++ b/src/components/ui/AddServerModal.tsx
@@ -3,8 +3,11 @@ import { useEffect, useState } from "react";
 import { FaQuestionCircle } from "react-icons/fa";
 import BaseModal from "../../lib/modal/BaseModal";
 import { Button, ModalBody, ModalFooter } from "../../lib/modal/components";
+import { getBuiltinOAuthConfig } from "../../lib/oauth";
 import { isTauri } from "../../lib/platformUtils";
 import useStore from "../../store";
+import type { ServerOAuthConfig } from "../../types";
+import { OAuthSection } from "./OAuthSection";
 import { TextInput } from "./TextInput";
 
 export const AddServerModal: React.FC = () => {
@@ -40,9 +43,19 @@ export const AddServerModal: React.FC = () => {
   );
   const [registerEmail, setRegisterEmail] = useState("");
   const [registerPassword, setRegisterPassword] = useState("");
+  const [oauthConfig, setOauthConfig] = useState<ServerOAuthConfig | undefined>(
+    undefined,
+  );
 
   const [error, setError] = useState("");
 
+  // In single-server lock-mode, surface the deployer-baked OAuth config so
+  // the welcome screen exposes a "Sign in with X" CTA instead of the full
+  // editable provider form.
+  const lockedOauth = __HIDE_SERVER_LIST__
+    ? getBuiltinOAuthConfig()
+    : undefined;
+
   useEffect(() => {
     setServerName(prefillServerDetails?.name || "");
     setServerHost(prefillServerDetails?.host || "");
@@ -121,6 +134,7 @@ export const AddServerModal: React.FC = () => {
         registerEmail,
         registerPassword,
         true,
+        oauthConfig,
       );
       toggleAddServerModal(false);
     } catch (err) {
@@ -238,6 +252,14 @@ export const AddServerModal: React.FC = () => {
             </>
           )}
 
+          {lockedOauth && (
+            <OAuthSection
+              initial={oauthConfig}
+              onChange={setOauthConfig}
+              locked={lockedOauth}
+            />
+          )}
+
           <div className="mb-4">
             <label className="block text-discord-text-muted text-sm font-medium mb-1">
               Nickname
diff --git a/src/components/ui/EditServerModal.tsx b/src/components/ui/EditServerModal.tsx
index b7eda9be..9ca55d3b 100644
--- a/src/components/ui/EditServerModal.tsx
+++ b/src/components/ui/EditServerModal.tsx
@@ -1,6 +1,7 @@
 import type React from "react";
 import { useState } from "react";
 import { FaQuestionCircle, FaTimes } from "react-icons/fa";
+import { getBuiltinOAuthConfig } from "../../lib/oauth";
 import useStore, { loadSavedServers } from "../../store";
 import type { ServerConfig, ServerOAuthConfig } from "../../types";
 import { OAuthSection } from "./OAuthSection";
@@ -278,7 +279,11 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
             </div>
           )}
 
-          <OAuthSection initial={oauthConfig} onChange={setOauthConfig} />
+          <OAuthSection
+            initial={oauthConfig}
+            onChange={setOauthConfig}
+            locked={__HIDE_SERVER_LIST__ ? getBuiltinOAuthConfig() : undefined}
+          />
 
           {/* IRC Operator Section */}
           <div className="mb-4 border-t border-discord-dark-300 pt-4">
diff --git a/src/components/ui/OAuthSection.tsx b/src/components/ui/OAuthSection.tsx
index 7b426c09..f21d92d6 100644
--- a/src/components/ui/OAuthSection.tsx
+++ b/src/components/ui/OAuthSection.tsx
@@ -10,17 +10,37 @@ interface OAuthSectionProps {
   initial: ServerOAuthConfig | undefined;
   // Called whenever any field changes; the parent persists on submit.
   onChange: (next: ServerOAuthConfig | undefined) => void;
+  // When provided, the panel runs in "locked" mode: the deployer baked
+  // these provider settings in via VITE_DEFAULT_OAUTH_* env vars, the
+  // editable issuer/client/scopes inputs are hidden, and OAuth is
+  // implicitly enabled. Used in __HIDE_SERVER_LIST__ deployments.
+  locked?: {
+    providerLabel: string;
+    issuer: string;
+    clientId: string;
+    scopes?: string;
+    redirectUri?: string;
+  };
 }
 
 // In-modal panel: pick a provider preset, fill in issuer + clientId, hit
 // "Sign in" to run the popup OAuth flow, and persist the resulting tokens
 // alongside the rest of the server config. Tokens are written to the
 // outer config via onChange so the parent's submit picks them up.
+//
+// In `locked` mode the provider fields are baked into the build; the user
+// only sees the Sign-in / Sign-out actions and a token status line.
 export const OAuthSection: React.FC<OAuthSectionProps> = ({
   initial,
   onChange,
+  locked,
 }) => {
-  const [enabled, setEnabled] = useState(initial?.enabled ?? false);
+  // In locked mode OAuth is implicit (always enabled) and the user can't
+  // toggle it off. In editable mode the checkbox controls visibility of
+  // the provider fields.
+  const [enabled, setEnabled] = useState(
+    locked ? true : (initial?.enabled ?? false),
+  );
   const [presetId, setPresetId] = useState<string>(() => {
     if (!initial?.issuer) return "custom";
     const lower = initial.issuer.toLowerCase();
@@ -33,12 +53,18 @@ export const OAuthSection: React.FC<OAuthSectionProps> = ({
     OAUTH_PRESETS.find((p) => p.id === presetId) ?? OAUTH_PRESETS[0];
 
   const [providerLabel, setProviderLabel] = useState(
-    initial?.providerLabel ?? preset.label,
+    locked?.providerLabel ?? initial?.providerLabel ?? preset.label,
+  );
+  const [issuer, setIssuer] = useState(locked?.issuer ?? initial?.issuer ?? "");
+  const [clientId, setClientId] = useState(
+    locked?.clientId ?? initial?.clientId ?? "",
+  );
+  const [scopes, setScopes] = useState(
+    locked?.scopes ?? initial?.scopes ?? preset.defaultScopes,
+  );
+  const [redirectUri, setRedirectUri] = useState(
+    locked?.redirectUri ?? initial?.redirectUri ?? "",
   );
-  const [issuer, setIssuer] = useState(initial?.issuer ?? "");
-  const [clientId, setClientId] = useState(initial?.clientId ?? "");
-  const [scopes, setScopes] = useState(initial?.scopes ?? preset.defaultScopes);
-  const [redirectUri, setRedirectUri] = useState(initial?.redirectUri ?? "");
   const [accessToken, setAccessToken] = useState(initial?.accessToken ?? "");
   const [idToken, setIdToken] = useState(initial?.idToken ?? "");
   const [refreshToken, setRefreshToken] = useState(initial?.refreshToken ?? "");
@@ -143,6 +169,55 @@ export const OAuthSection: React.FC<OAuthSectionProps> = ({
     return "Signed in";
   })();
 
+  // ---- Locked-mode render: provider settings are baked in, just show
+  // the Sign-in/Sign-out actions plus the current token status. ----
+  if (locked) {
+    return (
+      <div className="mb-4 border-t border-discord-dark-300 pt-4">
+        <h3 className="text-discord-text-normal text-lg font-semibold mb-1">
+          Sign in with {locked.providerLabel}
+        </h3>
+        <p className="text-discord-text-muted text-xs mb-3">
+          Configured by your network administrator.
+        </p>
+        <div className="mb-3 text-xs text-discord-text-muted">
+          {tokenStatus}
+        </div>
+        {signInError && (
+          <div className="mb-3 text-sm text-discord-red">{signInError}</div>
+        )}
+        <div className="mb-3 flex gap-2">
+          <button
+            type="button"
+            onClick={handleSignIn}
+            disabled={signingIn}
+            className={`px-3 py-1 text-sm rounded font-medium ${
+              signingIn
+                ? "bg-gray-600 text-gray-300 cursor-not-allowed"
+                : "bg-discord-primary text-white hover:bg-opacity-80"
+            }`}
+          >
+            {signingIn
+              ? "Signing in..."
+              : accessToken
+                ? `Re-sign in with ${locked.providerLabel}`
+                : `Sign in with ${locked.providerLabel}`}
+          </button>
+          {accessToken && (
+            <button
+              type="button"
+              onClick={handleSignOut}
+              className="px-3 py-1 text-sm rounded font-medium bg-gray-600 text-gray-300 hover:bg-gray-500"
+            >
+              Sign out
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // ---- Editable-mode render (default, multi-server build). ----
   return (
     <div className="mb-4 border-t border-discord-dark-300 pt-4">
       <h3 className="text-discord-text-normal text-lg font-semibold mb-3">
diff --git a/src/lib/oauth.ts b/src/lib/oauth.ts
index becfeb30..3703da7c 100644
--- a/src/lib/oauth.ts
+++ b/src/lib/oauth.ts
@@ -242,6 +242,35 @@ export async function beginOauthLogin(
   };
 }
 
+// Build-time defaults baked in via VITE_DEFAULT_OAUTH_* env vars. Only
+// surfaced when __HIDE_SERVER_LIST__ is on (single-server lock mode). The
+// admin sets `issuer` + `clientId` in their .env at deploy time, and the
+// UI hides the editable provider fields and just shows a "Sign in with X"
+// button so users never have to copy/paste the OIDC settings themselves.
+//
+// Returns undefined when not configured (i.e. multi-server build) so the
+// per-server editable form stays in charge.
+export function getBuiltinOAuthConfig():
+  | {
+      providerLabel: string;
+      issuer: string;
+      clientId: string;
+      scopes?: string;
+      redirectUri?: string;
+    }
+  | undefined {
+  const issuer = __DEFAULT_OAUTH_ISSUER__;
+  const clientId = __DEFAULT_OAUTH_CLIENT_ID__;
+  if (!issuer || !clientId) return undefined;
+  return {
+    providerLabel: __DEFAULT_OAUTH_PROVIDER_LABEL__ || "OAuth",
+    issuer,
+    clientId,
+    scopes: __DEFAULT_OAUTH_SCOPES__ || undefined,
+    redirectUri: __DEFAULT_OAUTH_REDIRECT_URI__ || undefined,
+  };
+}
+
 // Provider presets surfaced in the UI dropdown. "custom" lets the admin type
 // any issuer URL.
 export interface OAuthProviderPreset {
diff --git a/src/store/index.ts b/src/store/index.ts
index 599b9cf5..be9748e1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -10,6 +10,7 @@ import type {
   PrivateChat,
   Server,
   ServerConfig,
+  ServerOAuthConfig,
   User,
   WhoisData,
 } from "../types";
@@ -547,6 +548,7 @@ export interface AppState {
     registerEmail?: string,
     registerPassword?: string,
     isNewServer?: boolean,
+    oauthConfig?: ServerOAuthConfig,
   ) => Promise<Server>;
   disconnect: (serverId: string) => void;
   joinChannel: (serverId: string, channelName: string) => void;
@@ -957,7 +959,8 @@ const useStore = create<AppState>((set, get) => ({
     registerAccount,
     registerEmail,
     registerPassword,
-    isNewServer = false,
+    isNewServer,
+    oauthConfig,
   ) => {
     // Check if already connected to this server
     const state = get();
@@ -985,9 +988,20 @@ const useStore = create<AppState>((set, get) => ({
         (s) => normalizeHost(s.host) === normalizeHost(host) && s.port === port,
       );
 
+      // Auth-handler reads OAuth out of localStorage when SASL fires, so
+      // persist any caller-supplied oauth config BEFORE opening the
+      // socket -- otherwise the first SASL turn would race past it.
+      const mergedOauth = oauthConfig ?? existingSavedServer?.oauth;
+      if (oauthConfig && existingSavedServer?.id) {
+        const pre = loadSavedServers();
+        const idx = pre.findIndex((s) => s.id === existingSavedServer.id);
+        if (idx !== -1) {
+          pre[idx] = { ...pre[idx], oauth: oauthConfig };
+          saveServersToLocalStorage(pre);
+        }
+      }
       const oauthBearerEnabled = !!(
-        existingSavedServer?.oauth?.enabled &&
-        existingSavedServer.oauth.accessToken
+        mergedOauth?.enabled && mergedOauth.accessToken
       );
       const server = await ircClient.connect(
         name,
@@ -1039,6 +1053,7 @@ const useStore = create<AppState>((set, get) => ({
         skipLinkSecurityWarning: savedServer?.skipLinkSecurityWarning,
         // Preserve existing addedAt timestamp or set current time for new servers
         addedAt: savedServer?.addedAt || Date.now(),
+        oauth: mergedOauth ?? savedServer?.oauth,
       });
       saveServersToLocalStorage(updatedServers);
 
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index fd2362f5..13e6f584 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -6,5 +6,10 @@ declare const __DEFAULT_IRC_SERVER__: string;
 declare const __DEFAULT_IRC_SERVER_NAME__: string;
 declare const __DEFAULT_IRC_CHANNELS__: string[];
 declare const __HIDE_SERVER_LIST__: boolean;
+declare const __DEFAULT_OAUTH_PROVIDER_LABEL__: string | undefined;
+declare const __DEFAULT_OAUTH_ISSUER__: string | undefined;
+declare const __DEFAULT_OAUTH_CLIENT_ID__: string | undefined;
+declare const __DEFAULT_OAUTH_SCOPES__: string | undefined;
+declare const __DEFAULT_OAUTH_REDIRECT_URI__: string | undefined;
 declare const __BACKEND_URL__: string;
 declare const __TRUSTED_MEDIA_URLS__: string[];
diff --git a/tests/lib/oauth.test.ts b/tests/lib/oauth.test.ts
index 54778aea..06a00597 100644
--- a/tests/lib/oauth.test.ts
+++ b/tests/lib/oauth.test.ts
@@ -5,6 +5,7 @@ import {
   deriveCodeChallenge,
   discoverOidc,
   generateCodeVerifier,
+  getBuiltinOAuthConfig,
 } from "../../src/lib/oauth";
 
 describe("generateCodeVerifier / deriveCodeChallenge", () => {
@@ -65,6 +66,49 @@ describe("defaultRedirectUri", () => {
   });
 });
 
+describe("getBuiltinOAuthConfig", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("returns undefined when issuer is missing", () => {
+    vi.stubGlobal("__DEFAULT_OAUTH_ISSUER__", undefined);
+    vi.stubGlobal("__DEFAULT_OAUTH_CLIENT_ID__", "abc");
+    expect(getBuiltinOAuthConfig()).toBeUndefined();
+  });
+
+  it("returns undefined when client_id is missing", () => {
+    vi.stubGlobal("__DEFAULT_OAUTH_ISSUER__", "https://idp.example/");
+    vi.stubGlobal("__DEFAULT_OAUTH_CLIENT_ID__", undefined);
+    expect(getBuiltinOAuthConfig()).toBeUndefined();
+  });
+
+  it("returns the baked-in config when both issuer and client_id are set", () => {
+    vi.stubGlobal("__DEFAULT_OAUTH_PROVIDER_LABEL__", "Logto");
+    vi.stubGlobal("__DEFAULT_OAUTH_ISSUER__", "https://my.logto.app/oidc");
+    vi.stubGlobal("__DEFAULT_OAUTH_CLIENT_ID__", "spa-id");
+    vi.stubGlobal("__DEFAULT_OAUTH_SCOPES__", "openid profile");
+    vi.stubGlobal(
+      "__DEFAULT_OAUTH_REDIRECT_URI__",
+      "https://app.example/oauth/callback",
+    );
+    expect(getBuiltinOAuthConfig()).toEqual({
+      providerLabel: "Logto",
+      issuer: "https://my.logto.app/oidc",
+      clientId: "spa-id",
+      scopes: "openid profile",
+      redirectUri: "https://app.example/oauth/callback",
+    });
+  });
+
+  it("falls back to a generic provider label", () => {
+    vi.stubGlobal("__DEFAULT_OAUTH_PROVIDER_LABEL__", undefined);
+    vi.stubGlobal("__DEFAULT_OAUTH_ISSUER__", "https://idp.example/");
+    vi.stubGlobal("__DEFAULT_OAUTH_CLIENT_ID__", "abc");
+    expect(getBuiltinOAuthConfig()?.providerLabel).toBe("OAuth");
+  });
+});
+
 describe("discoverOidc", () => {
   const fetchMock = vi.fn();
   beforeEach(() => {
diff --git a/vite.config.ts b/vite.config.ts
index 4ec1662c..ea4fc61c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,6 +24,11 @@ export default defineConfig(({ mode }) => {
       '__DEFAULT_IRC_SERVER_NAME__': JSON.stringify(process.env.VITE_DEFAULT_IRC_SERVER_NAME),
       '__DEFAULT_IRC_CHANNELS__': process.env.VITE_DEFAULT_IRC_CHANNELS ? process.env.VITE_DEFAULT_IRC_CHANNELS.replace(/^['"]|['"]$/g, '').split(',').map(ch => ch.trim()) : [],
       '__HIDE_SERVER_LIST__': process.env.VITE_HIDE_SERVER_LIST === 'true',
+      '__DEFAULT_OAUTH_PROVIDER_LABEL__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_PROVIDER_LABEL),
+      '__DEFAULT_OAUTH_ISSUER__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_ISSUER),
+      '__DEFAULT_OAUTH_CLIENT_ID__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_CLIENT_ID),
+      '__DEFAULT_OAUTH_SCOPES__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_SCOPES),
+      '__DEFAULT_OAUTH_REDIRECT_URI__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_REDIRECT_URI),
       '__BACKEND_URL__': JSON.stringify(process.env.VITE_BACKEND_URL || 'http://localhost:8080'),
       '__TRUSTED_MEDIA_URLS__': process.env.VITE_TRUSTED_MEDIA_URLS ? process.env.VITE_TRUSTED_MEDIA_URLS.replace(/^['"]|['"]$/g, '').split(',').map(url => url.trim()) : [],
     },

From fe7e9e5b8f39b9a60407081c75128ae76efcb362 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sat, 9 May 2026 20:51:27 +0100
Subject: [PATCH 10/16] refactor(EditServerModal): tabbed left-sidebar layout

The Edit Server modal had grown to seven sections stacked in one
column (server info, account login toggles, server password, SASL,
OAuth, operator, register-account dead code). Migrate it to the same
left-sidebar tabbed shell as ChannelSettingsModal:

  General        - network name, host, port, nickname
  Authentication - SASL PLAIN account/password + server password
  OAuth2         - the OAuthSection (locked or editable)
  IRC Operator   - oper credentials + on-connect toggle + Oper Up

Desktop renders sidebar + main content in a single 80vh dialog;
mobile mirrors ChannelSettingsModal's two-step categories ->
content navigation with back chevron, identical safe-area
insets, and an always-visible Cancel/Update footer.

Validation errors now jump back to the General tab (mobile: into
the content view) so the user sees what's missing instead of
silently failing on submit.

Drops the dead "Register for an account" section from this
modal: the registerAccount/email/password state was collected but
never sent on submit -- registration only happens at server-add
time via AddServerModal -> store.connect().

Behavior preserved:

  * SASL PLAIN account/password (was: state initialized empty,
    btoa'd into config on submit). Now also exposes "(stored --
    leave blank to keep)" placeholder when a SASL/oper/server
    password already exists, fixing the prior surprise where the
    field appeared blank but was actually preserved on save.
  * Operator credentials, on-connect toggle, "Forget Credentials"
    + "Oper Up" buttons.
  * OAuth: locked-mode (HIDE_SERVER_LIST + builtin config) still
    surfaces only Sign in / Sign out; editable mode still gets the
    full preset/issuer/clientId/scopes form.

Implementation also picks up modal-behavior parity with
ChannelSettingsModal: createPortal rendering, useModalBehavior for
Esc + click-outside, animated fade-in on mobile.

No tests changed -- this is a UI-shell refactor over the same
state shape; existing 726-test suite continues to pass.
---
 src/components/ui/EditServerModal.tsx | 764 +++++++++++++++-----------
 1 file changed, 450 insertions(+), 314 deletions(-)

diff --git a/src/components/ui/EditServerModal.tsx b/src/components/ui/EditServerModal.tsx
index 9ca55d3b..2824d643 100644
--- a/src/components/ui/EditServerModal.tsx
+++ b/src/components/ui/EditServerModal.tsx
@@ -1,6 +1,18 @@
 import type React from "react";
-import { useState } from "react";
-import { FaQuestionCircle, FaTimes } from "react-icons/fa";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  FaChevronLeft,
+  FaChevronRight,
+  FaKey,
+  FaQuestionCircle,
+  FaServer,
+  FaShieldAlt,
+  FaTimes,
+  FaUserShield,
+} from "react-icons/fa";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { useModalBehavior } from "../../hooks/useModalBehavior";
 import { getBuiltinOAuthConfig } from "../../lib/oauth";
 import useStore, { loadSavedServers } from "../../store";
 import type { ServerConfig, ServerOAuthConfig } from "../../types";
@@ -12,6 +24,14 @@ interface EditServerModalProps {
   onClose: () => void;
 }
 
+type TabId = "general" | "auth" | "oauth" | "operator";
+
+interface TabDef {
+  id: TabId;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
 export const EditServerModal: React.FC<EditServerModalProps> = ({
   serverId,
   onClose,
@@ -22,7 +42,7 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
   const savedServers = loadSavedServers();
   const serverConfig = savedServers.find((s) => s.id === serverId);
 
-  // Initialize state with current server values
+  // ---- Form state ----
   const [serverName, setServerName] = useState(
     serverConfig?.name || server?.name || "",
   );
@@ -34,15 +54,14 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
   );
   const [nickname, setNickname] = useState(serverConfig?.nickname || "");
   const [password, setPassword] = useState("");
+
   const [saslAccountName, setSaslAccountName] = useState(
     serverConfig?.saslAccountName || "",
   );
+  // Stored as base64 to match the existing localStorage format. State holds
+  // the raw user input; we only encode on submit.
   const [saslPassword, setSaslPassword] = useState("");
-  const [saslEnabled, setSaslEnabled] = useState(
-    serverConfig?.saslEnabled ? "true" : "",
-  );
 
-  // IRC Operator fields
   const [operName, setOperName] = useState(serverConfig?.operUsername || "");
   const [operPassword, setOperPassword] = useState("");
   const [operOnConnect, setOperOnConnect] = useState(
@@ -54,46 +73,70 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
     serverConfig?.oauth,
   );
 
-  const [showServerPassword, setShowServerPassword] = useState(false);
-  const [showAccount, setShowAccount] = useState(false);
-  const [registerAccount, setRegisterAccount] = useState(false);
-  const [registerEmail, setRegisterEmail] = useState("");
-  const [registerPassword, setRegisterPassword] = useState("");
-
   const [error, setError] = useState("");
 
+  // ---- Layout state ----
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const [mobileView, setMobileView] = useState<"categories" | "content">(
+    "categories",
+  );
+  const [activeTab, setActiveTab] = useState<TabId>("general");
+  const { getBackdropProps, getContentProps } = useModalBehavior({
+    onClose,
+    isOpen: true,
+  });
+
+  // Reset mobile navigation when the device width crosses the breakpoint so
+  // a desktop -> mobile transition doesn't leave the user stuck on the
+  // content view with no way back.
+  useEffect(() => {
+    if (isMobile) setMobileView("categories");
+  }, [isMobile]);
+
+  const lockedOauth = __HIDE_SERVER_LIST__
+    ? getBuiltinOAuthConfig()
+    : undefined;
+
+  const tabs: TabDef[] = [
+    { id: "general", label: "General", icon: FaServer },
+    { id: "auth", label: "Authentication", icon: FaKey },
+    { id: "oauth", label: "OAuth2", icon: FaShieldAlt },
+    { id: "operator", label: "IRC Operator", icon: FaUserShield },
+  ];
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
-    // Default server name to server host if empty
     const finalServerName = serverName.trim() || serverHost.trim();
-
-    // Default SASL account name to nickname if empty
     const finalSaslAccountName = saslAccountName.trim() || nickname.trim();
 
     if (!finalServerName) {
       setError("Server name is required");
+      setActiveTab("general");
+      if (isMobile) setMobileView("content");
       return;
     }
-
     if (!serverHost.trim()) {
       setError("Server host is required");
+      setActiveTab("general");
+      if (isMobile) setMobileView("content");
       return;
     }
-
     if (!serverPort.trim() || Number.isNaN(Number.parseInt(serverPort, 10))) {
       setError("Valid server port is required");
+      setActiveTab("general");
+      if (isMobile) setMobileView("content");
       return;
     }
-
     if (!nickname.trim()) {
       setError("Nickname is required");
+      setActiveTab("general");
+      if (isMobile) setMobileView("content");
       return;
     }
 
     try {
-      // Update server configuration
       const updatedConfig: Partial<ServerConfig> = {
         name: finalServerName,
         host: serverHost.trim(),
@@ -101,9 +144,11 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
         nickname: nickname.trim(),
         password: password.trim() || undefined,
         saslAccountName: finalSaslAccountName || undefined,
-        saslPassword: saslPassword.trim() || undefined,
+        // The existing storage format keeps SASL passwords base64-encoded.
+        saslPassword: saslPassword.trim()
+          ? btoa(saslPassword.trim())
+          : undefined,
         saslEnabled: !!saslPassword.trim(),
-        // Handle oper credentials: only update if explicitly provided, or forget if requested
         ...(forgetOperCredentials
           ? { operUsername: undefined, operPassword: undefined }
           : operName.trim()
@@ -117,13 +162,10 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
         operOnConnect,
         oauth: oauthConfig,
       };
-
       updateServer(serverId, updatedConfig);
       onClose();
     } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : "Unknown error occurred";
-      setError(errorMessage);
+      setError(err instanceof Error ? err.message : "Unknown error occurred");
     }
   };
 
@@ -135,327 +177,421 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
     }
   };
 
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 modal-container">
-      <div className="bg-discord-dark-200 rounded-lg w-full max-w-md p-5 max-h-[90vh] overflow-y-auto">
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-white text-xl font-bold">Edit Server</h2>
-          <button
-            onClick={onClose}
-            className="text-discord-text-muted hover:text-white"
-          >
-            <FaTimes />
-          </button>
+  const inputClass =
+    "w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary";
+  const labelClass = "block text-discord-text-muted text-sm font-medium mb-1";
+
+  // ----- Tab content panels -----
+  const generalPanel = (
+    <div className="space-y-4">
+      <div>
+        <label className={labelClass}>Network name</label>
+        <TextInput
+          value={serverName}
+          onChange={(e) => setServerName(e.target.value)}
+          placeholder="ExampleNET"
+          className={inputClass}
+        />
+      </div>
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <label className={labelClass}>Server host</label>
+          <TextInput
+            value={serverHost}
+            onChange={(e) => setServerHost(e.target.value)}
+            placeholder="irc.example.com"
+            className={inputClass}
+          />
+        </div>
+        <div className="w-28">
+          <label className={labelClass}>
+            Port{" "}
+            <FaQuestionCircle
+              title="Only secure websockets are supported"
+              className="inline-block text-discord-text-muted cursor-help text-xs ml-1"
+            />
+          </label>
+          <TextInput
+            value={serverPort}
+            onChange={(e) => setServerPort(e.target.value)}
+            placeholder="443"
+            className={inputClass}
+          />
         </div>
+      </div>
+      <div>
+        <label className={labelClass}>Nickname</label>
+        <TextInput
+          value={nickname}
+          onChange={(e) => setNickname(e.target.value)}
+          placeholder="YourNickname"
+          className={inputClass}
+        />
+      </div>
+    </div>
+  );
 
-        <form onSubmit={handleSubmit}>
-          <div className="mb-4">
-            <label className="block text-discord-text-muted text-sm font-medium mb-1">
-              Network Name
-            </label>
+  const authPanel = (
+    <div className="space-y-6">
+      <section>
+        <h4 className="text-discord-text-normal font-medium mb-2">
+          SASL PLAIN account
+        </h4>
+        <p className="text-discord-text-muted text-xs mb-3">
+          Logged-in users authenticate via SASL PLAIN before joining channels.
+          Leave blank to connect anonymously.
+        </p>
+        <div className="grid sm:grid-cols-2 gap-3">
+          <div>
+            <label className={labelClass}>Account name</label>
             <TextInput
-              value={serverName}
-              onChange={(e) => setServerName(e.target.value)}
-              placeholder="ExampleNET"
-              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+              value={saslAccountName}
+              onChange={(e) => setSaslAccountName(e.target.value)}
+              placeholder={nickname || "account"}
+              className={inputClass}
             />
           </div>
-
-          <div className="mb-4 flex gap-4">
-            <div className="flex-1">
-              <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                Server Host
-              </label>
-              <TextInput
-                value={serverHost}
-                onChange={(e) => setServerHost(e.target.value)}
-                placeholder="irc.example.com"
-                className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-              />
-            </div>
-
-            <div className="w-28">
-              <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                Port{" "}
-                <FaQuestionCircle
-                  title="Only secure websockets are supported"
-                  className="inline-block text-discord-text-muted cursor-help text-xs ml-1"
-                />
-              </label>
-              <TextInput
-                value={serverPort}
-                onChange={(e) => setServerPort(e.target.value)}
-                placeholder="443"
-                className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-              />
-            </div>
-          </div>
-
-          <div className="mb-4">
-            <label className="block text-discord-text-muted text-sm font-medium mb-1">
-              Nickname
-            </label>
+          <div>
+            <label className={labelClass}>Password</label>
             <TextInput
-              value={nickname}
-              onChange={(e) => setNickname(e.target.value)}
-              placeholder="YourNickname"
-              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+              type="password"
+              value={saslPassword}
+              onChange={(e) => setSaslPassword(e.target.value)}
+              placeholder={
+                serverConfig?.saslPassword
+                  ? "(stored — leave blank to keep)"
+                  : "Password"
+              }
+              className={inputClass}
             />
           </div>
+        </div>
+      </section>
+
+      <section>
+        <h4 className="text-discord-text-normal font-medium mb-2">
+          Server password
+        </h4>
+        <p className="text-discord-text-muted text-xs mb-3">
+          Some networks require a PASS line during connection registration
+          (separate from your account password).
+        </p>
+        <TextInput
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder={
+            serverConfig?.password
+              ? "(stored — leave blank to keep)"
+              : "Server password"
+          }
+          className={inputClass}
+        />
+      </section>
+    </div>
+  );
 
-          <div className="mt-4 space-y-2">
-            <div className="mb-3 flex gap-4">
-              <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
-                  id="showAccount"
-                  checked={showAccount}
-                  onChange={() => setShowAccount(!showAccount)}
-                  className="accent-discord-accent rounded"
-                />
-                <label
-                  htmlFor="showAccount"
-                  className="text-discord-text-muted text-sm"
-                >
-                  Login to an account
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
-                  id="showServerPassword"
-                  checked={showServerPassword}
-                  onChange={() => setShowServerPassword(!showServerPassword)}
-                  className="accent-discord-accent rounded"
-                />
-                <label
-                  htmlFor="showServerPassword"
-                  className="text-discord-text-muted text-sm"
-                >
-                  Use server password
-                </label>
-              </div>
-            </div>
-          </div>
-
-          {showServerPassword && (
-            <div className="mb-4">
-              <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                Server Password
-              </label>
-              <TextInput
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Server Password"
-                className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-              />
-            </div>
-          )}
-
-          {showAccount && (
-            <div className="mb-4 flex gap-4">
-              <div className="mb-4">
-                <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                  Account details
-                </label>
-                <TextInput
-                  value={saslAccountName || nickname}
-                  onChange={(e) => setSaslAccountName(e.target.value)}
-                  placeholder="SASL Account Name"
-                  className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-                />
-              </div>
-              <div className="mb-4">
-                <label className="block text-discord-text-muted text-sm font-medium mb-1 mt-6" />
-                <TextInput
-                  type="password"
-                  value={saslPassword ? atob(saslPassword) : ""}
-                  onChange={(e) => setSaslPassword(btoa(e.target.value))}
-                  placeholder="Password"
-                  className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-                />
-              </div>
-            </div>
-          )}
+  // OAuthSection's existing border-t separator harmlessly sits under the
+  // tab title; no wrapper needed.
+  const oauthPanel = (
+    <OAuthSection
+      initial={oauthConfig}
+      onChange={setOauthConfig}
+      locked={lockedOauth}
+    />
+  );
 
-          <OAuthSection
-            initial={oauthConfig}
-            onChange={setOauthConfig}
-            locked={__HIDE_SERVER_LIST__ ? getBuiltinOAuthConfig() : undefined}
+  const operatorPanel = (
+    <div className="space-y-4">
+      <p className="text-discord-text-muted text-xs">
+        Stored credentials are sent as <code>OPER name password</code> when
+        "Oper on connect" is on, or via the manual "Oper up" button below.
+      </p>
+      <div className="flex gap-3">
+        <div className="flex-1">
+          <label className={labelClass}>Oper name</label>
+          <TextInput
+            value={operName}
+            onChange={(e) => setOperName(e.target.value)}
+            placeholder="Operator username"
+            className={inputClass}
+          />
+        </div>
+        <div className="flex-1">
+          <label className={labelClass}>Oper password</label>
+          <TextInput
+            type="password"
+            value={operPassword}
+            onChange={(e) => setOperPassword(e.target.value)}
+            placeholder={
+              serverConfig?.operPassword
+                ? "(stored — leave blank to keep)"
+                : "Operator password"
+            }
+            className={inputClass}
+          />
+        </div>
+      </div>
+      <div className="text-xs text-discord-text-muted">
+        {forgetOperCredentials ? (
+          <span className="text-red-400">
+            ⚠️ Existing oper credentials will be forgotten
+          </span>
+        ) : operName.trim() && operPassword.trim() ? (
+          <span className="text-green-400">
+            ✓ Both username and password will be updated
+          </span>
+        ) : operName.trim() ? (
+          <span className="text-blue-400">
+            ✓ Username will be updated, password preserved
+          </span>
+        ) : serverConfig?.operUsername ? (
+          <span>Existing credentials will be preserved</span>
+        ) : (
+          <span>No oper credentials configured</span>
+        )}
+      </div>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <input
+            type="checkbox"
+            id="operOnConnect"
+            checked={operOnConnect}
+            onChange={() => setOperOnConnect(!operOnConnect)}
+            className="accent-discord-accent rounded"
           />
+          <label
+            htmlFor="operOnConnect"
+            className="text-discord-text-muted text-sm"
+          >
+            Oper on connect
+          </label>
+        </div>
+        <div className="flex gap-2">
+          {serverConfig?.operUsername && (
+            <button
+              type="button"
+              onClick={() => setForgetOperCredentials(!forgetOperCredentials)}
+              className={`px-3 py-1 text-sm rounded font-medium ${
+                forgetOperCredentials
+                  ? "bg-red-600 text-white hover:bg-red-700"
+                  : "bg-gray-600 text-gray-300 hover:bg-gray-500"
+              }`}
+            >
+              {forgetOperCredentials ? "Will Forget" : "Forget Credentials"}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={handleOperUp}
+            disabled={!operName.trim() || !operPassword.trim()}
+            className={`px-3 py-1 text-sm rounded font-medium ${
+              operName.trim() && operPassword.trim()
+                ? "bg-discord-primary text-white hover:bg-opacity-80"
+                : "bg-gray-600 text-gray-400 cursor-not-allowed"
+            }`}
+          >
+            Oper Up
+          </button>
+        </div>
+      </div>
+    </div>
+  );
 
-          {/* IRC Operator Section */}
-          <div className="mb-4 border-t border-discord-dark-300 pt-4">
-            <h3 className="text-discord-text-normal text-lg font-semibold mb-3">
-              IRC Operator
-            </h3>
+  const renderTab = () => {
+    switch (activeTab) {
+      case "general":
+        return generalPanel;
+      case "auth":
+        return authPanel;
+      case "oauth":
+        return oauthPanel;
+      case "operator":
+        return operatorPanel;
+    }
+  };
 
-            <div className="mb-4 flex gap-4">
-              <div className="flex-1">
-                <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                  Oper Name
-                </label>
-                <TextInput
-                  value={operName}
-                  onChange={(e) => setOperName(e.target.value)}
-                  placeholder="Operator username"
-                  className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-                />
-              </div>
-              <div className="flex-1">
-                <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                  Oper Password
-                </label>
-                <TextInput
-                  type="password"
-                  value={operPassword}
-                  onChange={(e) => setOperPassword(e.target.value)}
-                  placeholder="Operator password"
-                  className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-                />
-              </div>
-            </div>
+  // ----- Footer (Cancel / Save) shared by both layouts -----
+  const footer = (
+    <div className="flex justify-end gap-3 p-4 border-t border-discord-dark-500 flex-shrink-0">
+      <button
+        type="button"
+        onClick={onClose}
+        className="px-4 py-2 text-discord-text-normal hover:underline"
+      >
+        Cancel
+      </button>
+      <button
+        type="submit"
+        form="edit-server-form"
+        disabled={isConnecting}
+        className={`px-4 py-2 bg-discord-primary text-white rounded font-medium ${
+          isConnecting ? "opacity-70 cursor-not-allowed" : "hover:bg-opacity-80"
+        }`}
+      >
+        {isConnecting ? "Updating..." : "Update server"}
+      </button>
+    </div>
+  );
 
-            <div className="mb-4 text-xs text-discord-text-muted">
-              {forgetOperCredentials ? (
-                <span className="text-red-400">
-                  ⚠️ Existing oper credentials will be forgotten
-                </span>
-              ) : operName.trim() && operPassword.trim() ? (
-                <span className="text-green-400">
-                  ✓ Both username and password will be updated
-                </span>
-              ) : operName.trim() ? (
-                <span className="text-blue-400">
-                  ✓ Username will be updated, password preserved
-                </span>
-              ) : serverConfig?.operUsername ? (
-                <span>Existing credentials will be preserved</span>
-              ) : (
-                <span>No oper credentials configured</span>
-              )}
+  // ----- Mobile: categories list -> content view (matches ChannelSettingsModal) -----
+  if (isMobile) {
+    const portalTarget = document.getElementById("root") || document.body;
+    return createPortal(
+      <div
+        className="fixed inset-0 z-[9999] bg-discord-dark-200 flex flex-col animate-in fade-in"
+        style={{
+          paddingTop: "var(--safe-area-inset-top, 0px)",
+          paddingBottom: "var(--safe-area-inset-bottom, 0px)",
+          paddingLeft: "var(--safe-area-inset-left, 0px)",
+          paddingRight: "var(--safe-area-inset-right, 0px)",
+        }}
+      >
+        {mobileView === "categories" ? (
+          <>
+            <div className="flex items-center justify-between p-4 border-b border-discord-dark-500 flex-shrink-0">
+              <h2 className="text-white text-lg font-semibold">Edit server</h2>
+              <button
+                onClick={onClose}
+                className="p-1 rounded-lg hover:bg-discord-dark-400 text-discord-text-muted hover:text-white"
+                aria-label="Close"
+              >
+                <FaTimes />
+              </button>
             </div>
-
-            <div className="mb-4 flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
-                  id="operOnConnect"
-                  checked={operOnConnect}
-                  onChange={() => setOperOnConnect(!operOnConnect)}
-                  className="accent-discord-accent rounded"
-                />
-                <label
-                  htmlFor="operOnConnect"
-                  className="text-discord-text-muted text-sm"
-                >
-                  Oper on connect
-                </label>
-              </div>
-
-              <div className="flex gap-2">
-                {serverConfig?.operUsername && (
+            <div className="flex-1 overflow-y-auto">
+              {tabs.map((tab) => {
+                const Icon = tab.icon;
+                return (
                   <button
-                    type="button"
-                    onClick={() =>
-                      setForgetOperCredentials(!forgetOperCredentials)
-                    }
-                    className={`px-3 py-1 text-sm rounded font-medium ${
-                      forgetOperCredentials
-                        ? "bg-red-600 text-white hover:bg-red-700"
-                        : "bg-gray-600 text-gray-300 hover:bg-gray-500"
-                    }`}
+                    key={tab.id}
+                    onClick={() => {
+                      setActiveTab(tab.id);
+                      setMobileView("content");
+                    }}
+                    className="w-full flex items-center gap-4 px-4 py-4 border-b border-discord-dark-400 hover:bg-discord-dark-300 text-left transition-colors"
                   >
-                    {forgetOperCredentials
-                      ? "Will Forget"
-                      : "Forget Credentials"}
+                    <Icon className="text-discord-text-muted text-lg flex-shrink-0" />
+                    <div className="min-w-0 flex-1 text-white font-medium">
+                      {tab.label}
+                    </div>
+                    <FaChevronRight className="text-discord-text-muted flex-shrink-0" />
                   </button>
-                )}
+                );
+              })}
+            </div>
+            {footer}
+          </>
+        ) : (
+          <>
+            <div className="flex items-center justify-between p-4 border-b border-discord-dark-500 flex-shrink-0">
+              <div className="flex items-center gap-3">
                 <button
-                  type="button"
-                  onClick={handleOperUp}
-                  disabled={!operName.trim() || !operPassword.trim()}
-                  className={`px-3 py-1 text-sm rounded font-medium ${
-                    operName.trim() && operPassword.trim()
-                      ? "bg-discord-primary text-white hover:bg-opacity-80"
-                      : "bg-gray-600 text-gray-400 cursor-not-allowed"
-                  }`}
+                  onClick={() => setMobileView("categories")}
+                  className="p-1 rounded-lg hover:bg-discord-dark-400 text-discord-text-muted hover:text-white"
+                  aria-label="Back"
                 >
-                  Oper Up
+                  <FaChevronLeft />
                 </button>
+                <h2 className="text-white text-lg font-semibold">
+                  {tabs.find((t) => t.id === activeTab)?.label}
+                </h2>
               </div>
+              <button
+                onClick={onClose}
+                className="p-1 rounded-lg hover:bg-discord-dark-400 text-discord-text-muted hover:text-white"
+                aria-label="Close"
+              >
+                <FaTimes />
+              </button>
             </div>
-          </div>
-
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="registerAccount"
-              checked={registerAccount}
-              onChange={() => setRegisterAccount(!registerAccount)}
-              className="accent-discord-accent rounded"
-            />
-            <label
-              htmlFor="registerAccount"
-              className="text-discord-text-muted text-sm"
+            <form
+              id="edit-server-form"
+              onSubmit={handleSubmit}
+              className="flex-1 overflow-y-auto p-4"
             >
-              Register for an account
-            </label>
+              {renderTab()}
+              {error && (
+                <div className="mt-3 text-discord-red text-sm">{error}</div>
+              )}
+            </form>
+            {footer}
+          </>
+        )}
+      </div>,
+      portalTarget,
+    );
+  }
+
+  // ----- Desktop: left sidebar tabs + main content (matches ChannelSettingsModal) -----
+  return createPortal(
+    <div
+      {...getBackdropProps()}
+      className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"
+    >
+      <div
+        {...getContentProps()}
+        className="bg-discord-dark-200 rounded-lg w-full max-w-3xl h-[80vh] flex overflow-hidden"
+      >
+        {/* Sidebar */}
+        <div className="bg-discord-dark-300 w-56 flex flex-col flex-shrink-0">
+          <div className="p-4 border-b border-discord-dark-500 flex justify-center">
+            <h2 className="text-white text-lg font-bold">Edit server</h2>
           </div>
+          <div className="flex-1 overflow-y-auto">
+            <nav className="p-2">
+              {tabs.map((tab) => {
+                const Icon = tab.icon;
+                return (
+                  <button
+                    key={tab.id}
+                    type="button"
+                    onClick={() => setActiveTab(tab.id)}
+                    className={`flex items-center w-full px-3 text-left py-2 mb-1 rounded transition-colors ${
+                      activeTab === tab.id
+                        ? "bg-discord-primary text-white"
+                        : "text-discord-text-muted hover:text-white hover:bg-discord-dark-400"
+                    }`}
+                  >
+                    <Icon className="mr-3 text-sm" />
+                    <span>{tab.label}</span>
+                  </button>
+                );
+              })}
+            </nav>
+          </div>
+        </div>
 
-          {registerAccount && (
-            <>
-              <div className="mb-4">
-                <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                  Account Email
-                </label>
-                <TextInput
-                  type="email"
-                  value={registerEmail}
-                  onChange={(e) => setRegisterEmail(e.target.value)}
-                  placeholder="your@email.com"
-                  className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-                />
-              </div>
-              <div className="mb-4">
-                <label className="block text-discord-text-muted text-sm font-medium mb-1">
-                  Account Password
-                </label>
-                <TextInput
-                  type="password"
-                  value={registerPassword}
-                  onChange={(e) => setRegisterPassword(e.target.value)}
-                  placeholder="Choose a secure password"
-                  className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
-                />
-              </div>
-            </>
-          )}
-
-          {error && (
-            <div className="mb-4 text-discord-red text-sm">{error}</div>
-          )}
-
-          <div className="flex justify-end">
+        {/* Main content */}
+        <div className="flex-1 flex flex-col min-w-0">
+          <div className="flex justify-between items-center p-4 border-b border-discord-dark-500 flex-shrink-0">
+            <h3 className="text-white text-lg font-semibold">
+              {tabs.find((t) => t.id === activeTab)?.label}
+            </h3>
             <button
               type="button"
               onClick={onClose}
-              className="mr-3 px-4 py-2 text-discord-text-normal hover:underline"
+              className="text-discord-text-muted hover:text-white"
+              aria-label="Close"
             >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={isConnecting}
-              className={`px-4 py-2 bg-discord-primary text-white rounded font-medium ${isConnecting ? "opacity-70 cursor-not-allowed" : "hover:bg-opacity-80"}`}
-            >
-              {isConnecting ? "Updating..." : "Update Server"}
+              <FaTimes />
             </button>
           </div>
-        </form>
+          <form
+            id="edit-server-form"
+            onSubmit={handleSubmit}
+            className="flex-1 overflow-y-auto p-4"
+          >
+            {renderTab()}
+            {error && (
+              <div className="mt-3 text-discord-red text-sm">{error}</div>
+            )}
+          </form>
+          {footer}
+        </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 };
 

From 7b9034e80e5cea1619251307a2d026e3323ccc8c Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sat, 9 May 2026 22:04:05 +0100
Subject: [PATCH 11/16] feat(auth): opaque-token (GitHub) + id_token (Gmail)
 OAuth paths

Adds the client side of the obbyircd opaque-token feature. Users can
now sign in with any provider obbyircd is configured for, including
GitHub-style OAuth2 (opaque tokens, server hits userinfo endpoint)
and Google-style OIDC (id_token JWT, server validates locally).

Two new fields on ServerOAuthConfig:

  tokenKind:       "jwt" (default) or "opaque"
  serverProvider:  name of the matching oauth-provider {} on the IRC
                   server, sent as IRCV3BEARER authzid (or OAUTHBEARER
                   `provider=` k/v) so obbyircd picks the right
                   userinfo URL

For non-OIDC providers (GitHub) we add explicit endpoint overrides
since there's no /.well-known/openid-configuration to discover:

  authorizeEndpoint, tokenEndpoint

Built-in presets gain Google (jwt, OIDC) and GitHub (opaque, manual
endpoints) so the dropdown auto-fills issuer/scopes/endpoints/
tokenKind/serverProvider in one click.

JWT path now prefers id_token over access_token (matters for Google,
whose access_token is opaque even when an id_token is also issued).

Lock-mode build vars (single-server deploy) gain matching siblings:

  VITE_DEFAULT_OAUTH_TOKEN_KIND
  VITE_DEFAULT_OAUTH_SERVER_PROVIDER
  VITE_DEFAULT_OAUTH_AUTHORIZE_URL
  VITE_DEFAULT_OAUTH_TOKEN_URL

so admins can ship a "Sign in with GitHub" or "Sign in with Google"
build with no per-user configuration.

BUILD.md + Dockerfile updated; SASL frame builder gets a new test
covering the opaque format. 727 tests pass.

For each preset the corresponding obbyircd oauth-provider {} block
is documented inline (Google: jwks-file, GitHub: userinfo-url).
---
 BUILD.md                           | 56 +++++++++++++++++
 Dockerfile                         |  8 +++
 src/components/ui/OAuthSection.tsx | 98 +++++++++++++++++++++++++++++-
 src/lib/oauth.ts                   | 54 +++++++++++++++-
 src/store/handlers/auth.ts         | 38 +++++++++---
 src/store/index.ts                 |  3 +-
 src/types/index.ts                 | 18 ++++++
 src/vite-env.d.ts                  |  4 ++
 tests/lib/saslFrames.test.ts       |  9 +++
 vite.config.ts                     |  4 ++
 10 files changed, 280 insertions(+), 12 deletions(-)

diff --git a/BUILD.md b/BUILD.md
index 518a4aae..c450f7bd 100644
--- a/BUILD.md
+++ b/BUILD.md
@@ -42,8 +42,64 @@ VITE_DEFAULT_OAUTH_CLIENT_ID="m0obbyircd1234"
 VITE_DEFAULT_OAUTH_SCOPES="openid"
 # Optional, defaults to <origin>/oauth/callback. Must be registered with the IdP.
 VITE_DEFAULT_OAUTH_REDIRECT_URI="https://chat.example.com/oauth/callback"
+# "jwt" (default) for Logto/Auth0/Keycloak/Google id_token.
+# "opaque" for GitHub/Discord/Slack -- IRC server hits userinfo endpoint.
+VITE_DEFAULT_OAUTH_TOKEN_KIND="jwt"
+# Opaque only: name of the matching oauth-provider {} on the IRC server,
+# so the server knows which userinfo URL to hit.
+VITE_DEFAULT_OAUTH_SERVER_PROVIDER="github"
+# Non-OIDC providers (GitHub) need explicit endpoints since they don't
+# publish /.well-known/openid-configuration.
+VITE_DEFAULT_OAUTH_AUTHORIZE_URL="https://github.com/login/oauth/authorize"
+VITE_DEFAULT_OAUTH_TOKEN_URL="https://github.com/login/oauth/access_token"
 ```
 
+#### Provider quick-reference
+
+**Sign in with Google**
+
+```sh
+VITE_DEFAULT_OAUTH_PROVIDER_LABEL=Google
+VITE_DEFAULT_OAUTH_ISSUER=https://accounts.google.com
+VITE_DEFAULT_OAUTH_CLIENT_ID=<your_client_id>.apps.googleusercontent.com
+VITE_DEFAULT_OAUTH_SCOPES="openid email profile"
+VITE_DEFAULT_OAUTH_TOKEN_KIND=jwt
+```
+
+obbyircd side:
+
+```
+oauth-provider "google" {
+    issuer        'https://accounts.google.com';
+    audience      '<your_client_id>.apps.googleusercontent.com';
+    jwks-file     "/etc/obbyircd/google-jwks.json";  # curl from https://www.googleapis.com/oauth2/v3/certs
+    subject-claim "sub";
+};
+```
+
+**Sign in with GitHub**
+
+```sh
+VITE_DEFAULT_OAUTH_PROVIDER_LABEL=GitHub
+VITE_DEFAULT_OAUTH_ISSUER=https://github.com
+VITE_DEFAULT_OAUTH_CLIENT_ID=<your_client_id>
+VITE_DEFAULT_OAUTH_SCOPES="read:user user:email"
+VITE_DEFAULT_OAUTH_TOKEN_KIND=opaque
+VITE_DEFAULT_OAUTH_SERVER_PROVIDER=github
+VITE_DEFAULT_OAUTH_AUTHORIZE_URL=https://github.com/login/oauth/authorize
+VITE_DEFAULT_OAUTH_TOKEN_URL=https://github.com/login/oauth/access_token
+```
+
+obbyircd side:
+
+```
+oauth-provider "github" {
+    userinfo-url   'https://api.github.com/user';
+    subject-claim  "login";    # or "id" for GitHub's stable user id
+};
+```
+
+
 ### Docker
 ```sh
 docker build -t obsidianirc .
diff --git a/Dockerfile b/Dockerfile
index 9dd3b57a..ae507e23 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -10,6 +10,10 @@ ARG VITE_DEFAULT_OAUTH_ISSUER
 ARG VITE_DEFAULT_OAUTH_CLIENT_ID
 ARG VITE_DEFAULT_OAUTH_SCOPES
 ARG VITE_DEFAULT_OAUTH_REDIRECT_URI
+ARG VITE_DEFAULT_OAUTH_TOKEN_KIND
+ARG VITE_DEFAULT_OAUTH_SERVER_PROVIDER
+ARG VITE_DEFAULT_OAUTH_AUTHORIZE_URL
+ARG VITE_DEFAULT_OAUTH_TOKEN_URL
 
 ENV VITE_DEFAULT_IRC_SERVER=$VITE_DEFAULT_IRC_SERVER
 ENV VITE_DEFAULT_IRC_SERVER_NAME=$VITE_DEFAULT_IRC_SERVER_NAME
@@ -21,6 +25,10 @@ ENV VITE_DEFAULT_OAUTH_ISSUER=$VITE_DEFAULT_OAUTH_ISSUER
 ENV VITE_DEFAULT_OAUTH_CLIENT_ID=$VITE_DEFAULT_OAUTH_CLIENT_ID
 ENV VITE_DEFAULT_OAUTH_SCOPES=$VITE_DEFAULT_OAUTH_SCOPES
 ENV VITE_DEFAULT_OAUTH_REDIRECT_URI=$VITE_DEFAULT_OAUTH_REDIRECT_URI
+ENV VITE_DEFAULT_OAUTH_TOKEN_KIND=$VITE_DEFAULT_OAUTH_TOKEN_KIND
+ENV VITE_DEFAULT_OAUTH_SERVER_PROVIDER=$VITE_DEFAULT_OAUTH_SERVER_PROVIDER
+ENV VITE_DEFAULT_OAUTH_AUTHORIZE_URL=$VITE_DEFAULT_OAUTH_AUTHORIZE_URL
+ENV VITE_DEFAULT_OAUTH_TOKEN_URL=$VITE_DEFAULT_OAUTH_TOKEN_URL
 
 WORKDIR /app
 COPY package*.json ./
diff --git a/src/components/ui/OAuthSection.tsx b/src/components/ui/OAuthSection.tsx
index f21d92d6..5a599a93 100644
--- a/src/components/ui/OAuthSection.tsx
+++ b/src/components/ui/OAuthSection.tsx
@@ -20,6 +20,10 @@ interface OAuthSectionProps {
     clientId: string;
     scopes?: string;
     redirectUri?: string;
+    tokenKind?: "jwt" | "opaque";
+    serverProvider?: string;
+    authorizeEndpoint?: string;
+    tokenEndpoint?: string;
   };
 }
 
@@ -71,6 +75,20 @@ export const OAuthSection: React.FC<OAuthSectionProps> = ({
   const [tokenExpiresAt, setTokenExpiresAt] = useState<number | undefined>(
     initial?.tokenExpiresAt,
   );
+  const [tokenKind, setTokenKind] = useState<"jwt" | "opaque">(
+    locked?.tokenKind ?? initial?.tokenKind ?? "jwt",
+  );
+  const [serverProvider, setServerProvider] = useState(
+    locked?.serverProvider ?? initial?.serverProvider ?? "",
+  );
+  // Non-OIDC providers (GitHub) supply explicit authorize/token URLs
+  // because there's no /.well-known/openid-configuration to discover.
+  const [authorizeEndpoint, setAuthorizeEndpoint] = useState(
+    locked?.authorizeEndpoint ?? initial?.authorizeEndpoint ?? "",
+  );
+  const [tokenEndpoint, setTokenEndpoint] = useState(
+    locked?.tokenEndpoint ?? initial?.tokenEndpoint ?? "",
+  );
 
   const [signingIn, setSigningIn] = useState(false);
   const [signInError, setSignInError] = useState<string | null>(null);
@@ -94,6 +112,8 @@ export const OAuthSection: React.FC<OAuthSectionProps> = ({
       idToken: patch.idToken ?? idToken ?? undefined,
       refreshToken: patch.refreshToken ?? refreshToken ?? undefined,
       tokenExpiresAt: patch.tokenExpiresAt ?? tokenExpiresAt,
+      tokenKind: patch.tokenKind ?? tokenKind,
+      serverProvider: patch.serverProvider ?? serverProvider ?? undefined,
     });
   };
 
@@ -102,9 +122,37 @@ export const OAuthSection: React.FC<OAuthSectionProps> = ({
     const np = OAUTH_PRESETS.find((p) => p.id === next) ?? OAUTH_PRESETS[0];
     if (!providerLabel.trim() || providerLabel === preset.label) {
       setProviderLabel(np.label);
+      emit({ providerLabel: np.label });
     }
-    if (!scopes.trim()) {
+    if (!scopes.trim() || scopes === preset.defaultScopes) {
       setScopes(np.defaultScopes);
+      emit({ scopes: np.defaultScopes });
+    }
+    if (np.issuer && (!issuer.trim() || issuer === preset.issuer)) {
+      setIssuer(np.issuer);
+      emit({ issuer: np.issuer });
+    }
+    // Apply token kind + manual endpoints baked into the preset (GitHub
+    // is opaque + non-OIDC; Google is jwt + OIDC; etc.). For "custom"
+    // we don't override anything.
+    if (np.tokenKind && np.id !== "custom") {
+      setTokenKind(np.tokenKind);
+      emit({ tokenKind: np.tokenKind });
+    }
+    if (np.authorizeEndpoint !== undefined) {
+      setAuthorizeEndpoint(np.authorizeEndpoint);
+      emit({ authorizeEndpoint: np.authorizeEndpoint });
+    }
+    if (np.tokenEndpoint !== undefined) {
+      setTokenEndpoint(np.tokenEndpoint);
+      emit({ tokenEndpoint: np.tokenEndpoint });
+    }
+    // Default the server-provider hint to the preset id for opaque flows
+    // so the user sees a sensible default ("github") matching what
+    // obbyircd's oauth-provider {} block would typically be named.
+    if (np.tokenKind === "opaque" && !serverProvider.trim()) {
+      setServerProvider(np.id);
+      emit({ serverProvider: np.id });
     }
   };
 
@@ -125,6 +173,8 @@ export const OAuthSection: React.FC<OAuthSectionProps> = ({
         clientId: clientId.trim(),
         scopes: scopes.trim() || undefined,
         redirectUri: redirectUri.trim() || undefined,
+        authorizeEndpoint: authorizeEndpoint.trim() || undefined,
+        tokenEndpoint: tokenEndpoint.trim() || undefined,
       });
       setAccessToken(result.accessToken);
       setIdToken(result.idToken ?? "");
@@ -346,6 +396,52 @@ export const OAuthSection: React.FC<OAuthSectionProps> = ({
             </p>
           </div>
 
+          <div className="mb-3">
+            <label className="block text-discord-text-muted text-sm font-medium mb-1">
+              Token type
+            </label>
+            <select
+              value={tokenKind}
+              onChange={(e) => {
+                const v = e.target.value as "jwt" | "opaque";
+                setTokenKind(v);
+                emit({ tokenKind: v });
+              }}
+              className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+            >
+              <option value="jwt">
+                JWT — server validates locally (Logto / Auth0 / Keycloak /
+                Google id_token)
+              </option>
+              <option value="opaque">
+                Opaque — server hits userinfo endpoint (GitHub / Discord /
+                Slack)
+              </option>
+            </select>
+          </div>
+
+          {tokenKind === "opaque" && (
+            <div className="mb-3">
+              <label className="block text-discord-text-muted text-sm font-medium mb-1">
+                Server provider name
+              </label>
+              <TextInput
+                value={serverProvider}
+                onChange={(e) => {
+                  setServerProvider(e.target.value);
+                  emit({ serverProvider: e.target.value });
+                }}
+                placeholder="github"
+                className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
+              />
+              <p className="text-discord-text-muted text-xs mt-1">
+                Must match the <code>oauth-provider "name"</code> block on the
+                IRC server (obbyircd's <code>userinfo-url</code>
+                config).
+              </p>
+            </div>
+          )}
+
           <div className="mb-3 text-xs text-discord-text-muted">
             {tokenStatus}
           </div>
diff --git a/src/lib/oauth.ts b/src/lib/oauth.ts
index 3703da7c..9e6bcc6b 100644
--- a/src/lib/oauth.ts
+++ b/src/lib/oauth.ts
@@ -149,10 +149,24 @@ export interface OAuthCallbackMessage {
 export async function beginOauthLogin(
   cfg: Pick<
     ServerOAuthConfig,
-    "issuer" | "clientId" | "scopes" | "redirectUri"
+    | "issuer"
+    | "clientId"
+    | "scopes"
+    | "redirectUri"
+    | "authorizeEndpoint"
+    | "tokenEndpoint"
   >,
 ): Promise<OAuthLoginResult> {
-  const meta = await discoverOidc(cfg.issuer);
+  // GitHub and other non-OIDC providers don't publish a discovery
+  // document; admin supplies authorize/token URLs directly.
+  const meta: OidcMetadata =
+    cfg.authorizeEndpoint && cfg.tokenEndpoint
+      ? {
+          issuer: cfg.issuer,
+          authorization_endpoint: cfg.authorizeEndpoint,
+          token_endpoint: cfg.tokenEndpoint,
+        }
+      : await discoverOidc(cfg.issuer);
   const codeVerifier = generateCodeVerifier();
   const codeChallenge = await deriveCodeChallenge(codeVerifier);
   const state = generateCodeVerifier();
@@ -257,17 +271,28 @@ export function getBuiltinOAuthConfig():
       clientId: string;
       scopes?: string;
       redirectUri?: string;
+      tokenKind?: "jwt" | "opaque";
+      serverProvider?: string;
+      authorizeEndpoint?: string;
+      tokenEndpoint?: string;
     }
   | undefined {
   const issuer = __DEFAULT_OAUTH_ISSUER__;
   const clientId = __DEFAULT_OAUTH_CLIENT_ID__;
   if (!issuer || !clientId) return undefined;
+  const rawKind = __DEFAULT_OAUTH_TOKEN_KIND__;
+  const tokenKind: "jwt" | "opaque" | undefined =
+    rawKind === "opaque" || rawKind === "jwt" ? rawKind : undefined;
   return {
     providerLabel: __DEFAULT_OAUTH_PROVIDER_LABEL__ || "OAuth",
     issuer,
     clientId,
     scopes: __DEFAULT_OAUTH_SCOPES__ || undefined,
     redirectUri: __DEFAULT_OAUTH_REDIRECT_URI__ || undefined,
+    tokenKind,
+    serverProvider: __DEFAULT_OAUTH_SERVER_PROVIDER__ || undefined,
+    authorizeEndpoint: __DEFAULT_OAUTH_AUTHORIZE_URL__ || undefined,
+    tokenEndpoint: __DEFAULT_OAUTH_TOKEN_URL__ || undefined,
   };
 }
 
@@ -282,6 +307,13 @@ export interface OAuthProviderPreset {
   defaultScopes: string;
   // Helper text shown under the issuer field when this preset is picked.
   hint?: string;
+  // Token kind the IRC server expects. "jwt" (default) means the server
+  // validates locally against JWKS; "opaque" means it hits a userinfo
+  // endpoint.
+  tokenKind?: "jwt" | "opaque";
+  // Manual auth/token endpoints for non-OIDC providers (GitHub).
+  authorizeEndpoint?: string;
+  tokenEndpoint?: string;
 }
 
 export const OAUTH_PRESETS: OAuthProviderPreset[] = [
@@ -313,4 +345,22 @@ export const OAUTH_PRESETS: OAuthProviderPreset[] = [
     defaultScopes: "openid",
     hint: "Issuer is https://<host>/realms/<realm>",
   },
+  {
+    id: "google",
+    label: "Google",
+    issuer: "https://accounts.google.com",
+    defaultScopes: "openid email profile",
+    hint: "Client ID from console.cloud.google.com -> APIs & Services -> Credentials. Server side: jwks-file from https://www.googleapis.com/oauth2/v3/certs.",
+    tokenKind: "jwt",
+  },
+  {
+    id: "github",
+    label: "GitHub",
+    issuer: "https://github.com",
+    defaultScopes: "read:user user:email",
+    hint: 'Client ID from github.com/settings/developers. Opaque tokens; server needs an oauth-provider with userinfo-url "https://api.github.com/user".',
+    tokenKind: "opaque",
+    authorizeEndpoint: "https://github.com/login/oauth/authorize",
+    tokenEndpoint: "https://github.com/login/oauth/access_token",
+  },
 ];
diff --git a/src/store/handlers/auth.ts b/src/store/handlers/auth.ts
index 7c3d1c7c..eba8fea6 100644
--- a/src/store/handlers/auth.ts
+++ b/src/store/handlers/auth.ts
@@ -10,17 +10,27 @@ import { normalizeHost } from "../helpers";
 import type { AppState } from "../index";
 import * as storage from "../localStorage";
 
-// OAuth path is active if the user enabled it AND we hold an access token.
+// OAuth path is active if the user enabled it AND we hold any token to send.
 // We don't gate on local expiry: the server is the authority and surfaces a
 // useful 904 if the token is bad, prompting the user to re-authenticate.
 function getActiveOauth(
   serv: ServerConfig | undefined,
 ): ServerOAuthConfig | undefined {
   if (!serv?.oauth?.enabled) return undefined;
-  if (!serv.oauth.accessToken) return undefined;
+  if (!serv.oauth.accessToken && !serv.oauth.idToken) return undefined;
   return serv.oauth;
 }
 
+// Pick the best bearer to send. For JWT-validated providers (Logto, Auth0,
+// Google id_token) the id_token is preferable since it's the JWT the
+// server can verify locally; access_token may be opaque even when the
+// IdP also issues a JWT id_token. For opaque providers (GitHub) we just
+// send the access_token raw and let the server hit userinfo.
+function pickBearer(oauth: ServerOAuthConfig): string | undefined {
+  if (oauth.tokenKind === "opaque") return oauth.accessToken;
+  return oauth.idToken ?? oauth.accessToken;
+}
+
 export function registerAuthHandlers(store: StoreApi<AppState>): void {
   ircClient.on("CAP_ACKNOWLEDGED", ({ serverId, key, capabilities }) => {
     if (capabilities?.startsWith("draft/metadata")) {
@@ -70,12 +80,23 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     if (!serv) return;
 
     const oauth = getActiveOauth(serv);
-    if (oauth?.accessToken) {
-      const b64 = buildIrcv3BearerPayload({ token: oauth.accessToken });
-      for (const chunk of chunkSaslPayload(b64)) {
-        ircClient.sendRaw(serverId, `AUTHENTICATE ${chunk}`);
+    if (oauth) {
+      const token = pickBearer(oauth);
+      if (token) {
+        const isOpaque = oauth.tokenKind === "opaque";
+        const b64 = buildIrcv3BearerPayload({
+          token,
+          tokenType: isOpaque ? "opaque" : "jwt",
+          // Opaque tokens carry the provider name so the server can pick
+          // the right userinfo-url. JWT path doesn't need it (the server
+          // matches by `iss` claim).
+          authzid: isOpaque ? oauth.serverProvider : undefined,
+        });
+        for (const chunk of chunkSaslPayload(b64)) {
+          ircClient.sendRaw(serverId, `AUTHENTICATE ${chunk}`);
+        }
+        return;
       }
-      return;
     }
 
     if (!serv.saslEnabled) return;
@@ -207,7 +228,8 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
       const hasPlain =
         savedServer?.saslEnabled && Boolean(savedServer?.saslPassword);
       const hasOauth =
-        savedServer?.oauth?.enabled && Boolean(savedServer?.oauth?.accessToken);
+        savedServer?.oauth?.enabled &&
+        Boolean(savedServer?.oauth?.accessToken || savedServer?.oauth?.idToken);
       if (hasPlain || hasOauth) {
         preventCapEnd = true;
       }
diff --git a/src/store/index.ts b/src/store/index.ts
index be9748e1..f174fe7e 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1001,7 +1001,8 @@ const useStore = create<AppState>((set, get) => ({
         }
       }
       const oauthBearerEnabled = !!(
-        mergedOauth?.enabled && mergedOauth.accessToken
+        mergedOauth?.enabled &&
+        (mergedOauth.accessToken || mergedOauth.idToken)
       );
       const server = await ircClient.connect(
         name,
diff --git a/src/types/index.ts b/src/types/index.ts
index 617c5c35..c7fff3d4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -83,6 +83,24 @@ export interface ServerOAuthConfig {
   idToken?: string;
   refreshToken?: string;
   tokenExpiresAt?: number;
+  // "jwt" (default): the IRC server validates the bearer locally against
+  // its JWKS. The client sends idToken (preferred) or accessToken,
+  // whichever is a JWT. Works for Logto, Auth0, Keycloak, Okta, Google
+  // (id_token), Microsoft (id_token).
+  // "opaque": the IRC server hits the IdP's userinfo endpoint to resolve
+  // the bearer. The client sends accessToken plus a `serverProvider`
+  // hint so the server knows which oauth-provider {} block to consult.
+  // Required for GitHub, Discord, Slack, Reddit, Twitter.
+  tokenKind?: "jwt" | "opaque";
+  // Name the IRC server admin gave to the matching oauth-provider {}
+  // block. Sent as the IRCV3BEARER authzid (or OAUTHBEARER `provider=`
+  // k/v) in opaque mode so the server can pick the right userinfo URL.
+  serverProvider?: string;
+  // Manual auth/token endpoint overrides for non-OIDC providers like
+  // GitHub that don't publish a /.well-known/openid-configuration.
+  // When both are set, OIDC discovery is skipped.
+  authorizeEndpoint?: string;
+  tokenEndpoint?: string;
 }
 
 export interface Channel {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 13e6f584..d5beca63 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -11,5 +11,9 @@ declare const __DEFAULT_OAUTH_ISSUER__: string | undefined;
 declare const __DEFAULT_OAUTH_CLIENT_ID__: string | undefined;
 declare const __DEFAULT_OAUTH_SCOPES__: string | undefined;
 declare const __DEFAULT_OAUTH_REDIRECT_URI__: string | undefined;
+declare const __DEFAULT_OAUTH_TOKEN_KIND__: string | undefined;
+declare const __DEFAULT_OAUTH_SERVER_PROVIDER__: string | undefined;
+declare const __DEFAULT_OAUTH_AUTHORIZE_URL__: string | undefined;
+declare const __DEFAULT_OAUTH_TOKEN_URL__: string | undefined;
 declare const __BACKEND_URL__: string;
 declare const __TRUSTED_MEDIA_URLS__: string[];
diff --git a/tests/lib/saslFrames.test.ts b/tests/lib/saslFrames.test.ts
index a5d6caf8..d561d213 100644
--- a/tests/lib/saslFrames.test.ts
+++ b/tests/lib/saslFrames.test.ts
@@ -30,6 +30,15 @@ describe("buildIrcv3BearerPayload", () => {
     expect(decodeB64(b64)).toBe("alice\\0oauth2\\0TOK");
   });
 
+  it("emits the opaque frame with provider hint in authzid", () => {
+    const b64 = buildIrcv3BearerPayload({
+      token: "gho_abc",
+      tokenType: "opaque",
+      authzid: "github",
+    });
+    expect(decodeB64(b64)).toBe("github\\0opaque\\0gho_abc");
+  });
+
   it("preserves multibyte UTF-8 in the token", () => {
     const b64 = buildIrcv3BearerPayload({ token: "héllo" });
     const bin = atob(b64);
diff --git a/vite.config.ts b/vite.config.ts
index ea4fc61c..3dc40c52 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -29,6 +29,10 @@ export default defineConfig(({ mode }) => {
       '__DEFAULT_OAUTH_CLIENT_ID__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_CLIENT_ID),
       '__DEFAULT_OAUTH_SCOPES__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_SCOPES),
       '__DEFAULT_OAUTH_REDIRECT_URI__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_REDIRECT_URI),
+      '__DEFAULT_OAUTH_TOKEN_KIND__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_TOKEN_KIND),
+      '__DEFAULT_OAUTH_SERVER_PROVIDER__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_SERVER_PROVIDER),
+      '__DEFAULT_OAUTH_AUTHORIZE_URL__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_AUTHORIZE_URL),
+      '__DEFAULT_OAUTH_TOKEN_URL__': JSON.stringify(process.env.VITE_DEFAULT_OAUTH_TOKEN_URL),
       '__BACKEND_URL__': JSON.stringify(process.env.VITE_BACKEND_URL || 'http://localhost:8080'),
       '__TRUSTED_MEDIA_URLS__': process.env.VITE_TRUSTED_MEDIA_URLS ? process.env.VITE_TRUSTED_MEDIA_URLS.replace(/^['"]|['"]$/g, '').split(',').map(url => url.trim()) : [],
     },

From 6223a7c285b5dd90763706c2ad731a80ff047078 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sat, 9 May 2026 23:37:15 +0100
Subject: [PATCH 12/16] feat(auth): static /oauth/callback page

The SPA bundle uses base="./" so its asset paths are relative; loading
the React OAuthCallback at /oauth/callback would resolve assets to
/oauth/assets/... and 404. Replace the in-SPA route with a self-contained
public/oauth/callback/index.html that just postMessages the auth code to
its opener and closes -- no SPA bundle dependency, works under any base
config and any deep-link routing setup.
---
 public/oauth/callback/index.html | 60 ++++++++++++++++++++++++++++++++
 src/App.tsx                      |  2 --
 src/components/OAuthCallback.tsx | 60 --------------------------------
 3 files changed, 60 insertions(+), 62 deletions(-)
 create mode 100644 public/oauth/callback/index.html
 delete mode 100644 src/components/OAuthCallback.tsx

diff --git a/public/oauth/callback/index.html b/public/oauth/callback/index.html
new file mode 100644
index 00000000..114c17cf
--- /dev/null
+++ b/public/oauth/callback/index.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Sign-in complete</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    body{
+      margin:0;
+      min-height:100vh;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      background:#202225;
+      color:#dcddde;
+      font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    }
+    .card{ max-width:28rem; padding:1.5rem; text-align:center; }
+    h1{ font-size:1.25rem; margin:0 0 .5rem; }
+    p{ color:#b9bbbe; margin:0; }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>OAuth sign-in</h1>
+    <p id="msg">Completing sign-in...</p>
+  </div>
+  <script>
+    // Standalone callback page: served as a static file at /oauth/callback so
+    // it does NOT depend on the SPA bundle (which uses base="./" and would
+    // 404 its assets when loaded from a deep URL). The popup runner in
+    // src/lib/oauth.ts is listening for this exact postMessage shape.
+    (function () {
+      var qs = new URLSearchParams(window.location.search);
+      var payload = {
+        type: "obsidianirc:oauth-callback",
+        state: qs.get("state") || "",
+        code: qs.get("code") || undefined,
+        error: qs.get("error") || undefined,
+        errorDescription: qs.get("error_description") || undefined,
+      };
+      var msg = document.getElementById("msg");
+      if (window.opener && window.opener !== window) {
+        try {
+          window.opener.postMessage(payload, window.location.origin);
+          msg.textContent = "Sign-in complete. You can close this window.";
+          setTimeout(function () { try { window.close(); } catch (_) {} }, 250);
+          return;
+        } catch (e) {
+          msg.textContent =
+            "Could not return tokens to the main window: " + (e && e.message);
+          return;
+        }
+      }
+      msg.textContent =
+        "OAuth callback was loaded outside its popup. You can close this tab.";
+    })();
+  </script>
+</body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
index 06ae7369..a33a508a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import { useEffect, useRef, useState } from "react";
 import { Route, Routes } from "react-router-dom";
 import AppLayout from "./components/layout/AppLayout";
 import { ServerNoticesPopup } from "./components/message/ServerNoticesPopup";
-import OAuthCallback from "./components/OAuthCallback";
 import PrivacyPolicy from "./components/PrivacyPolicy";
 import AddServerModal from "./components/ui/AddServerModal";
 import ChannelListModal from "./components/ui/ChannelListModal";
@@ -295,7 +294,6 @@ const App: React.FC = () => {
     <div className="h-screen overflow-hidden">
       <Routes>
         <Route path="/privacy" element={<PrivacyPolicy />} />
-        <Route path="/oauth/callback" element={<OAuthCallback />} />
         <Route
           path="/*"
           element={
diff --git a/src/components/OAuthCallback.tsx b/src/components/OAuthCallback.tsx
deleted file mode 100644
index 575a4289..00000000
--- a/src/components/OAuthCallback.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type React from "react";
-import { useEffect, useState } from "react";
-import type { OAuthCallbackMessage } from "../lib/oauth";
-
-// Loaded at /oauth/callback inside the popup window the OAuth flow opened.
-// Pulls `code` and `state` (or `error`) from the query string, sends them
-// back to the opener via postMessage, then closes itself.
-export const OAuthCallback: React.FC = () => {
-  const [message, setMessage] = useState("Completing sign-in...");
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const code = params.get("code") ?? undefined;
-    const state = params.get("state") ?? "";
-    const error = params.get("error") ?? undefined;
-    const errorDescription = params.get("error_description") ?? undefined;
-
-    const payload: OAuthCallbackMessage = {
-      type: "obsidianirc:oauth-callback",
-      state,
-      code,
-      error,
-      errorDescription,
-    };
-
-    if (window.opener && window.opener !== window) {
-      try {
-        window.opener.postMessage(payload, window.location.origin);
-        setMessage("Sign-in complete. You can close this window.");
-        setTimeout(() => {
-          try {
-            window.close();
-          } catch {}
-        }, 300);
-        return;
-      } catch (err) {
-        setMessage(
-          `Could not return tokens to the main window: ${
-            err instanceof Error ? err.message : String(err)
-          }`,
-        );
-        return;
-      }
-    }
-    setMessage(
-      "OAuth callback was loaded outside its popup. You can close this tab.",
-    );
-  }, []);
-
-  return (
-    <div className="flex h-screen items-center justify-center bg-discord-dark-200 text-discord-text-normal">
-      <div className="max-w-md p-6 text-center">
-        <h1 className="text-xl font-bold mb-2">OAuth sign-in</h1>
-        <p className="text-discord-text-muted">{message}</p>
-      </div>
-    </div>
-  );
-};
-
-export default OAuthCallback;

From a3863d495927e3181c72f494aaaf5a094696a09a Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Sun, 10 May 2026 02:55:11 +0100
Subject: [PATCH 13/16] =?UTF-8?q?feat(auth):=20smart=202FA=20step-up=20?=
 =?UTF-8?q?=E2=80=94=20IRCV3BEARER=20step-up=20+=20reject=20same-factor=20?=
 =?UTF-8?q?replay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wires the client to the new server-side step-up policy:

  - When SASL primary is PLAIN/SCRAM and an OAuth bearer is also
    configured, on AUTHENTICATE 2FA-REQUIRED the client now
    automatically replies with AUTHENTICATE IRCV3BEARER + the chunked
    bearer payload, satisfying 2FA in one round trip with no UI prompt.

  - When SASL primary is IRCV3BEARER (the bearer is already spent as
    primary), the auto-path is skipped on 2FA-REQUIRED so the
    TotpStepUpModal pops -- replaying the same bearer would just be
    rejected by the server's same-factor guard.

  - Drops the made-up "AUTHENTICATE 2FA-OAUTH" mech name. Step-up uses
    the real IRCV3BEARER mech with identical wire format; the server
    routes to the step-up handler based on TwoFAStepup state.

  - Two new store actions: twofaToken(serverId, chunk) and
    linkOauthCredential(serverId, provider, bearer, name) which run
    /2FA CHALLENGE oauth + chunked /2FA TOKEN + /2FA ADD oauth.
    twofaAdd's data param became optional (oauth ADD takes no inline
    data -- token was already streamed).

  - TwoFactorSettingsModal grows a "Link an OAuth identity" card that
    runs the popup OAuth flow against the per-server (or
    deployer-baked, in lock-mode builds) provider config and binds the
    resulting (provider, subject) credential to the account via the
    actions above.
---
 src/components/ui/TwoFactorSettingsModal.tsx | 106 ++++++++++++++++++-
 src/store/handlers/auth.ts                   |  48 ++++++++-
 src/store/index.ts                           |  55 +++++++++-
 3 files changed, 200 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/TwoFactorSettingsModal.tsx b/src/components/ui/TwoFactorSettingsModal.tsx
index 9a9de773..79d12120 100644
--- a/src/components/ui/TwoFactorSettingsModal.tsx
+++ b/src/components/ui/TwoFactorSettingsModal.tsx
@@ -1,17 +1,24 @@
 import QRCode from "qrcode";
 import type React from "react";
 import { useEffect, useMemo, useState } from "react";
+import {
+  beginOauthLogin,
+  getBuiltinOAuthConfig,
+  OAUTH_PRESETS,
+} from "../../lib/oauth";
 import {
   b64StdDecode,
   bytesToB64Std,
   isWebAuthnAvailable,
   webauthnRegister,
 } from "../../lib/sasl/webauthn";
-import useStore from "../../store";
+import useStore, { loadSavedServers } from "../../store";
 
 const TYPE_LABELS: Record<string, string> = {
   totp: "Authenticator app (TOTP)",
   webauthn: "Biometric / security key",
+  oauth: "OAuth identity",
+  external: "TLS certificate fingerprint",
 };
 
 function decodeChallenge(blob: string): unknown {
@@ -46,6 +53,24 @@ export const TwoFactorSettingsModal: React.FC<Props> = ({
   const twofaRemove = useStore((s) => s.twofaRemove);
   const twofaEnable = useStore((s) => s.twofaEnable);
   const twofaDisable = useStore((s) => s.twofaDisable);
+  const linkOauthCredential = useStore((s) => s.linkOauthCredential);
+
+  // OAuth identity providers the admin has surfaced. In a build with
+  // VITE_HIDE_SERVER_LIST + VITE_DEFAULT_OAUTH_* set, there's exactly
+  // one (the deployer's pinned provider). In a multi-server build we
+  // pull the per-server config from localStorage. Either way the shape
+  // we need is just `{ providerLabel, serverProvider, ... }`.
+  const oauthProviders = useMemo(() => {
+    const builtin = __HIDE_SERVER_LIST__ ? getBuiltinOAuthConfig() : undefined;
+    if (builtin) return [builtin];
+    const saved = loadSavedServers().find((s) => s.id === serverId);
+    if (saved?.oauth?.enabled && saved.oauth.issuer && saved.oauth.clientId) {
+      return [saved.oauth];
+    }
+    return [];
+  }, [serverId]);
+  const [oauthBusy, setOauthBusy] = useState<string | null>(null);
+  const [oauthError, setOauthError] = useState<string | null>(null);
 
   const supportsWebAuthn =
     server?.capabilities?.some(
@@ -101,6 +126,48 @@ export const TwoFactorSettingsModal: React.FC<Props> = ({
     twofaChallenge(serverId, "totp");
   };
 
+  // "Link with <provider>" -- runs the popup OAuth flow to grab a fresh
+  // bearer, then fires the /2FA CHALLENGE oauth + /2FA TOKEN + /2FA ADD
+  // sequence so the server stores the resulting (provider, subject) row
+  // against this account.
+  const onLinkOauth = async (
+    provider: (typeof oauthProviders)[number],
+    name: string,
+  ) => {
+    setOauthError(null);
+    const tag = provider.serverProvider || provider.providerLabel;
+    setOauthBusy(tag);
+    try {
+      const result = await beginOauthLogin({
+        issuer: provider.issuer,
+        clientId: provider.clientId,
+        scopes: provider.scopes || undefined,
+        redirectUri: provider.redirectUri || undefined,
+        authorizeEndpoint: provider.authorizeEndpoint || undefined,
+        tokenEndpoint: provider.tokenEndpoint || undefined,
+      });
+      const isOpaque = provider.tokenKind === "opaque";
+      const bearer = isOpaque
+        ? result.accessToken
+        : (result.idToken ?? result.accessToken);
+      if (!bearer) throw new Error("Provider returned no bearer token.");
+      const serverProvider =
+        provider.serverProvider ||
+        // Fall back to the preset id (e.g. "github") so the obbyircd
+        // oauth-provider {} block name lines up with what the user
+        // probably typed on the server.
+        OAUTH_PRESETS.find(
+          (p) => p.label.toLowerCase() === provider.providerLabel.toLowerCase(),
+        )?.id ||
+        provider.providerLabel.toLowerCase();
+      linkOauthCredential(serverId, serverProvider, bearer, name);
+    } catch (err) {
+      setOauthError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setOauthBusy(null);
+    }
+  };
+
   const onAddWebAuthn = async () => {
     if (!isWebAuthnAvailable()) {
       setEnrollError("WebAuthn is not available in this environment.");
@@ -330,6 +397,43 @@ export const TwoFactorSettingsModal: React.FC<Props> = ({
           </button>
         </div>
 
+        {oauthProviders.length > 0 && (
+          <div className="mb-4 p-3 rounded bg-discord-dark-300 space-y-2">
+            <div className="text-sm text-white font-medium">
+              Link an OAuth identity
+            </div>
+            <p className="text-xs text-discord-text-muted">
+              Sign in with the provider, then we'll bind the resulting identity
+              to your account so SASL OAUTHBEARER / IRCV3BEARER works on
+              subsequent connections.
+            </p>
+            {oauthProviders.map((p) => {
+              const tag = p.serverProvider || p.providerLabel;
+              const busy = oauthBusy === tag;
+              return (
+                <button
+                  key={tag}
+                  type="button"
+                  disabled={busy}
+                  onClick={() => onLinkOauth(p, p.providerLabel.toLowerCase())}
+                  className={`w-full px-3 py-2 rounded text-white text-sm font-medium ${
+                    busy
+                      ? "bg-gray-600 cursor-not-allowed"
+                      : "bg-discord-primary hover:bg-opacity-80"
+                  }`}
+                >
+                  {busy
+                    ? "Waiting for sign-in..."
+                    : `Link with ${p.providerLabel}`}
+                </button>
+              );
+            })}
+            {oauthError && (
+              <p className="text-discord-red text-xs">{oauthError}</p>
+            )}
+          </div>
+        )}
+
         {inflightTotp && qrSvg && (
           <form
             onSubmit={onSubmitTotp}
diff --git a/src/store/handlers/auth.ts b/src/store/handlers/auth.ts
index 4d8e8eb4..bcec406c 100644
--- a/src/store/handlers/auth.ts
+++ b/src/store/handlers/auth.ts
@@ -123,9 +123,19 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     const bearer = oauth ? pickBearer(oauth) : undefined;
     const available = ircClient.getSaslMechanisms(serverId);
 
-    // Prefer the OAuth bearer path when one is configured AND the server
-    // advertises IRCV3BEARER. Falls through to PLAIN/SCRAM/WebAuthn.
-    if (oauth && bearer && available.includes("IRCV3BEARER")) {
+    // Pick the primary mech. Policy:
+    //   1. If a SASL password is configured AND an OAuth bearer is held,
+    //      use the password as primary (PLAIN/SCRAM) and let OAuth become
+    //      the second factor for the 2FA-REQUIRED step-up.
+    //   2. Else if only OAuth is configured, use IRCV3BEARER primary.
+    //   3. Else fall through to the existing PLAIN/SCRAM/WebAuthn path.
+    const hasPassword =
+      !!serv?.saslEnabled &&
+      Boolean(serv.saslAccountName?.length || serv.nickname) &&
+      Boolean(serv.saslPassword);
+    const hasOauth = !!(oauth && bearer && available.includes("IRCV3BEARER"));
+
+    if (hasOauth && !hasPassword) {
       ircClient.setSaslEnabled(serverId, true);
       sessions.set(serverId, {
         mech: "IRCV3BEARER",
@@ -147,11 +157,20 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
       : serv.nickname;
     const password = serv.saslPassword ? atob(serv.saslPassword) : undefined;
 
+    // Stash OAuth context on the session so the 2FA-REQUIRED handler
+    // can autopilot the step-up without us having to re-read storage.
     sessions.set(serverId, {
       mech,
       username,
       password,
       step: 0,
+      oauthBearer: hasOauth ? bearer : undefined,
+      oauthTokenKind: hasOauth
+        ? oauth.tokenKind === "opaque"
+          ? "opaque"
+          : "jwt"
+        : undefined,
+      oauthProvider: hasOauth ? oauth.serverProvider : undefined,
     });
     ircClient.sendRaw(serverId, `AUTHENTICATE ${mech}`);
   });
@@ -162,6 +181,29 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     // Synthetic step-up signal from the server (draft/account-2fa).
     if (param === "2FA-REQUIRED") {
       const session = sessions.get(serverId);
+      // If primary was IRCV3BEARER, the OAuth bearer is already spent
+      // as the first factor -- replaying it for step-up is exactly
+      // the "same proof twice" failure the server rejects. Pop the
+      // TOTP/WebAuthn modal instead.
+      const bearer = session?.oauthBearer;
+      if (bearer && session.mech !== "IRCV3BEARER") {
+        // Step-up via IRCV3BEARER (the actual SASL mech name -- step-up
+        // and primary share the same mechanism, the server just routes
+        // by whether a stepup is in flight).
+        const isOpaque = session.oauthTokenKind === "opaque";
+        const b64 = buildIrcv3BearerPayload({
+          token: bearer,
+          tokenType: isOpaque ? "opaque" : "jwt",
+          authzid: isOpaque ? session.oauthProvider : undefined,
+        });
+        ircClient.sendRaw(serverId, "AUTHENTICATE IRCV3BEARER");
+        for (const chunk of chunkSaslPayload(b64)) {
+          ircClient.sendRaw(serverId, `AUTHENTICATE ${chunk}`);
+        }
+        return;
+      }
+      // Otherwise pop the existing modal so the user can type a TOTP
+      // code or pick a different factor.
       const acct = session?.username ?? "";
       store.setState({ pendingTotpStepUp: { serverId, account: acct } });
       return;
diff --git a/src/store/index.ts b/src/store/index.ts
index 25ba89eb..1a70b458 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -599,12 +599,28 @@ export interface AppState {
   // 2FA actions
   twofaStatusQuery: (serverId: string) => void;
   twofaListQuery: (serverId: string) => void;
-  twofaChallenge: (serverId: string, type: string) => void;
+  twofaChallenge: (serverId: string, type: string, arg?: string) => void;
+  // /2FA TOKEN :<chunk> -- streams an OAuth bearer to the server during
+  // an oauth enrolment session (since JWTs blow past the 512-byte IRC
+  // line limit).
+  twofaToken: (serverId: string, chunk: string) => void;
+  // High-level helper: take the OAuth bearer token we already obtained
+  // via the popup flow, run the full /2FA CHALLENGE oauth <provider> →
+  // /2FA TOKEN :<chunked> → /2FA ADD oauth <name> sequence.
+  linkOauthCredential: (
+    serverId: string,
+    provider: string,
+    bearerToken: string,
+    name: string,
+  ) => void;
   twofaAdd: (
     serverId: string,
     type: string,
     name: string,
-    data: string,
+    // OAuth ADD finalizes a previously-streamed token, so it has no
+    // inline data argument. TOTP/WebAuthn/external pass the credential
+    // payload here.
+    data?: string,
   ) => void;
   twofaRemove: (serverId: string, id: string) => void;
   twofaEnable: (serverId: string) => void;
@@ -1460,11 +1476,40 @@ const useStore = create<AppState>((set, get) => ({
     }));
     ircClient.sendRaw(serverId, "2FA LIST");
   },
-  twofaChallenge: (serverId, type) => {
-    ircClient.sendRaw(serverId, `2FA CHALLENGE ${type}`);
+  twofaChallenge: (serverId, type, arg) => {
+    if (arg) {
+      ircClient.sendRaw(serverId, `2FA CHALLENGE ${type} ${arg}`);
+    } else {
+      ircClient.sendRaw(serverId, `2FA CHALLENGE ${type}`);
+    }
+  },
+  twofaToken: (serverId, chunk) => {
+    // The trailing-param form lets the chunk hold any printable byte
+    // including spaces and `=` -- IRC parsers treat everything after
+    // the first " :" as one parameter.
+    ircClient.sendRaw(serverId, `2FA TOKEN :${chunk}`);
+  },
+  linkOauthCredential: (serverId, provider, bearerToken, name) => {
+    // Order matches the obbyircd handler: open a session pinned to the
+    // provider, stream the bearer in <=400-byte chunks, then finalize
+    // by name. The server validates the buffered token (via JWKS or the
+    // userinfo endpoint depending on provider config) inside ADD.
+    ircClient.sendRaw(serverId, `2FA CHALLENGE oauth ${provider}`);
+    const CHUNK = 400;
+    for (let i = 0; i < bearerToken.length; i += CHUNK) {
+      ircClient.sendRaw(
+        serverId,
+        `2FA TOKEN :${bearerToken.slice(i, i + CHUNK)}`,
+      );
+    }
+    ircClient.sendRaw(serverId, `2FA ADD oauth ${name}`);
   },
   twofaAdd: (serverId, type, name, data) => {
-    ircClient.sendRaw(serverId, `2FA ADD ${type} ${name} ${data}`);
+    if (data === undefined) {
+      ircClient.sendRaw(serverId, `2FA ADD ${type} ${name}`);
+    } else {
+      ircClient.sendRaw(serverId, `2FA ADD ${type} ${name} ${data}`);
+    }
   },
   twofaRemove: (serverId, id) => {
     ircClient.sendRaw(serverId, `2FA REMOVE ${id}`);

From 511a41ced22e3233f17e1528cebecf41308c56ae Mon Sep 17 00:00:00 2001
From: Valerie Liu <79415174+ValwareIRC@users.noreply.github.com>
Date: Sun, 10 May 2026 03:14:05 +0100
Subject: [PATCH 14/16] Feat/account recovery (#181)

* feat: draft/account-recovery (RECOVER + SETPASS) and SASL EXTERNAL

Implements the client side of the draft/account-recovery WIP spec we
authored at extensions/account-recovery.md, plus opt-in SASL
EXTERNAL for cert-based login.

* IRCClient.recoverRequest / recoverConfirm / setpass send the new
  commands.  SETPASS uses the IRC trailing-parameter form so passwords
  may contain spaces (passphrases).  No base64.
* New typed events RECOVER_NOTE / RECOVER_FAIL / SETPASS_NOTE /
  SETPASS_FAIL projected from the generic NOTE/FAIL stream so
  components don't have to filter by command on every render.
* PasswordRecoveryModal: three-stage flow (account -> code -> new
  password).  Surfaces the spec's account-existence-ambiguity to the
  user instead of silently swallowing typos.
* ChangePasswordModal: one-shot SETPASS for in-session rotation; only
  shown while the connection is authenticated.
* EditServerModal exposes both modals when the server advertises
  draft/account-recovery.
* SASL EXTERNAL added to the SaslMech union and the AUTHENTICATE
  state machine; an EXTERNAL-configured server replies '+' to '+' and
  the TLS cert provides identity.  EXTERNAL is only chosen when the
  user explicitly picks it -- never under "auto", since it requires a
  device-side client cert.

* feat: draft/persistence settings panel

When the server advertises draft/persistence, the user's account
settings tab now gets a tri-state preference:

  - Stay in channels (ON) -- ghost survives disconnect
  - Leave on disconnect (OFF) -- clean exit
  - Use server default (DEFAULT) -- inherit operator setting

Plumbing:

  - IRCClient.persistenceGet / persistenceSet send PERSISTENCE GET
    and PERSISTENCE SET ON|OFF|DEFAULT.
  - handlePersistence parses the server's PERSISTENCE STATUS reply
    and emits a typed PERSISTENCE_STATUS event; the FAIL handler
    projects PERSISTENCE_FAIL alongside the generic FAIL.
  - registerAuthHandlers caches both preference + effective state on
    the Server record, and fires an automatic PERSISTENCE GET 1.5s
    after CAP ACK so the panel has fresh state when the user opens
    settings (the spec gates the command on IsLoggedIn, hence the
    small post-SASL delay).
  - PersistenceSettingsPanel renders a radio-card list with helper
    text and an "Currently ON/OFF" badge so the user can reconcile
    their preference with what the server is actually doing (e.g.
    preference DEFAULT but the operator default flipped).
  - The panel is mounted in UserSettings -> Account, gated on the
    server's CAP set, so non-supporting networks see nothing change.
---
 src/components/ui/ChangePasswordModal.tsx     | 132 ++++++++
 src/components/ui/EditServerModal.tsx         |  49 +++
 src/components/ui/PasswordRecoveryModal.tsx   | 284 ++++++++++++++++++
 .../ui/PersistenceSettingsPanel.tsx           | 165 ++++++++++
 src/components/ui/UserSettings.tsx            |   3 +
 src/lib/irc/IRCClient.ts                      |  42 +++
 src/lib/irc/handlers/auth.ts                  |  45 +++
 src/lib/irc/handlers/index.ts                 |   3 +
 src/store/handlers/auth.ts                    |  55 +++-
 src/types/index.ts                            |  13 +-
 10 files changed, 787 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ui/ChangePasswordModal.tsx
 create mode 100644 src/components/ui/PasswordRecoveryModal.tsx
 create mode 100644 src/components/ui/PersistenceSettingsPanel.tsx

diff --git a/src/components/ui/ChangePasswordModal.tsx b/src/components/ui/ChangePasswordModal.tsx
new file mode 100644
index 00000000..fc57e297
--- /dev/null
+++ b/src/components/ui/ChangePasswordModal.tsx
@@ -0,0 +1,132 @@
+// In-session password rotation via SETPASS (draft/account-recovery).
+//
+// The user is already SASL-authenticated, so we don't need a recovery
+// code -- the server accepts SETPASS on its own when the connection
+// holds a SASL session for the target account.
+
+import type React from "react";
+import { useEffect, useState } from "react";
+import ircClient from "../../lib/ircClient";
+
+interface Props {
+  serverId: string;
+  onClose: () => void;
+}
+
+export const ChangePasswordModal: React.FC<Props> = ({ serverId, onClose }) => {
+  const [newPass, setNewPass] = useState("");
+  const [confirmPass, setConfirmPass] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [info, setInfo] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    const onSetpassNote = (p: {
+      serverId: string;
+      code: string;
+      args: string[];
+    }) => {
+      if (p.serverId !== serverId) return;
+      if (p.code === "SUCCESS") {
+        setBusy(false);
+        setDone(true);
+        setInfo(p.args.slice(1).join(" ") || "Password updated.");
+      }
+    };
+    const onSetpassFail = (p: {
+      serverId: string;
+      code: string;
+      message: string;
+    }) => {
+      if (p.serverId !== serverId) return;
+      setBusy(false);
+      setErr(p.message || `Could not update password: ${p.code}`);
+    };
+    ircClient.on("SETPASS_NOTE", onSetpassNote);
+    ircClient.on("SETPASS_FAIL", onSetpassFail);
+    return () => {
+      ircClient.deleteHook("SETPASS_NOTE", onSetpassNote);
+      ircClient.deleteHook("SETPASS_FAIL", onSetpassFail);
+    };
+  }, [serverId]);
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErr(null);
+    if (newPass.length < 3) {
+      setErr("Pick a password (3 characters or more).");
+      return;
+    }
+    if (newPass !== confirmPass) {
+      setErr("Passwords don't match.");
+      return;
+    }
+    setBusy(true);
+    ircClient.setpass(serverId, newPass);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+      <div className="bg-discord-dark-200 rounded-lg w-full max-w-md p-5">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold text-white">Change password</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-discord-text-muted hover:text-white"
+          >
+            ✕
+          </button>
+        </div>
+
+        {!done ? (
+          <form onSubmit={submit} className="space-y-3">
+            <p className="text-xs text-discord-text-muted">
+              Other open sessions for this account will be signed out as part of
+              the change. Two-factor authentication settings, if any, are left
+              unchanged.
+            </p>
+            <input
+              type="password"
+              value={newPass}
+              onChange={(e) => setNewPass(e.target.value)}
+              placeholder="New password"
+              className="w-full px-3 py-2 rounded bg-discord-dark-400 text-white"
+              autoFocus
+            />
+            <input
+              type="password"
+              value={confirmPass}
+              onChange={(e) => setConfirmPass(e.target.value)}
+              placeholder="Confirm new password"
+              className="w-full px-3 py-2 rounded bg-discord-dark-400 text-white"
+            />
+            <button
+              type="submit"
+              disabled={busy}
+              className="w-full px-3 py-2 rounded bg-discord-green text-white text-sm font-medium disabled:opacity-50"
+            >
+              {busy ? "Setting…" : "Change password"}
+            </button>
+          </form>
+        ) : (
+          <div className="space-y-3">
+            <p className="text-sm text-white">{info}</p>
+            <button
+              type="button"
+              onClick={onClose}
+              className="w-full px-3 py-2 rounded bg-discord-blue text-white text-sm font-medium"
+            >
+              Done
+            </button>
+          </div>
+        )}
+
+        {err && <p className="text-discord-red text-xs mt-3">{err}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default ChangePasswordModal;
diff --git a/src/components/ui/EditServerModal.tsx b/src/components/ui/EditServerModal.tsx
index 2824d643..e91fe502 100644
--- a/src/components/ui/EditServerModal.tsx
+++ b/src/components/ui/EditServerModal.tsx
@@ -16,7 +16,9 @@ import { useModalBehavior } from "../../hooks/useModalBehavior";
 import { getBuiltinOAuthConfig } from "../../lib/oauth";
 import useStore, { loadSavedServers } from "../../store";
 import type { ServerConfig, ServerOAuthConfig } from "../../types";
+import ChangePasswordModal from "./ChangePasswordModal";
 import { OAuthSection } from "./OAuthSection";
+import PasswordRecoveryModal from "./PasswordRecoveryModal";
 import { TextInput } from "./TextInput";
 
 interface EditServerModalProps {
@@ -72,6 +74,10 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
   const [oauthConfig, setOauthConfig] = useState<ServerOAuthConfig | undefined>(
     serverConfig?.oauth,
   );
+  // draft/account-recovery: opens the matching modals from the
+  // Authentication tab when the server advertises the cap.
+  const [showRecovery, setShowRecovery] = useState(false);
+  const [showChangePassword, setShowChangePassword] = useState(false);
 
   const [error, setError] = useState("");
 
@@ -288,6 +294,36 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
           className={inputClass}
         />
       </section>
+
+      {server?.capabilities?.includes("draft/account-recovery") && (
+        <section>
+          <h4 className="text-discord-text-normal font-medium mb-2">
+            Account password
+          </h4>
+          <p className="text-discord-text-muted text-xs mb-3">
+            Server supports draft/account-recovery -- change or reset the
+            password tied to your account.
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {server.isConnected && (
+              <button
+                type="button"
+                onClick={() => setShowChangePassword(true)}
+                className="px-3 py-2 rounded bg-discord-dark-400 text-discord-text-normal hover:bg-discord-dark-300 text-sm"
+              >
+                Change password
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => setShowRecovery(true)}
+              className="px-3 py-2 rounded bg-discord-dark-400 text-discord-text-muted hover:bg-discord-dark-300 hover:text-white text-sm"
+            >
+              Forgot password?
+            </button>
+          </div>
+        </section>
+      )}
     </div>
   );
 
@@ -590,6 +626,19 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
           {footer}
         </div>
       </div>
+      {showRecovery && (
+        <PasswordRecoveryModal
+          serverId={serverId}
+          initialAccount={saslAccountName || nickname}
+          onClose={() => setShowRecovery(false)}
+        />
+      )}
+      {showChangePassword && (
+        <ChangePasswordModal
+          serverId={serverId}
+          onClose={() => setShowChangePassword(false)}
+        />
+      )}
     </div>,
     document.body,
   );
diff --git a/src/components/ui/PasswordRecoveryModal.tsx b/src/components/ui/PasswordRecoveryModal.tsx
new file mode 100644
index 00000000..1041fe5d
--- /dev/null
+++ b/src/components/ui/PasswordRecoveryModal.tsx
@@ -0,0 +1,284 @@
+// draft/account-recovery: forgot-password flow.
+//
+// Three-stage modal:
+//   1. enter the account name -> server emails a 6-digit code
+//   2. enter the code -> server replies NOTE RECOVER VERIFIED, opening
+//      a setpass-grant on this connection
+//   3. enter the new password -> we send SETPASS :<password>
+//
+// Spec note: the response to RECOVER REQUEST is identical regardless
+// of whether the account exists / has a verified email.  We surface
+// that ambiguity in the UI so the user isn't surprised when an obvious
+// typo silently "works".
+
+import type React from "react";
+import { useEffect, useState } from "react";
+import ircClient from "../../lib/ircClient";
+
+interface Props {
+  serverId: string;
+  initialAccount?: string;
+  onClose: () => void;
+}
+
+type Stage = "request" | "confirm" | "setpass" | "done";
+
+export const PasswordRecoveryModal: React.FC<Props> = ({
+  serverId,
+  initialAccount,
+  onClose,
+}) => {
+  const [stage, setStage] = useState<Stage>("request");
+  const [account, setAccount] = useState(initialAccount ?? "");
+  const [code, setCode] = useState("");
+  const [newPass, setNewPass] = useState("");
+  const [confirmPass, setConfirmPass] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [info, setInfo] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  // Subscribe to RECOVER + SETPASS events for this server.
+  useEffect(() => {
+    const onRecoverNote = (p: {
+      serverId: string;
+      code: string;
+      args: string[];
+    }) => {
+      if (p.serverId !== serverId) return;
+      if (p.code === "CODE_SENT") {
+        setBusy(false);
+        setStage("confirm");
+        // args[0] = account; description follows in args[1] but the
+        // raw NOTE handler stripped the leading ':'.  Recompose for UX.
+        setInfo(
+          p.args.slice(1).join(" ") ||
+            `If ${p.args[0] ?? "that account"} has a verified email on file, a code has been sent.`,
+        );
+      } else if (p.code === "VERIFIED") {
+        setBusy(false);
+        setStage("setpass");
+        setInfo(p.args.slice(1).join(" ") || "Code accepted.");
+      }
+    };
+    const onRecoverFail = (p: {
+      serverId: string;
+      code: string;
+      message: string;
+    }) => {
+      if (p.serverId !== serverId) return;
+      setBusy(false);
+      setErr(p.message || `Recovery failed: ${p.code}`);
+    };
+    const onSetpassNote = (p: {
+      serverId: string;
+      code: string;
+      args: string[];
+    }) => {
+      if (p.serverId !== serverId) return;
+      if (p.code === "SUCCESS") {
+        setBusy(false);
+        setStage("done");
+        setInfo(
+          p.args.slice(1).join(" ") || "Password updated.  You can now log in.",
+        );
+      }
+    };
+    const onSetpassFail = (p: {
+      serverId: string;
+      code: string;
+      message: string;
+    }) => {
+      if (p.serverId !== serverId) return;
+      setBusy(false);
+      setErr(p.message || `SETPASS failed: ${p.code}`);
+    };
+    ircClient.on("RECOVER_NOTE", onRecoverNote);
+    ircClient.on("RECOVER_FAIL", onRecoverFail);
+    ircClient.on("SETPASS_NOTE", onSetpassNote);
+    ircClient.on("SETPASS_FAIL", onSetpassFail);
+    return () => {
+      ircClient.deleteHook("RECOVER_NOTE", onRecoverNote);
+      ircClient.deleteHook("RECOVER_FAIL", onRecoverFail);
+      ircClient.deleteHook("SETPASS_NOTE", onSetpassNote);
+      ircClient.deleteHook("SETPASS_FAIL", onSetpassFail);
+    };
+  }, [serverId]);
+
+  const submitRequest = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErr(null);
+    setInfo(null);
+    const acct = account.trim();
+    if (!acct) {
+      setErr("Enter the account name you want to recover.");
+      return;
+    }
+    setBusy(true);
+    ircClient.recoverRequest(serverId, acct);
+  };
+
+  const submitConfirm = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErr(null);
+    if (!/^\d{6}$/.test(code.trim())) {
+      setErr("Enter the 6-digit code from your email.");
+      return;
+    }
+    setBusy(true);
+    ircClient.recoverConfirm(serverId, account.trim(), code.trim());
+  };
+
+  const submitSetpass = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErr(null);
+    if (newPass.length < 3) {
+      setErr("Pick a password (3 characters or more).");
+      return;
+    }
+    if (newPass !== confirmPass) {
+      setErr("Passwords don't match.");
+      return;
+    }
+    setBusy(true);
+    ircClient.setpass(serverId, newPass);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+      <div className="bg-discord-dark-200 rounded-lg w-full max-w-md p-5">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold text-white">
+            {stage === "done" ? "Password reset complete" : "Forgot password"}
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-discord-text-muted hover:text-white"
+          >
+            ✕
+          </button>
+        </div>
+
+        {stage === "request" && (
+          <form onSubmit={submitRequest} className="space-y-3">
+            <p className="text-sm text-discord-text-muted">
+              Enter your account name. We'll email a 6-digit recovery code to
+              the verified address on file.
+            </p>
+            <input
+              type="text"
+              value={account}
+              onChange={(e) => setAccount(e.target.value)}
+              placeholder="Account name"
+              className="w-full px-3 py-2 rounded bg-discord-dark-400 text-white"
+              autoFocus
+            />
+            <button
+              type="submit"
+              disabled={busy}
+              className="w-full px-3 py-2 rounded bg-discord-blue text-white text-sm font-medium disabled:opacity-50"
+            >
+              {busy ? "Sending…" : "Send recovery code"}
+            </button>
+          </form>
+        )}
+
+        {stage === "confirm" && (
+          <form onSubmit={submitConfirm} className="space-y-3">
+            <p className="text-sm text-white">{info}</p>
+            <p className="text-xs text-discord-text-muted">
+              Note: the server returns the same response whether or not the
+              account has a verified email, so a typo will not be flagged here.
+              If no code arrives within a couple of minutes, double-check the
+              account name.
+            </p>
+            <input
+              type="text"
+              inputMode="numeric"
+              maxLength={6}
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
+              placeholder="000000"
+              className="w-full px-3 py-2 rounded bg-discord-dark-400 text-white tracking-[0.4em] text-center font-mono"
+              autoFocus
+            />
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => {
+                  setStage("request");
+                  setCode("");
+                  setErr(null);
+                }}
+                className="px-3 py-2 rounded bg-discord-dark-100 text-white text-sm"
+              >
+                Back
+              </button>
+              <button
+                type="submit"
+                disabled={busy}
+                className="flex-1 px-3 py-2 rounded bg-discord-blue text-white text-sm font-medium disabled:opacity-50"
+              >
+                {busy ? "Verifying…" : "Verify code"}
+              </button>
+            </div>
+          </form>
+        )}
+
+        {stage === "setpass" && (
+          <form onSubmit={submitSetpass} className="space-y-3">
+            <p className="text-sm text-white">{info}</p>
+            <p className="text-xs text-discord-text-muted">
+              You have a few minutes to choose a new password.
+            </p>
+            <input
+              type="password"
+              value={newPass}
+              onChange={(e) => setNewPass(e.target.value)}
+              placeholder="New password"
+              className="w-full px-3 py-2 rounded bg-discord-dark-400 text-white"
+              autoFocus
+            />
+            <input
+              type="password"
+              value={confirmPass}
+              onChange={(e) => setConfirmPass(e.target.value)}
+              placeholder="Confirm new password"
+              className="w-full px-3 py-2 rounded bg-discord-dark-400 text-white"
+            />
+            <button
+              type="submit"
+              disabled={busy}
+              className="w-full px-3 py-2 rounded bg-discord-green text-white text-sm font-medium disabled:opacity-50"
+            >
+              {busy ? "Setting…" : "Set new password"}
+            </button>
+          </form>
+        )}
+
+        {stage === "done" && (
+          <div className="space-y-3">
+            <p className="text-sm text-white">{info}</p>
+            <p className="text-xs text-discord-text-muted">
+              For security, all existing sessions for this account were signed
+              out and account-scoped server state was purged. If two-factor
+              authentication was enabled, it remains enabled — the next login
+              will still require it.
+            </p>
+            <button
+              type="button"
+              onClick={onClose}
+              className="w-full px-3 py-2 rounded bg-discord-blue text-white text-sm font-medium"
+            >
+              Done
+            </button>
+          </div>
+        )}
+
+        {err && <p className="text-discord-red text-xs mt-3">{err}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default PasswordRecoveryModal;
diff --git a/src/components/ui/PersistenceSettingsPanel.tsx b/src/components/ui/PersistenceSettingsPanel.tsx
new file mode 100644
index 00000000..436b27ac
--- /dev/null
+++ b/src/components/ui/PersistenceSettingsPanel.tsx
@@ -0,0 +1,165 @@
+// draft/persistence settings panel.
+//
+// Surfaces a tri-state preference (Always on / Always off / Use server
+// default) plus a read-only effective-state badge so the user can
+// reconcile their preference with what the server is actually doing
+// (e.g. their preference is DEFAULT and the server default flipped).
+//
+// Mounts only when the connection has acked draft/persistence, so we
+// can safely call PERSISTENCE GET on first render without spamming
+// servers that don't support it.
+
+import type React from "react";
+import { useEffect, useState } from "react";
+import ircClient from "../../lib/ircClient";
+import useStore from "../../store";
+
+interface Props {
+  serverId: string;
+}
+
+type Pref = "ON" | "OFF" | "DEFAULT";
+
+const OPTIONS: { value: Pref; label: string; helper: string }[] = [
+  {
+    value: "ON",
+    label: "Stay in channels",
+    helper:
+      "When you disconnect, you remain in your channels as a ghost so you can pick up where you left off when you reconnect with the same account.",
+  },
+  {
+    value: "OFF",
+    label: "Leave on disconnect",
+    helper:
+      "Clean exit when you close the app: you part every channel and the server forgets your session immediately.",
+  },
+  {
+    value: "DEFAULT",
+    label: "Use server default",
+    helper:
+      "Inherit whatever the network operators have configured. Most networks default to keeping you online.",
+  },
+];
+
+export const PersistenceSettingsPanel: React.FC<Props> = ({ serverId }) => {
+  const server = useStore((s) => s.servers.find((srv) => srv.id === serverId));
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const supported =
+    server?.capabilities?.includes("draft/persistence") ?? false;
+  const isConnected = server?.isConnected ?? false;
+  const preference = server?.persistencePreference ?? "DEFAULT";
+  const effective = server?.persistenceEffective;
+
+  // Refresh on mount in case the cap acked before this panel was open
+  // and the deferred GET has already fired (we still want a current
+  // read in case the server-wide default has rolled).
+  useEffect(() => {
+    if (!supported || !isConnected) return;
+    ircClient.persistenceGet(serverId);
+  }, [serverId, supported, isConnected]);
+
+  // Flip busy off when a STATUS update lands.
+  useEffect(() => {
+    const onStatus = (p: { serverId: string }) => {
+      if (p.serverId === serverId) setBusy(false);
+    };
+    const onFail = (p: { serverId: string; code: string; message: string }) => {
+      if (p.serverId !== serverId) return;
+      setBusy(false);
+      setError(p.message || `Server rejected the request (${p.code}).`);
+    };
+    ircClient.on("PERSISTENCE_STATUS", onStatus);
+    ircClient.on("PERSISTENCE_FAIL", onFail);
+    return () => {
+      ircClient.deleteHook("PERSISTENCE_STATUS", onStatus);
+      ircClient.deleteHook("PERSISTENCE_FAIL", onFail);
+    };
+  }, [serverId]);
+
+  if (!supported) return null;
+
+  const apply = (value: Pref) => {
+    if (!isConnected || value === preference) return;
+    setError(null);
+    setBusy(true);
+    ircClient.persistenceSet(serverId, value);
+  };
+
+  return (
+    <div className="space-y-3 p-4 bg-discord-dark-400 rounded">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <h3 className="text-discord-text-normal font-medium">
+            Session persistence
+          </h3>
+          <p className="text-discord-text-muted text-sm">
+            Stay in your channels even after you disconnect.
+          </p>
+        </div>
+        {effective && (
+          <span
+            className={`px-2 py-1 rounded text-xs font-medium ${
+              effective === "ON"
+                ? "bg-discord-green/20 text-discord-green"
+                : "bg-discord-dark-300 text-discord-text-muted"
+            }`}
+          >
+            Currently {effective}
+          </span>
+        )}
+      </div>
+
+      {!isConnected && (
+        <p className="text-xs text-discord-text-muted italic">
+          Connect to this server to change persistence.
+        </p>
+      )}
+
+      <div className="space-y-2">
+        {OPTIONS.map((opt) => {
+          const active = preference === opt.value;
+          return (
+            <button
+              type="button"
+              key={opt.value}
+              onClick={() => apply(opt.value)}
+              disabled={!isConnected || busy}
+              className={`w-full text-left rounded p-3 border ${
+                active
+                  ? "border-discord-primary bg-discord-primary/10"
+                  : "border-discord-dark-300 bg-discord-dark-500 hover:bg-discord-dark-300"
+              } disabled:opacity-50 disabled:cursor-not-allowed`}
+            >
+              <div className="flex items-center gap-2">
+                <span
+                  className={`w-3 h-3 rounded-full border ${
+                    active
+                      ? "border-discord-primary bg-discord-primary"
+                      : "border-discord-text-muted"
+                  }`}
+                />
+                <span className="text-discord-text-normal text-sm font-medium">
+                  {opt.label}
+                </span>
+                {active && (
+                  <span className="ml-auto text-xs text-discord-text-muted">
+                    Current
+                  </span>
+                )}
+              </div>
+              <p className="text-xs text-discord-text-muted mt-1 ml-5">
+                {opt.helper}
+              </p>
+            </button>
+          );
+        })}
+      </div>
+
+      {error && <p className="text-discord-red text-xs">{error}</p>}
+    </div>
+  );
+};
+
+export default PersistenceSettingsPanel;
diff --git a/src/components/ui/UserSettings.tsx b/src/components/ui/UserSettings.tsx
index 1dae7e62..2d2a568a 100644
--- a/src/components/ui/UserSettings.tsx
+++ b/src/components/ui/UserSettings.tsx
@@ -30,6 +30,7 @@ import useStore, {
   serverSupportsMetadata,
 } from "../../store";
 import AvatarUpload from "./AvatarUpload";
+import PersistenceSettingsPanel from "./PersistenceSettingsPanel";
 import { SettingField } from "./settings/SettingRenderer";
 import { TextInput } from "./TextInput";
 import UserProfileModal from "./UserProfileModal";
@@ -1306,6 +1307,8 @@ export const UserSettings: React.FC = React.memo(() => {
 
     return (
       <div className="space-y-4">
+        {/* draft/persistence: shown only when the server advertises it */}
+        <PersistenceSettingsPanel serverId={currentServer.id} />
         {/* Two-Factor Authentication */}
         {supportsTwoFactor && (
           <div className="space-y-4 p-4 bg-discord-dark-400 rounded">
diff --git a/src/lib/irc/IRCClient.ts b/src/lib/irc/IRCClient.ts
index 3f0063b2..d2956f5a 100644
--- a/src/lib/irc/IRCClient.ts
+++ b/src/lib/irc/IRCClient.ts
@@ -254,6 +254,22 @@ export interface EventMap {
     code: string;
     args: string[];
   };
+  // draft/account-recovery: convenient typed projection of the
+  // generic NOTE/FAIL events for the RECOVER + SETPASS commands.
+  // The dispatch in handlers/auth.ts emits these alongside the
+  // generic NOTE/FAIL.
+  RECOVER_NOTE: EventWithTags & { code: string; args: string[] };
+  RECOVER_FAIL: EventWithTags & { code: string; message: string };
+  SETPASS_NOTE: EventWithTags & { code: string; args: string[] };
+  SETPASS_FAIL: EventWithTags & { code: string; message: string };
+  // draft/persistence: server reply
+  // `:server PERSISTENCE STATUS <client-setting> <effective-setting>`
+  // where each is one of ON | OFF | DEFAULT (effective is always ON|OFF).
+  PERSISTENCE_STATUS: BaseIRCEvent & {
+    preference: "ON" | "OFF" | "DEFAULT";
+    effective: "ON" | "OFF";
+  };
+  PERSISTENCE_FAIL: EventWithTags & { code: string; message: string };
   // obsidianirc/cmdslist: server is reporting an add/remove delta of
   // commands the user can invoke right now.  Ops are individual
   // tokens of the form "+cmd" or "-cmd" (multiple per wire line).
@@ -1340,6 +1356,32 @@ export class IRCClient implements IRCClientContext {
     this.sendRaw(serverId, command);
   }
 
+  // draft/account-recovery: forgotten-password flow.
+  recoverRequest(serverId: string, account: string): void {
+    this.sendRaw(serverId, `RECOVER REQUEST ${account}`);
+  }
+
+  recoverConfirm(serverId: string, account: string, code: string): void {
+    this.sendRaw(serverId, `RECOVER CONFIRM ${account} ${code}`);
+  }
+
+  // SETPASS lives in the same draft/account-recovery cap.  The new
+  // password is sent as the IRC trailing parameter so it MAY contain
+  // spaces (for passphrases).  No base64 -- the password is UTF-8.
+  setpass(serverId: string, newPassword: string): void {
+    this.sendRaw(serverId, `SETPASS :${newPassword}`);
+  }
+
+  // draft/persistence: read or set the per-account ghost-on-disconnect
+  // preference.  Server responds with PERSISTENCE STATUS.
+  persistenceGet(serverId: string): void {
+    this.sendRaw(serverId, "PERSISTENCE GET");
+  }
+
+  persistenceSet(serverId: string, value: "ON" | "OFF" | "DEFAULT"): void {
+    this.sendRaw(serverId, `PERSISTENCE SET ${value}`);
+  }
+
   // MONITOR commands
   monitorAdd(serverId: string, targets: string[]): void {
     const targetsStr = targets.join(",");
diff --git a/src/lib/irc/handlers/auth.ts b/src/lib/irc/handlers/auth.ts
index 4fa9e892..d7e4c7a5 100644
--- a/src/lib/irc/handlers/auth.ts
+++ b/src/lib/irc/handlers/auth.ts
@@ -30,6 +30,15 @@ export function handleFail(
     target,
     message,
   });
+  // draft/account-recovery typed projections so components don't
+  // have to filter the FAIL stream by command on every render.
+  if (cmd === "RECOVER")
+    ctx.triggerEvent("RECOVER_FAIL", { serverId, mtags, code, message });
+  else if (cmd === "SETPASS")
+    ctx.triggerEvent("SETPASS_FAIL", { serverId, mtags, code, message });
+  // draft/persistence FAIL projection
+  else if (cmd === "PERSISTENCE")
+    ctx.triggerEvent("PERSISTENCE_FAIL", { serverId, mtags, code, message });
 }
 
 export function handleWarn(
@@ -80,6 +89,22 @@ export function handleNote(
       args: parv.slice(2),
     });
   }
+  // draft/account-recovery typed projections
+  if (cmd === "RECOVER") {
+    ctx.triggerEvent("RECOVER_NOTE", {
+      serverId,
+      mtags,
+      code,
+      args: parv.slice(2),
+    });
+  } else if (cmd === "SETPASS") {
+    ctx.triggerEvent("SETPASS_NOTE", {
+      serverId,
+      mtags,
+      code,
+      args: parv.slice(2),
+    });
+  }
 }
 
 export function handleSuccess(
@@ -190,3 +215,23 @@ export function handleExtjwt(
     jwtToken,
   });
 }
+
+// draft/persistence: server reply to PERSISTENCE GET / SET
+//   :server PERSISTENCE STATUS <client-setting> <effective-setting>
+// where client-setting is ON | OFF | DEFAULT and effective is ON | OFF.
+export function handlePersistence(
+  ctx: IRCClientContext,
+  serverId: string,
+  _source: string,
+  parv: string[],
+  _mtags: Record<string, string> | undefined,
+): void {
+  const sub = parv[0]?.toUpperCase();
+  if (sub !== "STATUS") return;
+  const rawPref = (parv[1] ?? "").toUpperCase();
+  const rawEff = (parv[2] ?? "").toUpperCase();
+  const preference: "ON" | "OFF" | "DEFAULT" =
+    rawPref === "ON" || rawPref === "OFF" ? rawPref : "DEFAULT";
+  const effective: "ON" | "OFF" = rawEff === "ON" ? "ON" : "OFF";
+  ctx.triggerEvent("PERSISTENCE_STATUS", { serverId, preference, effective });
+}
diff --git a/src/lib/irc/handlers/index.ts b/src/lib/irc/handlers/index.ts
index daff47be..36506133 100644
--- a/src/lib/irc/handlers/index.ts
+++ b/src/lib/irc/handlers/index.ts
@@ -4,6 +4,7 @@ import {
   handleExtjwt,
   handleFail,
   handleNote,
+  handlePersistence,
   handleRegister,
   handleSuccess,
   handleTwoFA,
@@ -292,6 +293,8 @@ export const IRC_DISPATCH: Record<string, HandlerFn> = {
     handleTwoFA(ctx, serverId, source, parv, mtags),
   EXTJWT: (ctx, serverId, source, parv, mtags) =>
     handleExtjwt(ctx, serverId, source, parv, mtags),
+  PERSISTENCE: (ctx, serverId, source, parv, mtags) =>
+    handlePersistence(ctx, serverId, source, parv, mtags),
   CMDSLIST: (ctx, serverId, source, parv, mtags) =>
     handleCmdslist(ctx, serverId, source, parv, mtags),
 
diff --git a/src/store/handlers/auth.ts b/src/store/handlers/auth.ts
index bcec406c..b0968e69 100644
--- a/src/store/handlers/auth.ts
+++ b/src/store/handlers/auth.ts
@@ -27,6 +27,7 @@ type SaslMech =
   | "PLAIN"
   | "SCRAM-SHA-256"
   | "DRAFT-WEBAUTHN-BIO"
+  | "EXTERNAL"
   | "IRCV3BEARER";
 
 interface SaslSession {
@@ -62,8 +63,17 @@ const sessions = new Map<string, SaslSession>();
 
 function chooseMechanism(
   available: string[],
-  pref: "auto" | "PLAIN" | "SCRAM-SHA-256" | "DRAFT-WEBAUTHN-BIO" | undefined,
+  pref:
+    | "auto"
+    | "PLAIN"
+    | "SCRAM-SHA-256"
+    | "DRAFT-WEBAUTHN-BIO"
+    | "EXTERNAL"
+    | undefined,
 ): SaslMech {
+  // EXTERNAL is a deliberate user choice (the cert is on this device,
+  // typically) -- never picked under "auto".
+  if (pref === "EXTERNAL" && available.includes("EXTERNAL")) return "EXTERNAL";
   if (pref === "DRAFT-WEBAUTHN-BIO" && available.includes("DRAFT-WEBAUTHN-BIO"))
     return "DRAFT-WEBAUTHN-BIO";
   if (pref === "PLAIN") return "PLAIN";
@@ -84,10 +94,11 @@ function loadCreds(
     ? serv.saslAccountName
     : serv.nickname;
   const pass = serv.saslPassword ? atob(serv.saslPassword) : undefined;
-  if (!user || !pass) return null;
+  // EXTERNAL has no password -- the TLS cert is the proof.
+  if (!user || (serv.saslMechanism !== "EXTERNAL" && !pass)) return null;
   const available = ircClient.getSaslMechanisms(serverId);
   const mech = chooseMechanism(available, serv.saslMechanism);
-  return { user, pass, mech };
+  return { user, pass: pass ?? "", mech };
 }
 
 function clearSession(serverId: string) {
@@ -225,6 +236,14 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     }
 
     try {
+      if (session.mech === "EXTERNAL") {
+        // SASL EXTERNAL: server sends `+` to acknowledge the mechanism,
+        // we reply with `+` to mean "use the identity already
+        // established by the TLS cert".  No further frames.
+        if (param === "+") ircClient.sendRaw(serverId, "AUTHENTICATE +");
+        return;
+      }
+
       if (session.mech === "IRCV3BEARER") {
         if (param !== "+") return;
         if (!session.oauthBearer) return;
@@ -624,6 +643,36 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
     },
   );
 
+  // draft/persistence: cache the server's reported preference + effective
+  // setting so the UI can render a tri-state toggle without re-querying
+  // the server every time the panel opens.
+  ircClient.on("PERSISTENCE_STATUS", ({ serverId, preference, effective }) => {
+    store.setState((state) => ({
+      servers: state.servers.map((server) =>
+        server.id === serverId
+          ? {
+              ...server,
+              persistencePreference: preference,
+              persistenceEffective: effective,
+            }
+          : server,
+      ),
+    }));
+  });
+
+  // After CAP ACK we know whether the server supports draft/persistence.
+  // Issue an initial PERSISTENCE GET so the settings panel has fresh
+  // state by the time the user opens it.
+  ircClient.on("CAP_ACKNOWLEDGED", ({ serverId, key }) => {
+    if (key !== "draft/persistence") return;
+    setTimeout(() => {
+      const state = store.getState();
+      const server = state.servers.find((s) => s.id === serverId);
+      if (!server?.isConnected) return;
+      ircClient.persistenceGet(serverId);
+    }, 1500);
+  });
+
   // obsidianirc/cmdslist: maintain a lowercase set of invocable
   // commands per server.  Additions and removals can arrive in the
   // same wire line, so apply both atomically.
diff --git a/src/types/index.ts b/src/types/index.ts
index e889ed6e..1df4168e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -46,6 +46,12 @@ export interface Server {
   jwtToken?: string; // JWT token for filehost authentication
   isUnrealIRCd?: boolean; // Whether this server is running UnrealIRCd
   elist?: string; // ELIST ISUPPORT value for extended LIST capabilities
+  // draft/persistence state (populated from PERSISTENCE STATUS replies).
+  // `preference` is what the user has explicitly set on this account
+  // (ON/OFF) or DEFAULT meaning "follow the server-wide default".
+  // `effective` is what the server is actually doing right now.
+  persistencePreference?: "ON" | "OFF" | "DEFAULT";
+  persistenceEffective?: "ON" | "OFF";
   // obsidianirc/cmdslist: lowercase set of commands this user can
   // currently invoke on this server.  Used to drive the slash-command
   // suggestion popover.  undefined = the cap is not negotiated.
@@ -65,7 +71,12 @@ export interface ServerConfig {
   saslEnabled: boolean;
   // "auto" prefers SCRAM-SHA-256 when the server advertises it and falls
   // back to PLAIN, "webauthn" uses DRAFT-WEBAUTHN-BIO directly.
-  saslMechanism?: "auto" | "PLAIN" | "SCRAM-SHA-256" | "DRAFT-WEBAUTHN-BIO";
+  saslMechanism?:
+    | "auto"
+    | "PLAIN"
+    | "SCRAM-SHA-256"
+    | "DRAFT-WEBAUTHN-BIO"
+    | "EXTERNAL";
   skipLinkSecurityWarning?: boolean;
   skipLocalhostWarning?: boolean;
   operUsername?: string;

From f3dcbb76847a0363e672d12e9e6f846fca7750a8 Mon Sep 17 00:00:00 2001
From: Valerie Liu <79415174+ValwareIRC@users.noreply.github.com>
Date: Sun, 10 May 2026 03:29:41 +0100
Subject: [PATCH 15/16] Feat/read marker (#182)

* feat: draft/account-recovery (RECOVER + SETPASS) and SASL EXTERNAL

Implements the client side of the draft/account-recovery WIP spec we
authored at extensions/account-recovery.md, plus opt-in SASL
EXTERNAL for cert-based login.

* IRCClient.recoverRequest / recoverConfirm / setpass send the new
  commands.  SETPASS uses the IRC trailing-parameter form so passwords
  may contain spaces (passphrases).  No base64.
* New typed events RECOVER_NOTE / RECOVER_FAIL / SETPASS_NOTE /
  SETPASS_FAIL projected from the generic NOTE/FAIL stream so
  components don't have to filter by command on every render.
* PasswordRecoveryModal: three-stage flow (account -> code -> new
  password).  Surfaces the spec's account-existence-ambiguity to the
  user instead of silently swallowing typos.
* ChangePasswordModal: one-shot SETPASS for in-session rotation; only
  shown while the connection is authenticated.
* EditServerModal exposes both modals when the server advertises
  draft/account-recovery.
* SASL EXTERNAL added to the SaslMech union and the AUTHENTICATE
  state machine; an EXTERNAL-configured server replies '+' to '+' and
  the TLS cert provides identity.  EXTERNAL is only chosen when the
  user explicitly picks it -- never under "auto", since it requires a
  device-side client cert.

* feat: draft/persistence settings panel

When the server advertises draft/persistence, the user's account
settings tab now gets a tri-state preference:

  - Stay in channels (ON) -- ghost survives disconnect
  - Leave on disconnect (OFF) -- clean exit
  - Use server default (DEFAULT) -- inherit operator setting

Plumbing:

  - IRCClient.persistenceGet / persistenceSet send PERSISTENCE GET
    and PERSISTENCE SET ON|OFF|DEFAULT.
  - handlePersistence parses the server's PERSISTENCE STATUS reply
    and emits a typed PERSISTENCE_STATUS event; the FAIL handler
    projects PERSISTENCE_FAIL alongside the generic FAIL.
  - registerAuthHandlers caches both preference + effective state on
    the Server record, and fires an automatic PERSISTENCE GET 1.5s
    after CAP ACK so the panel has fresh state when the user opens
    settings (the spec gates the command on IsLoggedIn, hence the
    small post-SASL delay).
  - PersistenceSettingsPanel renders a radio-card list with helper
    text and an "Currently ON/OFF" badge so the user can reconcile
    their preference with what the server is actually doing (e.g.
    preference DEFAULT but the operator default flipped).
  - The panel is mounted in UserSettings -> Account, gated on the
    server's CAP set, so non-supporting networks see nothing change.

* feat: draft/read-marker (MARKREAD)

Cross-session read state: when one of your devices reads up to a
particular message, the other devices clear their unread / mention
state for that buffer too.

  - draft/read-marker added to ourCaps so the cap is auto-requested
    when the server advertises it.
  - IRCClient.markreadGet / markreadSet send the GET and SET wire
    forms.  SET uses the "timestamp=YYYY-MM-DDThh:mm:ss.sssZ" format
    the spec requires.
  - handleMarkread parses ":server MARKREAD <target> {timestamp=ts|*}"
    into a typed MARKREAD event with timestamp: string | null.
  - registerReadMarkerHandlers caches the marker on the matching
    Channel (case-insensitive name match) or PrivateChat (username
    match).  Adds readMarker / readMarkerFetched to the type defs.
  - selectChannel: when the user opens a channel, send MARKREAD
    SET with the latest message timestamp in that channel's history.
  - selectPrivateChat: PMs aren't auto-pushed by the server, so we
    issue a one-shot MARKREAD GET on first open to pick up any
    marker another session set earlier.  Subsequent re-selections
    just push the latest timestamp via SET.
  - MARKREAD_FAIL projection on the FAIL stream so future UI can
    surface server-side rejections without filtering generic FAIL.
---
 src/lib/irc/IRCClient.ts           | 27 +++++++++++++
 src/lib/irc/handlers/auth.ts       | 11 ++++++
 src/lib/irc/handlers/index.ts      |  3 ++
 src/lib/irc/handlers/readMarker.ts | 28 ++++++++++++++
 src/store/handlers/auth.ts         |  9 ++++-
 src/store/handlers/index.ts        |  2 +
 src/store/handlers/readMarker.ts   | 51 +++++++++++++++++++++++++
 src/store/index.ts                 | 61 ++++++++++++++++++++++++++++--
 src/types/index.ts                 | 10 +++++
 9 files changed, 197 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/irc/handlers/readMarker.ts
 create mode 100644 src/store/handlers/readMarker.ts

diff --git a/src/lib/irc/IRCClient.ts b/src/lib/irc/IRCClient.ts
index d2956f5a..7464d601 100644
--- a/src/lib/irc/IRCClient.ts
+++ b/src/lib/irc/IRCClient.ts
@@ -270,6 +270,18 @@ export interface EventMap {
     effective: "ON" | "OFF";
   };
   PERSISTENCE_FAIL: EventWithTags & { code: string; message: string };
+  // draft/read-marker: server reply
+  // `:server MARKREAD <target> {timestamp=<ts>|*}`.  `timestamp` is null
+  // when the server reports "*" (no marker on file yet).
+  MARKREAD: BaseIRCEvent & {
+    target: string;
+    timestamp: string | null;
+  };
+  MARKREAD_FAIL: EventWithTags & {
+    code: string;
+    target?: string;
+    message: string;
+  };
   // obsidianirc/cmdslist: server is reporting an add/remove delta of
   // commands the user can invoke right now.  Ops are individual
   // tokens of the form "+cmd" or "-cmd" (multiple per wire line).
@@ -503,6 +515,7 @@ export class IRCClient implements IRCClientContext {
     "invite-notify",
     "monitor",
     "extended-monitor",
+    "draft/read-marker",
     "obsidianirc/cmdslist",
     // Note: unrealircd.org/link-security is informational only, don't request it
   ];
@@ -1382,6 +1395,20 @@ export class IRCClient implements IRCClientContext {
     this.sendRaw(serverId, `PERSISTENCE SET ${value}`);
   }
 
+  // draft/read-marker: ask the server for the stored marker for a
+  // target.  Channels are auto-pushed on JOIN, so this is mostly used
+  // when a PM buffer is opened for the first time.
+  markreadGet(serverId: string, target: string): void {
+    this.sendRaw(serverId, `MARKREAD ${target}`);
+  }
+
+  // draft/read-marker: tell the server the user has read up to
+  // `timestamp` in `target`.  Server clamps to monotonically-increasing
+  // values and replies with MARKREAD echoing whatever it stored.
+  markreadSet(serverId: string, target: string, timestamp: string): void {
+    this.sendRaw(serverId, `MARKREAD ${target} timestamp=${timestamp}`);
+  }
+
   // MONITOR commands
   monitorAdd(serverId: string, targets: string[]): void {
     const targetsStr = targets.join(",");
diff --git a/src/lib/irc/handlers/auth.ts b/src/lib/irc/handlers/auth.ts
index d7e4c7a5..4557d47e 100644
--- a/src/lib/irc/handlers/auth.ts
+++ b/src/lib/irc/handlers/auth.ts
@@ -39,6 +39,17 @@ export function handleFail(
   // draft/persistence FAIL projection
   else if (cmd === "PERSISTENCE")
     ctx.triggerEvent("PERSISTENCE_FAIL", { serverId, mtags, code, message });
+  // draft/read-marker FAIL projection.  The MARKREAD FAIL form has
+  // an optional <target> in parv[2]; the message is whatever's left.
+  else if (cmd === "MARKREAD") {
+    ctx.triggerEvent("MARKREAD_FAIL", {
+      serverId,
+      mtags,
+      code,
+      target,
+      message,
+    });
+  }
 }
 
 export function handleWarn(
diff --git a/src/lib/irc/handlers/index.ts b/src/lib/irc/handlers/index.ts
index 36506133..08940f0d 100644
--- a/src/lib/irc/handlers/index.ts
+++ b/src/lib/irc/handlers/index.ts
@@ -67,6 +67,7 @@ import {
   handleMonOffline,
   handleMonOnline,
 } from "./monitoring";
+import { handleMarkread } from "./readMarker";
 import {
   handleAway,
   handleChghost,
@@ -295,6 +296,8 @@ export const IRC_DISPATCH: Record<string, HandlerFn> = {
     handleExtjwt(ctx, serverId, source, parv, mtags),
   PERSISTENCE: (ctx, serverId, source, parv, mtags) =>
     handlePersistence(ctx, serverId, source, parv, mtags),
+  MARKREAD: (ctx, serverId, source, parv, mtags) =>
+    handleMarkread(ctx, serverId, source, parv, mtags),
   CMDSLIST: (ctx, serverId, source, parv, mtags) =>
     handleCmdslist(ctx, serverId, source, parv, mtags),
 
diff --git a/src/lib/irc/handlers/readMarker.ts b/src/lib/irc/handlers/readMarker.ts
new file mode 100644
index 00000000..c797a48a
--- /dev/null
+++ b/src/lib/irc/handlers/readMarker.ts
@@ -0,0 +1,28 @@
+// draft/read-marker: server replies look like
+//   :server MARKREAD <target> timestamp=YYYY-MM-DDThh:mm:ss.sssZ
+//   :server MARKREAD <target> *
+// where '*' means "no marker on file yet".  We project to a typed
+// MARKREAD event with `timestamp: string | null`.
+
+import type { IRCClientContext } from "../IRCClientContext";
+
+const TS_PREFIX = "timestamp=";
+
+export function handleMarkread(
+  ctx: IRCClientContext,
+  serverId: string,
+  _source: string,
+  parv: string[],
+  _mtags: Record<string, string> | undefined,
+): void {
+  const target = parv[0];
+  const tsParam = parv[1] ?? "";
+  if (!target) return;
+  let timestamp: string | null = null;
+  if (tsParam && tsParam !== "*") {
+    timestamp = tsParam.startsWith(TS_PREFIX)
+      ? tsParam.slice(TS_PREFIX.length)
+      : tsParam;
+  }
+  ctx.triggerEvent("MARKREAD", { serverId, target, timestamp });
+}
diff --git a/src/store/handlers/auth.ts b/src/store/handlers/auth.ts
index b0968e69..81e642cc 100644
--- a/src/store/handlers/auth.ts
+++ b/src/store/handlers/auth.ts
@@ -662,9 +662,15 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
 
   // After CAP ACK we know whether the server supports draft/persistence.
   // Issue an initial PERSISTENCE GET so the settings panel has fresh
-  // state by the time the user opens it.
+  // state by the time the user opens it.  We only do this once per
+  // (serverId, account) login -- the spec gates the command on
+  // IsLoggedIn, so we wait for the SASL success path to mark the
+  // session complete.
   ircClient.on("CAP_ACKNOWLEDGED", ({ serverId, key }) => {
     if (key !== "draft/persistence") return;
+    // Defer the GET until a tick later so SASL has had a chance to
+    // complete; the server returns ACCOUNT_REQUIRED otherwise and
+    // we'd just have to retry.
     setTimeout(() => {
       const state = store.getState();
       const server = state.servers.find((s) => s.id === serverId);
@@ -672,7 +678,6 @@ export function registerAuthHandlers(store: StoreApi<AppState>): void {
       ircClient.persistenceGet(serverId);
     }, 1500);
   });
-
   // obsidianirc/cmdslist: maintain a lowercase set of invocable
   // commands per server.  Additions and removals can arrive in the
   // same wire line, so apply both atomically.
diff --git a/src/store/handlers/index.ts b/src/store/handlers/index.ts
index 40c67902..72ff7d98 100644
--- a/src/store/handlers/index.ts
+++ b/src/store/handlers/index.ts
@@ -6,6 +6,7 @@ import { registerChannelHandlers } from "./channels";
 import { registerConnectionHandlers } from "./connection";
 import { registerMessageHandlers } from "./messages";
 import { registerMetadataHandlers } from "./metadata";
+import { registerReadMarkerHandlers } from "./readMarker";
 import { registerTicTacToeHandlers } from "./tictactoe";
 import { registerUserHandlers } from "./users";
 import { registerWhoisHandlers } from "./whois";
@@ -19,5 +20,6 @@ export function registerAllHandlers(store: StoreApi<AppState>): void {
   registerMetadataHandlers(store);
   registerBatchHandlers(store);
   registerAuthHandlers(store);
+  registerReadMarkerHandlers(store);
   registerTicTacToeHandlers(store);
 }
diff --git a/src/store/handlers/readMarker.ts b/src/store/handlers/readMarker.ts
new file mode 100644
index 00000000..bf373973
--- /dev/null
+++ b/src/store/handlers/readMarker.ts
@@ -0,0 +1,51 @@
+// draft/read-marker: cache the per-target marker on the matching
+// Channel / PrivateChat in the Zustand store.  The marker is what the
+// rest of the UI uses to decide which messages to count as unread,
+// and what to clear notifications for.
+//
+// Channel matches: the target case-insensitively equals the channel
+// name.
+// PrivateChat matches: the target case-insensitively equals the
+// other participant's username.
+
+import type { StoreApi } from "zustand";
+import ircClient from "../../lib/ircClient";
+import type { AppState } from "../index";
+
+function eqIC(a: string, b: string): boolean {
+  return a.toLowerCase() === b.toLowerCase();
+}
+
+export function registerReadMarkerHandlers(store: StoreApi<AppState>): void {
+  ircClient.on("MARKREAD", ({ serverId, target, timestamp }) => {
+    store.setState((state) => {
+      let touched = false;
+      const updatedServers = state.servers.map((server) => {
+        if (server.id !== serverId) return server;
+        let serverTouched = false;
+
+        const channels = server.channels.map((channel) => {
+          if (!eqIC(channel.name, target)) return channel;
+          if (channel.readMarker === timestamp) return channel;
+          serverTouched = true;
+          return { ...channel, readMarker: timestamp };
+        });
+
+        const privateChats = (server.privateChats || []).map((pc) => {
+          if (!eqIC(pc.username, target)) return pc;
+          const same = pc.readMarker === timestamp;
+          if (same && pc.readMarkerFetched) return pc;
+          serverTouched = true;
+          return { ...pc, readMarker: timestamp, readMarkerFetched: true };
+        });
+
+        if (!serverTouched) return server;
+        touched = true;
+        return { ...server, channels, privateChats };
+      });
+
+      if (!touched) return {};
+      return { servers: updatedServers };
+    });
+  });
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index 1a70b458..2902669a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -114,6 +114,35 @@ export const getChannelMessages = (serverId: string, channelId: string) => {
   return state.messages[key] || [];
 };
 
+// draft/read-marker: find the latest message timestamp (across normal
+// chat messages -- system / event rows are ignored so reading a "X
+// joined" line doesn't move the marker).  Returns an ISO 8601 string
+// in the spec's format, or null if there's nothing to mark.
+const ISO_DROP_END_RX = /Z?$/;
+function _toMarkreadIso(d: Date): string {
+  // The spec mandates "YYYY-MM-DDThh:mm:ss.sssZ" -- exactly the form
+  // toISOString() emits.
+  return d.toISOString().replace(ISO_DROP_END_RX, "Z");
+}
+
+export function getLatestMessageTimestampIso(
+  serverId: string,
+  bufferId: string,
+): string | null {
+  const state = useStore.getState();
+  const key = `${serverId}-${bufferId}`;
+  const messages = state.messages[key];
+  if (!messages || messages.length === 0) return null;
+  let latest: number | null = null;
+  for (const msg of messages) {
+    if (msg.type !== "message" && msg.type !== undefined) continue;
+    const t = msg.timestamp ? new Date(msg.timestamp).getTime() : Number.NaN;
+    if (Number.isNaN(t)) continue;
+    if (latest === null || t > latest) latest = t;
+  }
+  return latest === null ? null : _toMarkreadIso(new Date(latest));
+}
+
 export const findChannelMessageById = (
   serverId: string,
   channelId: string,
@@ -1903,6 +1932,16 @@ const useStore = create<AppState>((set, get) => ({
         const channelName =
           server?.channels.find((c) => c.id === channelId)?.name || null;
 
+        // draft/read-marker: tell the server how far we've read so
+        // our other sessions clear their unread state too.
+        if (
+          channelName &&
+          server?.capabilities?.includes("draft/read-marker")
+        ) {
+          const ts = getLatestMessageTimestampIso(serverId, channelId);
+          if (ts) ircClient.markreadSet(serverId, channelName, ts);
+        }
+
         // Update unread state in store
         const updatedServers = state.servers.map((server) => {
           if (server.id === serverId) {
@@ -2095,9 +2134,21 @@ const useStore = create<AppState>((set, get) => ({
       // Mark private chat as read
       if (serverId && privateChatId) {
         const server = state.servers.find((s) => s.id === serverId);
-        const pcUsername =
-          server?.privateChats?.find((pc) => pc.id === privateChatId)
-            ?.username || null;
+        const pc = server?.privateChats?.find((pc) => pc.id === privateChatId);
+        const pcUsername = pc?.username || null;
+
+        // draft/read-marker: PMs aren't auto-pushed by the server,
+        // so the first time we open one ask for its stored marker
+        // (so the unread badge can clear if another device already
+        // read past it).  After that, push the latest timestamp like
+        // we do for channels.
+        if (pcUsername && server?.capabilities?.includes("draft/read-marker")) {
+          if (!pc?.readMarkerFetched) {
+            ircClient.markreadGet(serverId, pcUsername);
+          }
+          const ts = getLatestMessageTimestampIso(serverId, privateChatId);
+          if (ts) ircClient.markreadSet(serverId, pcUsername, ts);
+        }
 
         const updatedServers = state.servers.map((server) => {
           if (server.id === serverId) {
@@ -2109,6 +2160,10 @@ const useStore = create<AppState>((set, get) => ({
                     unreadCount: 0,
                     mentionCount: 0,
                     isMentioned: false,
+                    // Mark as fetched so we don't spam GETs on every
+                    // re-selection of the same PM.  The reply will
+                    // overwrite this with the actual marker.
+                    readMarkerFetched: true,
                   };
                 }
                 return privateChat;
diff --git a/src/types/index.ts b/src/types/index.ts
index 1df4168e..d3614d29 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -143,6 +143,10 @@ export interface Channel {
   bans?: Array<{ mask: string; setter: string; timestamp: number }>;
   invites?: Array<{ mask: string; setter: string; timestamp: number }>;
   exceptions?: Array<{ mask: string; setter: string; timestamp: number }>;
+  // draft/read-marker: ISO-8601 timestamp of the latest message the
+  // user has marked as read in this channel (mirrored across all of
+  // the user's connected sessions).  null = no marker on file yet.
+  readMarker?: string | null;
 }
 
 export interface PrivateChat {
@@ -164,6 +168,12 @@ export interface PrivateChat {
   isBot?: boolean; // Bot status from WHO/WHOX or message tags
   isIrcOp?: boolean; // IRC operator status from WHO response (* flag)
   metadata?: Record<string, { value: string | undefined; visibility: string }>;
+  // draft/read-marker: see Channel.readMarker.
+  readMarker?: string | null;
+  // draft/read-marker: have we issued an initial MARKREAD GET for this
+  // PM yet?  PMs are not auto-pushed by the server, so we need to
+  // explicitly fetch on first open.
+  readMarkerFetched?: boolean;
 }
 
 export interface Reaction {

From 36307abd8021b8a787e64c655ddf0a8c7c5e36f3 Mon Sep 17 00:00:00 2001
From: Valerie Liu <v.a.pond@outlook.com>
Date: Mon, 11 May 2026 21:08:35 +0100
Subject: [PATCH 16/16] =?UTF-8?q?Fix=20cmd=E2=86=92command=20after=20stand?=
 =?UTF-8?q?ard-reply=20merge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/irc/handlers/auth.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/irc/handlers/auth.ts b/src/lib/irc/handlers/auth.ts
index be589c69..ee52c270 100644
--- a/src/lib/irc/handlers/auth.ts
+++ b/src/lib/irc/handlers/auth.ts
@@ -55,21 +55,21 @@ export function handleFail(
   });
   // draft/account-recovery typed projections so components don't
   // have to filter the FAIL stream by command on every render.
-  if (cmd === "RECOVER")
+  if (command === "RECOVER")
     ctx.triggerEvent("RECOVER_FAIL", { serverId, mtags, code, message });
-  else if (cmd === "SETPASS")
+  else if (command === "SETPASS")
     ctx.triggerEvent("SETPASS_FAIL", { serverId, mtags, code, message });
   // draft/persistence FAIL projection
-  else if (cmd === "PERSISTENCE")
+  else if (command === "PERSISTENCE")
     ctx.triggerEvent("PERSISTENCE_FAIL", { serverId, mtags, code, message });
   // draft/read-marker FAIL projection.  The MARKREAD FAIL form has
   // an optional <target> in parv[2]; the message is whatever's left.
-  else if (cmd === "MARKREAD") {
+  else if (command === "MARKREAD") {
     ctx.triggerEvent("MARKREAD_FAIL", {
       serverId,
       mtags,
       code,
-      target,
+      target: context[0],
       message,
     });
   }
@@ -119,7 +119,7 @@ export function handleNote(
     context,
     message,
   });
-  if (cmd === "2FA") {
+  if (command === "2FA") {
     ctx.triggerEvent("TWOFA_NOTE", {
       serverId,
       mtags,
@@ -128,14 +128,14 @@ export function handleNote(
     });
   }
   // draft/account-recovery typed projections
-  if (cmd === "RECOVER") {
+  if (command === "RECOVER") {
     ctx.triggerEvent("RECOVER_NOTE", {
       serverId,
       mtags,
       code,
       args: parv.slice(2),
     });
-  } else if (cmd === "SETPASS") {
+  } else if (command === "SETPASS") {
     ctx.triggerEvent("SETPASS_NOTE", {
       serverId,
       mtags,