@rblez/authly 0.4.1 → 0.5.0

package/src/dashboard/api.js

@@ -0,0 +1,22 @@
+/**
+ * Base API client — all dashboard HTTP calls go through this.
+ * Points to the hosted Railway instance.
+ * No direct fetch() allowed in other files.
+ */
+
+export const BASE = "https://authly.rblez.com";
+
+/**
+ * @param {string} path - API path (e.g. '/api/users')
+ * @param {RequestInit} [options]
+ * @returns {Promise<any>}
+ */
+export async function api(path, options = {}) {
+  const res = await fetch(`${BASE}${path}`, {
+    headers: { "Content-Type": "application/json" },
+    ...options,
+  });
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}

package/src/dashboard/components/states.js

@@ -0,0 +1,16 @@
+/**
+ * Shared state renderers for all sections.
+ * Every section uses exactly these 3 states.
+ */
+
+export function renderLoading(container, message = "Loading...") {
+  container.innerHTML = `<div class="state state--loading"><i class="ri-loader-4-line spinner"></i><span>${message}</span></div>`;
+}
+
+export function renderError(container, message) {
+  container.innerHTML = `<div class="state state--error"><i class="ri-error-warning-line"></i><span>${message}</span></div>`;
+}
+
+export function renderSuccess(container, content) {
+  container.innerHTML = `<div class="state state--success">${content}</div>`;
+}

package/src/dashboard/components/toast.js

@@ -0,0 +1,12 @@
+/**
+ * Toast notification system.
+ */
+
+export function showToast(message, type = "ok") {
+  const toast = document.getElementById("toast");
+  if (!toast) return;
+  toast.textContent = message;
+  toast.className = `toast toast--${type}`;
+  toast.classList.remove("hidden");
+  setTimeout(() => toast.classList.add("hidden"), 3500);
+}

package/src/dashboard/components/wizard.js

@@ -0,0 +1,52 @@
+/**
+ * Reusable wizard/sidebar component.
+ * Opens a panel with tabbed content for provider setup, etc.
+ */
+
+export function openWizard(options = {}) {
+  const { title = "Setup", tabs = [], onClose } = options;
+  const existing = document.getElementById("wizard");
+  if (existing) existing.remove();
+
+  const wizard = document.createElement("aside");
+  wizard.id = "wizard";
+  wizard.className = "wizard";
+  wizard.innerHTML = `
+    <div class="wizard__header">
+      <h3>${title}</h3>
+      <button id="wizardClose" aria-label="Close"><i class="ri-close-line"></i></button>
+    </div>
+    <nav class="wizard__tabs" id="wizardTabs">
+      ${tabs.map((t, i) => `<button class="wizard__tab${i === 0 ? " active" : ""}" data-tab="${i}">${t.label}</button>`).join("")}
+    </nav>
+    <div class="wizard__body" id="wizardBody">
+      ${tabs[0]?.content ?? ""}
+    </div>
+  `;
+
+  document.querySelector(".main")?.appendChild(wizard);
+
+  // Tab switching
+  wizard.querySelectorAll(".wizard__tab").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      wizard.querySelectorAll(".wizard__tab").forEach((t) => t.classList.remove("active"));
+      tab.classList.add("active");
+      const idx = tab.dataset.tab;
+      // Replace body content with the tab's content
+      const content = tabs[parseInt(idx)]?.content ?? "";
+      document.getElementById("wizardBody").innerHTML = content;
+      // Call any attached handlers
+      if (tabs[parseInt(idx)]?.onShow) tabs[parseInt(idx)].onShow();
+    });
+  });
+
+  // Close handler
+  document.getElementById("wizardClose")?.addEventListener("click", () => {
+    wizard.remove();
+    onClose?.();
+  });
+}
+
+export function closeWizard() {
+  document.getElementById("wizard")?.remove();
+}

package/src/dashboard/index.js

@@ -0,0 +1,124 @@
+/**
+ * Authly Dashboard — entry point.
+ * Bundles all sections into a single app.js by esbuild.
+ */
+
+import { api, BASE } from "./api.js";
+import { state, setState } from "./state.js";
+import { showToast } from "./components/toast.js";
+import { loadSupabase, checkSupabaseStatus } from "./sections/supabase.js";
+import { loadProviders } from "./sections/providers.js";
+import { loadMigrations } from "./sections/migrations.js";
+import { loadUsers } from "./sections/users.js";
+import { loadRoles } from "./sections/roles.js";
+import { loadApiKeys } from "./sections/apikeys.js";
+import { loadAudit } from "./sections/audit.js";
+import { loadMCP } from "./sections/mcp.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const navItems = document.querySelectorAll(".nav-item");
+  const sections = document.querySelectorAll(".section");
+  const headerTitle = document.getElementById("headerTitle");
+  const sidebar = document.getElementById("sidebar");
+  const menuBtn = document.getElementById("menuBtn");
+  const statusText = document.getElementById("statusText");
+  const statusDot = document.querySelector(".header__dot");
+
+  checkHealth();
+
+  // ── Health ──────────────────────────────────────────
+  async function checkHealth() {
+    try {
+      const res = await fetch(`${BASE}/health`);
+      if (res.ok) {
+        statusText.textContent = "Connected";
+        if (statusDot) statusDot.style.background = "#22c55e";
+      } else { setDisconnected(); }
+    } catch { setDisconnected(); }
+  }
+
+  function setDisconnected() {
+    statusText.textContent = "Disconnected";
+    if (statusDot) statusDot.style.background = "#ef4444";
+  }
+
+  // ── Navigate ────────────────────────────────────────
+  const sectionLoaders = {
+    init: null,
+    integration: loadSupabase,
+    providers: loadProviders,
+    ui: null,
+    routes: null,
+    roles: loadRoles,
+    "api-keys": loadApiKeys,
+    env: null,
+    migrate: loadMigrations,
+    users: loadUsers,
+    mcp: loadMCP,
+    audit: loadAudit,
+  };
+
+  for (const item of navItems) {
+    item.addEventListener("click", (e) => {
+      e.preventDefault();
+      switchSection(item.dataset.section);
+    });
+  }
+
+  function switchSection(id) {
+    for (const n of navItems) n.classList.remove("active");
+    document.querySelector(`[data-section="${id}"]`)?.classList.add("active");
+    for (const sec of sections) sec.classList.toggle("hidden", sec.id !== id);
+    if (headerTitle) headerTitle.textContent = document.querySelector(`[data-section="${id}"]`)?.textContent?.trim() ?? "";
+    sidebar?.classList.remove("open");
+
+    const container = document.getElementById(id);
+    const loader = sectionLoaders[id];
+    if (loader && container) loader(container);
+  }
+
+  // ── Mobile menu ─────────────────────────────────────
+  if (menuBtn) menuBtn.addEventListener("click", () => sidebar?.classList.toggle("open"));
+
+  // ── Toggles ─────────────────────────────────────────
+  document.querySelectorAll(".toggle")?.forEach((toggle) => {
+    toggle.addEventListener("click", () => {
+      toggle.setAttribute("aria-checked", String(toggle.getAttribute("aria-checked") !== "true"));
+    });
+  });
+
+  // ── Doc panel toggles ──────────────────────────────
+  document.querySelectorAll(".toggle-docs")?.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const target = document.getElementById(btn.dataset.target);
+      if (!target) return;
+      target.classList.toggle("collapsed");
+      target.classList.toggle("expanded");
+    });
+  });
+
+  // ── Scaffold (UI section) ───────────────────────────
+  document.querySelectorAll(".scaffold-card")?.forEach((card) => {
+    card.addEventListener("click", async () => {
+      const type = card.dataset.scaffold;
+      const preview = document.getElementById("scaffoldPreview");
+      const code = document.getElementById("scaffoldCode");
+      try {
+        const data = await api("/api/scaffold/preview", {
+          method: "POST",
+          body: JSON.stringify({ type }),
+        });
+        if (data.success && code && preview) {
+          code.textContent = data.code;
+          preview.classList.remove("hidden");
+        }
+      } catch (e) {
+        showToast(e.message, "error");
+      }
+    });
+  });
+
+  // ── Hash navigation ────────────────────────────────
+  const hash = location.hash.replace("#", "");
+  if (hash && document.getElementById(hash)) switchSection(hash);
+});

package/src/dashboard/sections/apikeys.js

@@ -0,0 +1,85 @@
+/**
+ * API Keys section — generate and validate keys.
+ */
+
+import { api } from "../api.js";
+import { renderLoading, renderError, renderSuccess } from "../components/states.js";
+import { showToast } from "../components/toast.js";
+
+export async function loadApiKeys(sectionContainer) {
+  renderLoading(sectionContainer, "Loading API keys…");
+
+  try {
+    const data = await api("/api/keys");
+    const keys = data.keys || [];
+
+    const html = `
+      <h3>Generate API Key</h3>
+      <p class="text-muted" style="margin-bottom:12px">Create a key for programmatic access. The raw key is shown <strong>only once</strong>.</p>
+      <div style="display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-bottom:16px">
+        <input id="keyName" placeholder="Key name" style="background:#000;border:1px solid #333;color:#fff;padding:8px 12px;border-radius:4px;font-size:.85rem" />
+        <button id="generateKeyBtn" class="btn btn--primary btn--sm">Generate</button>
+      </div>
+      <pre id="keyResult" class="code-block hidden" style="white-space:pre-wrap;font-size:.8rem;color:#22c55e"></pre>
+      <h3 style="margin-top:16px">Existing Keys</h3>
+      ${keys.length
+        ? `<div style="display:flex;flex-direction:column;gap:6px">
+            ${keys.map((k) => `
+              <div style="display:flex;gap:8px;align-items:center;padding:8px 12px;background:#111;border-radius:6px">
+                <code style="flex:1;font-size:.8rem">authly_...${k.key_hash?.slice?.(-6) || "—"}</code>
+                <span class="text-muted" style="font-size:.75rem">${k.name || ""}</span>
+                <span class="text-muted" style="font-size:.75rem">${k.scopes?.join?.(", ") || ""}</span>
+                <button class="btn btn--sm delete-key-btn" data-key-id="${k.id}">Delete</button>
+              </div>
+            `).join("")}
+          </div>`
+        : '<div class="text-muted">No API keys yet.</div>'
+      }
+    `;
+
+    renderSuccess(sectionContainer, html);
+
+    document.getElementById("generateKeyBtn")?.addEventListener("click", generateKey);
+    sectionContainer.querySelectorAll(".delete-key-btn").forEach((btn) => {
+      btn.addEventListener("click", () => deleteKey(btn.dataset.keyId));
+    });
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load API keys: ${e.message}`);
+  }
+}
+
+async function generateKey() {
+  const name = document.getElementById("keyName").value.trim();
+  if (!name) return;
+
+  const result = document.getElementById("keyResult");
+  result.classList.remove("hidden");
+  result.textContent = "Generating…";
+
+  try {
+    const data = await api("/api/keys", {
+      method: "POST",
+      body: JSON.stringify({ name }),
+    });
+    if (data.success && data.key) {
+      result.textContent = `Key (copy now):\n${data.key}`;
+      showToast("API key generated — copy it now!", "ok");
+    } else {
+      result.textContent = `Error: ${data.error || "Unknown error"}`;
+    }
+  } catch (e) {
+    result.textContent = e.message;
+  }
+}
+
+async function deleteKey(id) {
+  if (!confirm("Delete this API key?")) return;
+
+  try {
+    await api(`/api/keys/${id}`, { method: "DELETE" });
+    showToast("API key deleted", "ok");
+    loadApiKeys(document.querySelector('[data-section="api-keys"]') || document.getElementById("api-keys"));
+  } catch (e) {
+    showToast(e.message, "error");
+  }
+}

package/src/dashboard/sections/audit.js

@@ -0,0 +1,38 @@
+/**
+ * Audit section — run configuration health checks.
+ */
+
+import { api } from "../api.js";
+import { renderLoading, renderError, renderSuccess } from "../components/states.js";
+
+export async function loadAudit(sectionContainer) {
+  renderLoading(sectionContainer, "Running audit…");
+
+  try {
+    const data = await api("/api/audit");
+    const issues = data.issues || [];
+
+    const html = `
+      <div style="margin-bottom:12px">
+        <strong style="font-size:.9rem">${issues.every(i => i.level !== "error") ? "✔ Audit passed" : `✘ ${issues.filter(i => i.level === "error").length} issue(s)`}</strong>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:6px">
+        ${issues.map(i => `
+          <div style="display:flex;gap:8px;align-items:center;padding:8px 12px;background:#111;border-radius:6px">
+            <span>${i.level === "error"
+              ? '<i class="ri-error-warning-line" style="color:#f87171"></i>'
+              : i.level === "warn"
+              ? '<i class="ri-alert-line" style="color:#f59e0b"></i>'
+              : '<i class="ri-check-line" style="color:#22c55e"></i>'
+            }</span>
+            <span style="font-size:.85rem">${i.message || i.check || ""}</span>
+          </div>
+        `).join("")}
+      </div>
+    `;
+
+    renderSuccess(sectionContainer, html);
+  } catch (e) {
+    renderError(sectionContainer, `Audit failed: ${e.message}`);
+  }
+}

package/src/dashboard/sections/mcp.js

@@ -0,0 +1,30 @@
+/**
+ * MCP section — info and connection instructions.
+ */
+
+import { renderSuccess } from "../components/states.js";
+
+export function loadMCP(sectionContainer) {
+  renderSuccess(sectionContainer, `
+    <div>
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
+        <i class="ri-robot-line" style="font-size:1.2rem;color:#fff"></i>
+        <h3 style="margin:0">MCP Server</h3>
+        <span class="badge">BETA</span>
+      </div>
+      <p class="text-muted" style="margin-bottom:12px">Connect an MCP client (Claude Desktop, Cursor) to manage Supabase through tools.</p>
+      <pre class="code-block"><code>Connect to:
+  http://localhost:${location.port || 1284}/mcp
+
+Tools available:
+  execute_sql, list_tables, describe_table
+  list_auth_users, list_roles, assign_role_to_user
+  revoke_role_from_user, get_user_roles
+  list_migrations, get_migration_sql, run_migration
+  connection_info</code></pre>
+      <p style="font-size:.8rem;color:#666;margin-top:12px">
+        <i class="ri-error-warning-line"></i> MCP tools are experimental.
+      </p>
+    </div>
+  `);
+}

package/src/dashboard/sections/migrations.js

@@ -0,0 +1,84 @@
+/**
+ * Migrations section — list and run SQL migrations.
+ */
+
+import { api } from "../api.js";
+import { renderLoading, renderError, renderSuccess } from "../components/states.js";
+import { showToast } from "../components/toast.js";
+
+export async function loadMigrations(sectionContainer) {
+  renderLoading(sectionContainer, "Loading migrations…");
+
+  try {
+    const data = await api("/api/migrations");
+    const migrations = data.migrations || [];
+
+    const html = `
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+        <h3>Migrations</h3>
+        <button id="runAllPending" class="btn btn--primary btn--sm">
+          <i class="ri-play-line"></i> Run all pending
+        </button>
+      </div>
+      <div id="migrationList">
+        ${migrations.map((m) => `
+          <div class="migration-item">
+            <span class="badge badge--${m.status === 'applied' ? 'ok' : 'pending'}">${m.status}</span>
+            <code style="font-size:.8rem">${m.name}</code>
+            <span class="text-muted">${m.description || ""}</span>
+            ${m.status === 'pending'
+              ? `<button class="btn btn--sm run-migration" data-name="${m.name}">Run</button>`
+              : ""
+            }
+          </div>
+        `).join("")}
+      </div>
+      <pre id="migrationOutput" class="code-block hidden" style="white-space:pre-wrap;font-size:.75rem;color:#888"></pre>
+    `;
+
+    renderSuccess(sectionContainer, html);
+
+    // Bind run buttons
+    sectionContainer.querySelectorAll(".run-migration").forEach((btn) => {
+      btn.addEventListener("click", () => runMigration(btn.dataset.name));
+    });
+
+    document.getElementById("runAllPending")?.addEventListener("click", runAllPending);
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load migrations: ${e.message}`);
+  }
+}
+
+async function runMigration(name) {
+  if (!confirm(`Run migration '${name}'? This executes SQL directly.`)) return;
+
+  try {
+    const data = await api(`/api/migrations/${name}/run`, { method: "POST" });
+    const output = document.getElementById("migrationOutput");
+    if (output) {
+      output.classList.remove("hidden");
+      output.textContent = data.output || "Migration applied";
+    }
+    if (data.ok) {
+      showToast(`Migration '${name}' applied`, "ok");
+    } else {
+      showToast(`Migration '${name}' failed: ${data.error}`, "error");
+    }
+  } catch (e) {
+    showToast(`Migration failed: ${e.message}`, "error");
+  }
+}
+
+async function runAllPending() {
+  try {
+    const data = await api("/api/migrations/pending/run", { method: "POST" });
+    const output = document.getElementById("migrationOutput");
+    if (output) {
+      output.classList.remove("hidden");
+      output.textContent = data.output || "All pending migrations applied";
+    }
+    showToast("All pending migrations applied", "ok");
+  } catch (e) {
+    showToast(`Failed: ${e.message}`, "error");
+  }
+}

package/src/dashboard/sections/providers.js

@@ -0,0 +1,186 @@
+/**
+ * Providers section — Google, GitHub, Discord.
+ * Shows provider status with Setup wizard.
+ */
+
+import { api } from "../api.js";
+import { renderLoading, renderError, renderSuccess } from "../components/states.js";
+import { openWizard } from "../components/wizard.js";
+import { showToast } from "../components/toast.js";
+
+const PROVIDERS = ["google", "github", "discord"];
+
+const PROVIDER_LABELS = {
+  google: "Google",
+  github: "GitHub",
+  discord: "Discord",
+};
+
+const CALLBACK_URLS = {
+  google: "https://authly.rblez.com/api/auth/google/callback",
+  github: "https://authly.rblez.com/api/auth/github/callback",
+  discord: "https://authly.rblez.com/api/auth/discord/callback",
+};
+
+const DOCS_URLS = {
+  google: "https://console.cloud.google.com/apis/credentials",
+  github: "https://github.com/settings/applications/new",
+  discord: "https://discord.com/developers/applications",
+};
+
+const GUIDE_STEPS = {
+  google: [
+    "Go to Google Cloud Console → APIs & Services → Credentials",
+    "Create a project or select an existing one",
+    'Click "Create Credentials" → OAuth 2.0 Client ID',
+    "Application type: Web application",
+    "Add the callback URL below as an Authorized redirect URI",
+  ],
+  github: [
+    "Go to GitHub Settings → Developer settings → OAuth Apps",
+    'Click "New OAuth App"',
+    "Fill in Application name and Homepage URL",
+    "Add the callback URL below as Authorization callback URL",
+  ],
+  discord: [
+    "Go to Discord Developer Portal → Applications",
+    "Create a New Application",
+    "Go to OAuth2 → Redirects → Add Redirect",
+    "Add the callback URL below",
+  ],
+};
+
+export async function loadProviders(sectionContainer) {
+  renderLoading(sectionContainer, "Loading providers…");
+
+  try {
+    const data = await api("/api/providers");
+    const providers = data.providers || [];
+
+    const html = providers.map((p) => {
+      const label = PROVIDER_LABELS[p.name] || p.name;
+      const iconUrl = `https://cdn.simpleicons.org/${p.name}/fff`;
+      const iconClass = p.enabled ? "enabled" : "disabled";
+      return `<div class="provider-card">
+        <img src="${iconUrl}" width="20" height="20" alt="${label}" />
+        <div class="provider-info">
+          <div class="provider-name">${label}</div>
+          <div class="provider-scopes">${p.scopes || ""}</div>
+        </div>
+        <span class="provider-status ${iconClass}">${p.enabled ? "Enabled" : "Disabled"}</span>
+        ${p.enabled
+          ? `<button class="btn btn--sm edit-provider-btn" data-provider="${p.name}">Edit</button>`
+          : `<button class="btn btn--sm btn--primary setup-provider-btn" data-provider="${p.name}">Setup</button>`
+        }
+      </div>`;
+    }).join("");
+
+    renderSuccess(sectionContainer, html);
+
+    // Bind buttons
+    sectionContainer.querySelectorAll(".setup-provider-btn").forEach((btn) => {
+      btn.addEventListener("click", () => openProviderWizard(btn.dataset.provider));
+    });
+    sectionContainer.querySelectorAll(".edit-provider-btn").forEach((btn) => {
+      btn.addEventListener("click", () => openProviderWizard(btn.dataset.provider, 1));
+    });
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load providers: ${e.message}`);
+  }
+}
+
+function openProviderWizard(name, defaultTab = 0) {
+  const label = PROVIDER_LABELS[name];
+  const callbackUrl = CALLBACK_URLS[name];
+
+  const tabs = [
+    {
+      label: "Guide",
+      content: `
+        <h4>${label} Setup Guide</h4>
+        <ol style="color:#aaa;font-size:.85rem;line-height:2;padding-left:18px">
+          ${(GUIDE_STEPS[name] || []).map((s) => `<li>${s}</li>`).join("")}
+        </ol>
+        <div style="margin-top:12px;padding:8px 12px;background:#111;border-radius:6px">
+          <div style="font-size:.75rem;color:#555;margin-bottom:4px">Callback URL</div>
+          <div style="display:flex;gap:6px;align-items:center">
+            <code id="cbUrl" style="font-size:.8rem;color:#58a6ff;flex:1">${callbackUrl}</code>
+            <button class="btn btn--sm" id="copyCbUrl" title="Copy">Copy</button>
+          </div>
+        </div>
+        <div style="margin-top:8px">
+          <a href="${DOCS_URLS[name]}" target="_blank" rel="noopener" class="btn btn--sm" style="background:#222;color:#888;text-decoration:none">
+            Open ${label} Console <i class="ri-external-link-line" style="font-size:.7rem"></i>
+          </a>
+        </div>
+      `,
+      onShow: () => {
+        document.getElementById("copyCbUrl")?.addEventListener("click", () => {
+          navigator.clipboard.writeText(callbackUrl);
+          showToast("Callback URL copied", "ok");
+        });
+      },
+    },
+    {
+      label: "Enter Keys",
+      content: `
+        <h4>${label} OAuth Credentials</h4>
+        <div style="display:flex;flex-direction:column;gap:8px;margin-top:12px">
+          <input id="providerClientId" placeholder="Client ID" style="background:#000;border:1px solid #333;color:#fff;padding:8px 12px;border-radius:4px;font-size:.85rem" />
+          <input id="providerClientSecret" type="password" placeholder="Client Secret" style="background:#000;border:1px solid #333;color:#fff;padding:8px 12px;border-radius:4px;font-size:.85rem" />
+          <div id="providerKeyResult" class="result hidden"></div>
+          <button id="providerSaveKeys" class="btn btn--primary btn--sm">Validate &amp; Save</button>
+        </div>
+      `,
+      onShow: () => {
+        document.getElementById("providerSaveKeys")?.addEventListener("click", async () => {
+          const clientId = document.getElementById("providerClientId").value.trim();
+          const clientSecret = document.getElementById("providerClientSecret").value.trim();
+          if (!clientId || !clientSecret) return;
+
+          const resultDiv = document.getElementById("providerKeyResult");
+          resultDiv.classList.remove("hidden");
+          resultDiv.innerHTML = "Validating…";
+
+          try {
+            const res = await api(`/api/providers/${name}/keys`, {
+              method: "POST",
+              body: JSON.stringify({ clientId, clientSecret }),
+            });
+            if (res.valid) {
+              resultDiv.innerHTML = `<span style="color:#22c55e">Keys validated and saved</span>`;
+              showToast(`${label} provider configured`, "ok");
+            } else {
+              resultDiv.innerHTML = `<span style="color:#f87171">Validation failed: ${res.error || "invalid keys"}</span>`;
+            }
+          } catch (e) {
+            resultDiv.innerHTML = `<span style="color:#f87171">${e.message}</span>`;
+          }
+        });
+      },
+    },
+    {
+      label: "Test",
+      content: `
+        <h4>Test ${label} Connection</h4>
+        <p class="text-muted" style="font-size:.8rem;margin:8px 0">Make a test OAuth request to verify your configuration.</p>
+        <pre id="providerTestResult" class="code-block" style="white-space:pre-wrap;font-size:.75rem;color:#888"></pre>
+        <button id="providerTestBtn" class="btn btn--sm">Run Test</button>
+      `,
+      onShow: () => {
+        document.getElementById("providerTestBtn")?.addEventListener("click", async () => {
+          const output = document.getElementById("providerTestResult");
+          output.textContent = "Testing…";
+          try {
+            const data = await api(`/api/providers/${name}/test`);
+            output.textContent = JSON.stringify(data, null, 2);
+          } catch (e) {
+            output.textContent = e.message;
+          }
+        });
+      },
+    },
+  ];
+
+  openWizard({ title: `${label} Setup`, tabs, defaultTab });
+}