@rblez/authly 0.1.0 → 0.2.0

package/dist/dashboard/app.js

@@ -44,9 +44,7 @@ document.addEventListener("DOMContentLoaded", () => {
       if (res.ok) {
         statusText.textContent = "Connected";
         statusDot.style.background = "#22c55e";
-      } else {
-        setDisconnected();
-      }
+      } else { setDisconnected(); }
     } catch { setDisconnected(); }
   }
 
@@ -55,6 +53,132 @@ document.addEventListener("DOMContentLoaded", () => {
     statusDot.style.background = "#ef4444";
   }
 
+  // ── Auto-detect Supabase ──────────────────────────────
+  async function autoDetectSupabase() {
+    const scanStatus = document.getElementById("scanStatus");
+    const scanDetail = document.getElementById("scanDetail");
+    const scanAction = document.getElementById("scanAction");
+    const intStatus = document.getElementById("integrationStatus");
+    const intDetail = document.getElementById("integrationDetail");
+
+    try {
+      const scan = await api("/init/scan");
+
+      if (scan.detected && scan.url && scan.anonKey && scan.serviceKey) {
+        // Auto-connect
+        scanStatus.innerHTML = `<span style="color:#22c55e"><i class="ri-check-line"></i> Supabase credentials found — auto-connecting…</span>`;
+        const data = await api("/init/connect", { method: "POST" });
+
+        if (data.success) {
+          scanStatus.innerHTML = `<span style="color:#22c55e"><i class="ri-check-line"></i> Auto-connected to Supabase</span>`;
+          const ref = scan.projectRef || url.ref;
+
+          if (scanDetail) {
+            scanDetail.classList.remove("hidden");
+            scanDetail.innerHTML = `
+              <div style="color:#aaa;font-size:.78rem;line-height:1.7">
+                <div>URL: <code style="color:#c9c">${maskKey(scan.url)}</code></div>
+                <div>Project ref: <code style="color:#c9c">${scan.projectRef || "—"}</code></div>
+                <div>Found in: <span style="color:#22c55e">${scan.sources.join(", ")}</span></div>
+                <div>Framework: <code style="color:#c9c">${scan.framework || "unknown"}</code></div>
+              </div>
+              `;
+          }
+
+          if (intStatus) {
+            intStatus.innerHTML = `<span style="color:#22c55e"><i class="ri-check-line"></i> Connected to Supabase</span>`;
+          }
+
+          if (intDetail) {
+            intDetail.classList.remove("hidden");
+            intDetail.innerHTML = `
+              <div style="color:#aaa;font-size:.78rem;line-height:1.7">
+                <div>URL: <code style="color:#c9c">${maskKey(scan.url)}</code></div>
+                <div>Project ref: <code style="color:#c9c">${scan.projectRef || "—"}</code></div>
+                <div>Framework: <code style="color:#c9c">${scan.framework || "unknown"}</code></div>
+                <div>Sources: <span style="color:#22c55e">${scan.sources.join(", ")}</span></div>
+                <div>Can connect: <span style="color:#22c55e">● yes</span></div>
+              </div>
+            `;
+          }
+        } else {
+          scanStatus.innerHTML = `<span style="color:#f87171">Auto-connect failed: ${data.error}</span>`;
+          showScanFallback(scan);
+        }
+      } else {
+        showScanFallback(scan);
+      }
+    } catch (e) {
+      scanStatus.textContent = "Scan failed: " + e.message;
+      intStatus.innerHTML = `<span style="color:#888">Could not reach scan endpoint</span>`;
+    }
+  }
+
+  function showScanFallback(scan) {
+    const scanStatus = document.getElementById("scanStatus");
+    const scanDetail = document.getElementById("scanDetail");
+    const scanAction = document.getElementById("scanAction");
+    const intStatus = document.getElementById("integrationStatus");
+    const intDetail = document.getElementById("integrationDetail");
+
+    let msg = "No Supabase credentials detected";
+    let color = "#f87171";
+    let icon = "ri-error-warning-line";
+
+    if (scan.detected) {
+      msg = "Partial credentials found — manual config needed";
+      color = "#f59e0b";
+      icon = "ri-alert-line";
+    }
+
+    scanStatus.innerHTML = `<span style="color:${color}"><i class="${icon}"></i> ${msg}</span>`;
+
+    if (scanDetail) {
+      scanDetail.classList.remove("hidden");
+      const details = [];
+      if (scan.url) details.push(`<div>URL: <code style="color:#c9c">${maskKey(scan.url)}</code></div>`);
+      if (scan.anonKey) details.push(`<div>Anon key: <span style="color:#22c55e">found</span></div>`);
+      if (scan.serviceKey) details.push(`<div>Service key: <span style="color:#22c55e">found</span></div>`);
+      if (scan.projectRef) details.push(`<div>Ref: <code style="color:#c9c">${scan.projectRef}</code></div>`);
+      if (scan.sources.length) details.push(`<div>Sources: ${scan.sources.join(", ")}</div>`);
+
+      if (!details.length) details.push('<div style="color:#555">No env files contain Supabase credentials</div>');
+
+      scanDetail.innerHTML = `<div style="color:#aaa;font-size:.78rem;line-height:1.7">${details.join("")}</div>`;
+    }
+
+    if (scanAction) {
+      scanAction.classList.remove("hidden");
+      scanAction.innerHTML = `
+        <button class="btn btn--primary" id="connectBtn" style="font-size:.8rem;padding:8px 16px">
+          <i class="ri-plug-line"></i> Connect manually
+        </button>
+      `;
+      document.getElementById("connectBtn")?.addEventListener("click", () => {
+        document.querySelector('[data-section="init"]')?.click();
+        document.getElementById("initUrl")?.focus();
+      });
+    }
+
+    if (intStatus) {
+      intStatus.innerHTML = `<span style="color:#888">Not connected — enter credentials in Init</span>`;
+    }
+    if (intDetail) {
+      intDetail.classList.add("hidden");
+    }
+  }
+
+  // ── Connect (auto or manual) ──────────────────────
+  async function connectSupabase(body = {}) {
+    const data = await api("/init/connect", { method: "POST", body: JSON.stringify(body) });
+    return data;
+  }
+
+  function maskKey(key) {
+    if (key.length < 30) return key;
+    return key.slice(0, 20) + "…" + key.slice(-8);
+  }
+
   // ── Navigation ──────────────────────────────────────
   for (const item of navItems) {
     item.addEventListener("click", (e) => {
@@ -76,12 +200,49 @@ document.addEventListener("DOMContentLoaded", () => {
     if (id === "roles") loadRoles();
     if (id === "env") loadEnv();
     if (id === "migrate") loadMigrations();
-    if (id === "init") checkInitFiles();
+    if (id === "integration") loadIntegration();
   }
 
-  // ── Init ────────────────────────────────────────────
-  checkInitFiles();
+  async function loadIntegration() {
+    try {
+      const scan = await api("/init/scan");
+      const intStatus = document.getElementById("integrationStatus");
+      const intDetail = document.getElementById("integrationDetail");
+
+      if (scan.detected && scan.canConnect) {
+        intStatus.innerHTML = `<span style="color:#22c55e"><i class="ri-check-line"></i> Connected</span>`;
+        intDetail.classList.remove("hidden");
+        intDetail.innerHTML = `
+          <div style="color:#aaa;font-size:.78rem;line-height:1.7">
+            <div>URL: <code style="color:#c9c">${maskKey(scan.url || "")}</code></div>
+            <div>Project ref: <code style="color:#c9c">${scan.projectRef || "—"}</code></div>
+            <div>Sources: ${scan.sources.join(", ")}</div>
+          </div>
+        `;
+      } else {
+        intStatus.innerHTML = `<span style="color:#f87171"><i class="ri-close-line"></i> No connection</span>`;
+        intDetail.classList.remove("hidden");
+        intDetail.innerHTML = `<div style="color:#555">No Supabase credentials detected. Go to Init to configure.</div>`;
+      }
+    } catch {}
+  }
+
+  // ── Scan on load ──────────────────────────────────
+  autoDetectSupabase();
+
+  // Reconnect button
+  const reconnectBtn = document.getElementById("reconnectBtn");
+  if (reconnectBtn) {
+    reconnectBtn.addEventListener("click", async () => {
+      reconnectBtn.disabled = true;
+      reconnectBtn.textContent = "Scanning…";
+      await autoDetectSupabase();
+      reconnectBtn.disabled = false;
+      reconnectBtn.innerHTML = '<i class="ri-refresh-line"></i> Re-scan & reconnect';
+    });
+  }
 
+  // ── Manual connect form ──────────────────────────
   const initForm = document.getElementById("initForm");
   if (initForm) {
     initForm.addEventListener("submit", async (e) => {
@@ -105,29 +266,16 @@ document.addEventListener("DOMContentLoaded", () => {
       btn.innerHTML = '<i class="ri-plug-line"></i> Connect &amp; Configure';
 
       if (data.success) {
-        showResult(result, `Connected to Supabase via ${data.framework.name} (${data.framework.version})`, "ok");
+        showResult(result, "Connected to Supabase. Framework: " + (data.framework || "unknown"), "ok");
         showToast("Project connected successfully");
-        checkInitFiles();
         checkHealth();
+        autoDetectSupabase();
       } else {
         showResult(result, data.error, "error");
       }
     });
   }
 
-  async function checkInitFiles() {
-    try {
-      const res = await fetch("/api/config");
-      if (res.ok) {
-        const envCheck = await fetch("/api/health");
-        document.getElementById("envStatus").textContent = "checked";
-        document.getElementById("envStatus").className = "file-status file-status--ok";
-        document.getElementById("configStatus").textContent = "checked";
-        document.getElementById("configStatus").className = "file-status file-status--ok";
-      }
-    } catch {}
-  }
-
   // ── Users ───────────────────────────────────────────
   window.loadUsers = async function() {
     const body = document.getElementById("usersBody");
@@ -135,15 +283,15 @@ document.addEventListener("DOMContentLoaded", () => {
     try {
       const data = await api("/users");
       if (!data.success || !data.users?.length) {
-        body.innerHTML = '<tr><td colspan="4" class="text-muted">No users found. Connect Supabase in Init.</td></tr>';
+        body.innerHTML = '<tr><td colspan="4" class="text-muted">No users found. Connect Supabase first.</td></tr>';
         return;
       }
       body.innerHTML = data.users.map(u =>
         `<tr>
-          <td style="font-family:var(--mono);font-size:.8rem">${(u.id ?? "").slice(0, 8)}…</td>
+          <td style="font-family:var(--mono);font-size:.8rem">${u.id.slice(0, 8)}…</td>
           <td>${u.email ?? "—"}</td>
           <td>${u.raw_user_meta_data?.role ?? "user"}</td>
-          <td class="text-muted">${u.created_at ? new Date(u.created_at).toLocaleDateString() : "—"}</td>
+          <td class="text-muted">${new Date(u.created_at).toLocaleDateString()}</td>
         </tr>`
       ).join("");
     } catch {
@@ -160,16 +308,18 @@ document.addEventListener("DOMContentLoaded", () => {
     const data = await api("/providers");
     if (!data.providers) return;
 
-    container.innerHTML = data.providers.map(p =>
-      `<div class="provider-card">
-        <i class="ri-${p.name === "google" ? "google" : p.name === "github" ? "github" : p.name === "discord" ? "discord" : "shield-keyhole"}-line"></i>
+    container.innerHTML = data.providers.map(p => {
+      const name = p.name === "magiclink" ? "Magic Link" : p.name;
+      const iconUrl = `https://cdn.simpleicons.org/${p.name === "magiclink" ? "resend" : p.name}/fff`;
+      return `<div class="provider-card">
+        <img src="${iconUrl}" width="20" height="20" alt="${name}" class="provider-icon-img" />
         <div class="provider-info">
-          <div class="provider-name">${p.name}</div>
-          <div class="provider-scopes">scope: ${p.scopes}</div>
+          <div class="provider-name">${name}</div>
+          <div class="provider-scopes">${p.scopes || ""}</div>
         </div>
-        <span class="provider-status ${p.enabled ? "enabled" : "disabled"}">${p.enabled ? "Configured" : "Not configured"}</span>
-      </div>`
-    ).join("");
+        <span class="provider-status ${p.enabled ? "enabled" : "disabled"}">${p.enabled ? "Active" : "Off"}</span>
+      </div>`;
+    }).join("");
   };
 
   // ── Roles ───────────────────────────────────────────

package/dist/dashboard/authorize.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Authly — Authorize</title>
+  <link rel="stylesheet" href="/styles.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css">
+  <style>
+    body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
+    .auth-container { width: 100%; max-width: 420px; padding: 20px; }
+    .auth-card {
+      background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px;
+      padding: 32px 24px; text-align: center;
+    }
+    .auth-card h1 { font-size: 1.3rem; color: #fff; margin: 0 0 4px; }
+    .auth-card p { color: #888; font-size: .85rem; margin: 0 0 24px; }
+    .provider-btn {
+      display: flex; align-items: center; gap: 12px; width: 100%;
+      padding: 12px 16px; margin-bottom: 8px; border: 1px solid #222;
+      border-radius: 8px; background: #111; color: #fff;
+      font-size: .9rem; cursor: pointer; transition: border-color .2s;
+    }
+    .provider-btn:hover { border-color: #444; }
+    .provider-btn.disabled { opacity: .4; pointer-events: none; }
+    .provider-btn img { width: 20px; height: 20px; flex-shrink: 0; }
+    .provider-btn .label { flex: 1; text-align: left; text-transform: capitalize; }
+    .provider-btn .status { font-size: .7rem; color: #555; text-transform: uppercase; }
+    .back-link {
+      display: inline-block; margin-top: 16px; color: #555;
+      font-size: .8rem; text-decoration: none;
+    }
+    .back-link:hover { color: #aaa; }
+  </style>
+</head>
+<body>
+  <div class="auth-container">
+    <div class="auth-card">
+      <h1><i class="ri-shield-keyhole-line"></i> Sign in</h1>
+      <p>Choose an authentication method</p>
+      <div id="providerList"></div>
+    </div>
+    <a href="/" class="back-link"><i class="ri-arrow-left-line"></i> Back to dashboard</a>
+  </div>
+
+  <script>
+    async function loadProviders() {
+      const container = document.getElementById("providerList");
+      try {
+        const res = await fetch("/api/providers");
+        const data = await res.json();
+        if (!data.providers) { container.innerHTML = "<p style='color:#555'>&mdash;</p>"; return; }
+
+        container.innerHTML = data.providers.map(p => {
+          const name = p.name === "magiclink" ? "Magic Link" : p.name;
+          const iconUrl = `https://cdn.simpleicons.org/${p.name === "magiclink" ? "resend" : p.name}/fff`;
+          const cls = p.enabled ? "" : "disabled";
+          return `<div class="provider-btn ${cls}" data-provider="${p.name}" data-enabled="${p.enabled}">
+            <img src="${iconUrl}" alt="${name}" />
+            <span class="label">${name}</span>
+            <span class="status">${p.enabled ? "enabled" : "not configured"}</span>
+          </div>`;
+        }).join("");
+
+        // Attach click handlers
+        container.querySelectorAll(".provider-btn[data-enabled='true']").forEach(el => {
+          el.addEventListener("click", () => {
+            const provider = el.dataset.provider;
+            window.location.href = `/api/auth/${provider}/authorize`;
+          });
+        });
+      } catch {
+        container.innerHTML = "<p style='color:#555'>Failed to load providers</p>";
+      }
+    }
+    loadProviders();
+  </script>
+</body>
+</html>

package/dist/dashboard/index.html

@@ -4,8 +4,79 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Authly Dashboard</title>
-  <link rel="stylesheet" href="/styles.css">
+  <link rel="stylesheet" href="/styles.css" integrity="sha384-PLACEHOLDER">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css">
+  <style>
+    /* ── Provider SimpleIcons ───────────────────────── */
+    .provider-icon-img {
+      width: 20px; height: 20px; flex-shrink: 0;
+    }
+    .provider-card {
+      display: flex; align-items: center; gap: 12px;
+      padding: 12px 16px; background: #111; border: 1px solid #222;
+      border-radius: 8px; margin-bottom: 8px;
+    }
+    .provider-card .provider-info { flex: 1; }
+    .provider-card .provider-name { font-weight: 500; font-size: .875rem; color: #fff; text-transform: capitalize; }
+    .provider-card .provider-scopes { font-size: .75rem; color: #666; margin-top: 2px; }
+    .provider-card .provider-status {
+      font-size: .7rem; padding: 2px 8px; border-radius: 4px;
+      text-transform: uppercase; font-weight: 600; letter-spacing: .5px;
+    }
+    .provider-card .provider-status.enabled { background: #166534; color: #22c55e; }
+    .provider-card .provider-status.disabled { background: #222; color: #555; }
+
+    /* ── Inline docs ────────────────────────────────── */
+    .doc-panel {
+      background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px;
+      padding: 16px 20px; margin-bottom: 16px;
+    }
+    .doc-panel h4 {
+      font-size: .85rem; color: #fff; margin: 0 0 6px;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .doc-panel p { color: #888; font-size: .8rem; margin: 0 0 8px; line-height: 1.5; }
+    .doc-panel ul {
+      margin: 0; padding-left: 18px; color: #aaa; font-size: .78rem; line-height: 1.8;
+    }
+    .doc-panel code {
+      background: #111; color: #c9c; padding: 1px 5px; border-radius: 3px;
+      font-size: .75rem; font-family: 'SF Mono', 'Fira Code', monospace;
+    }
+    .doc-panel .toggle-docs {
+      background: none; border: none; color: #555; cursor: pointer;
+      font-size: .75rem; margin-left: auto;
+    }
+    .doc-panel .toggle-docs:hover { color: #aaa; }
+    .doc-panel-body { transition: max-height .3s ease; overflow: hidden; }
+    .doc-panel-body.collapsed { max-height: 0; }
+    .doc-panel-body.expanded { max-height: 600px; }
+
+    /* ── UI improvements ───────────────────────────── */
+    .card h2 { margin-bottom: 4px; }
+    .card p { color: #666; font-size: .82rem; }
+    .card__icon {
+      width: 32px; height: 32px; display: flex; align-items: center;
+      justify-content: center; border-radius: 8px; margin-bottom: 12px;
+      background: #111; color: #fff; font-size: 1.2rem;
+    }
+    .text-muted { color: #555; font-size: .8rem; }
+
+    /* ── Toast ──────────────────────────────────────── */
+    .toast {
+      position: fixed; bottom: 20px; right: 20px; padding: 10px 16px;
+      border-radius: 6px; font-size: .82rem; z-index: 999;
+      animation: slideUp .2s ease;
+    }
+    .toast.toast--ok { background: #166534; color: #22c55e; border: 1px solid #22c55e44; }
+    .toast.toast--error { background: #7f1d1d; color: #f87171; border: 1px solid #f8717144; }
+    .toast.toast--info { background: #111; color: #888; border: 1px solid #333; }
+    .toast.hidden { display: none; }
+    @keyframes slideUp {
+      from { transform: translateY(20px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+  </style>
 </head>
 <body>
   <div class="layout">
@@ -21,17 +92,22 @@
       </div>
       <nav class="sidebar__nav">
         <a href="#init" class="nav-item active" data-section="init"><i class="ri-flashlight-line"></i> Init</a>
+        <a href="#integration" class="nav-item" data-section="integration"><i class="ri-database-2-line"></i> Integration</a>
         <a href="#providers" class="nav-item" data-section="providers"><i class="ri-shield-keyhole-line"></i> Providers</a>
         <a href="#ui" class="nav-item" data-section="ui"><i class="ri-layout-masonry-line"></i> UI</a>
         <a href="#routes" class="nav-item" data-section="routes"><i class="ri-route-line"></i> Routes</a>
         <a href="#roles" class="nav-item" data-section="roles"><i class="ri-user-settings-line"></i> Roles</a>
         <a href="#api-keys" class="nav-item" data-section="api-keys"><i class="ri-key-2-line"></i> API Keys</a>
         <a href="#env" class="nav-item" data-section="env"><i class="ri-file-code-line"></i> Env</a>
-        <a href="#migrate" class="nav-item" data-section="migrate"><i class="ri-database-2-line"></i> Migrate</a>
+        <a href="#migrate" class="nav-item" data-section="migrate"><i class="ri-download-2-line"></i> Migrate</a>
         <a href="#users" class="nav-item" data-section="users"><i class="ri-user-line"></i> Users</a>
         <a href="#mcp" class="nav-item" data-section="mcp"><i class="ri-robot-line"></i> MCP <span class="badge">BETA</span></a>
         <a href="#audit" class="nav-item" data-section="audit"><i class="ri-search-line"></i> Audit</a>
       </nav>
+      <div class="sidebar__footer">
+        <span class="sidebar__version">v0.1.0</span>
+        <span class="sidebar__copy">MIT — rblez</span>
+      </div>
     </aside>
 
     <!-- Main -->
@@ -49,16 +125,37 @@
 
         <!-- ═══ INIT ═══ -->
         <section class="section" id="init">
+          <div class="doc-panel" id="initDocs">
+            <h4><i class="ri-book-line"></i> Auto-detection <button class="toggle-docs" data-target="initDocsBody">toggle</button></h4>
+            <div class="doc-panel-body expanded" id="initDocsBody">
+              <p>Authly scans your project files for Supabase credentials — no manual configuration needed.</p>
+              <ul>
+                <li>Checks <code>.env.local</code>, <code>.env.development.local</code>, <code>.env.development</code>, <code>.env</code></li>
+                <li>Also reads <code>supabase/config.toml</code> if present</li>
+                <li>If found — connects automatically</li>
+                <li>If not found — fill in manually below</li>
+              </ul>
+            </div>
+          </div>
+          <!-- Auto-detected status -->
+          <div class="card" id="autoDetectCard">
+            <div class="card__icon"><i class="ri-search-eye-line"></i></div>
+            <h2>Project scan</h2>
+            <div id="scanStatus" style="font-size:.85rem;color:#888">Scanning…</div>
+            <div id="scanDetail" class="hidden" style="margin-top:12px;font-size:.8rem"></div>
+            <div id="scanAction" class="hidden" style="margin-top:12px"></div>
+          </div>
+          <!-- Manual fallback -->
           <div class="card">
             <div class="card__icon"><i class="ri-flashlight-line"></i></div>
-            <h2>Connect your project</h2>
-            <p>Detect your Next.js project and set up Supabase credentials.</p>
+            <h2>Manual connect</h2>
+            <p style="margin-bottom:12px">Or enter credentials manually if auto-detect didn't find them.</p>
             <form id="initForm" class="init-form">
               <label>Supabase Project URL</label>
               <input type="url" id="initUrl" placeholder="https://xxxx.supabase.co" />
               <label>Supabase Anon Key</label>
               <input type="password" id="initAnon" placeholder="eyJh…" />
-              <label>Service Role Key (optional, for admin)</label>
+              <label>Service Role Key (admin)</label>
               <input type="password" id="initService" placeholder="eyJh…" />
               <div id="initResult" class="result hidden"></div>
               <button type="submit" class="btn btn--primary" id="initBtn">
@@ -66,26 +163,68 @@
               </button>
             </form>
           </div>
+        </section>
+
+        <!-- ═══ INTEGRATION ═══ -->
+        <section class="section hidden" id="integration">
+          <div class="doc-panel" id="intDocs">
+            <h4><i class="ri-book-line"></i> Supabase integration <button class="toggle-docs" data-target="intDocsBody">toggle</button></h4>
+            <div class="doc-panel-body expanded" id="intDocsBody">
+              <p>Authly connects directly to your Supabase database to manage users, roles, sessions, and migrations.</p>
+              <ul>
+                <li>Users are stored in <code>authly_users</code> table (not Supabase auth.users)</li>
+                <li>OAuth providers link via <code>authly_oauth_accounts</code></li>
+                <li>Role assignments via <code>authly_user_roles</code></li>
+                <li>Magic link tokens in <code>authly_magic_links</code></li>
+              </ul>
+              <p style="margin-top:8px">Connection is automatic if Supabase credentials exist in your env files.</p>
+            </div>
+          </div>
           <div class="card">
-            <div class="card__icon"><i class="ri-folder-check-line"></i></div>
-            <h2>Generated files</h2>
-            <ul class="file-list" id="fileList">
-              <li><i class="ri-file-line"></i> .env.local <span class="file-status" id="envStatus">checking…</span></li>
-              <li><i class="ri-file-line"></i> authly.config.json <span class="file-status" id="configStatus">checking…</span></li>
-            </ul>
+            <div class="card__icon"><i class="ri-database-2-line"></i></div>
+            <h2>Supabase connection</h2>
+            <div id="integrationStatus" style="font-size:.85rem;color:#888">Checking…</div>
+            <div id="integrationDetail" class="hidden" style="margin-top:12px"></div>
+            <div style="margin-top:16px">
+              <button class="btn btn--primary btn--sm" id="reconnectBtn"><i class="ri-refresh-line"></i> Re-scan &amp; reconnect</button>
+            </div>
           </div>
         </section>
 
         <!-- ═══ PROVIDERS ═══ -->
         <section class="section hidden" id="providers">
+          <div class="doc-panel" id="provDocs">
+            <h4><i class="ri-book-line"></i> Provider setup <button class="toggle-docs" data-target="provDocsBody">toggle</button></h4>
+            <div class="doc-panel-body expanded" id="provDocsBody">
+              <p>Enable authentication methods for your project. Each provider requires OAuth client credentials.</p>
+              <ul>
+                <li><img src="https://cdn.simpleicons.org/google/fff" width="14" height="14" alt="Google"> <strong>Google</strong> — Console → APIs → OAuth 2.0 → Credentials</li>
+                <li><img src="https://cdn.simpleicons.org/github/fff" width="14" height="14" alt="GitHub"> <strong>GitHub</strong> — Settings → Developer settings → OAuth Apps</li>
+                <li><img src="https://cdn.simpleicons.org/discord/fff" width="14" height="14" alt="Discord"> <strong>Discord</strong> — Developer Portal → Applications</li>
+                <li><img src="https://cdn.simpleicons.org/resend/fff" width="14" height="14" alt="Resend"> <strong>Magic Link</strong> — Resend dashboard (API key)</li>
+              </ul>
+              <p style="margin-top:8px">Set credentials in <code>GOOGLE_CLIENT_ID</code> / <code>GOOGLE_CLIENT_SECRET</code> etc. Buttons appear automatically when providers are enabled.</p>
+            </div>
+          </div>
           <div id="providerList"></div>
         </section>
 
         <!-- ═══ UI (Scaffold) ═══ -->
         <section class="section hidden" id="ui">
+          <div class="doc-panel" id="scaffoldDocs">
+            <h4><i class="ri-book-line"></i> UI scaffolding <button class="toggle-docs" data-target="scaffoldDocsBody">toggle</button></h4>
+            <div class="doc-panel-body expanded" id="scaffoldDocsBody">
+              <p>Generates ready-to-use TSX pages for your Next.js App Router project. Click a scaffold card to preview the code.</p>
+              <ul>
+                <li><strong>Login</strong> — Email/password + dynamic SimpleIcon buttons for enabled providers</li>
+                <li><strong>Sign Up</strong> — Registration form with validation</li>
+                <li><strong>Middleware</strong> — Route protection for protected and auth paths</li>
+              </ul>
+              <p style="margin-top:8px">Files are generated into <code>src/app/auth/</code> in your Next.js project.</p>
+            </div>
+          </div>
           <div class="card">
             <h2>Scaffold auth pages</h2>
-            <p>Generate ready-to-use TSX pages for your Next.js project.</p>
             <div class="grid-3">
               <div class="scaffold-card" data-scaffold="login">
                 <i class="ri-login-circle-line"></i>
@@ -109,15 +248,36 @@
 
         <!-- ═══ ROUTES ═══ -->
         <section class="section hidden" id="routes">
+          <div class="doc-panel" id="routesDocs">
+            <h4><i class="ri-book-line"></i> Route protection <button class="toggle-docs" data-target="routesDocsBody">toggle</button></h4>
+            <div class="doc-panel-body expanded" id="routesDocsBody">
+              <p>The scaffolded middleware intercepts requests and checks for a valid <code>authly_session</code> cookie. Missing cookies redirect to login.</p>
+              <ul>
+                <li><code>/dashboard</code>, <code>/profile</code>, <code>/settings</code> → unprotected redirects to <code>/auth/login</code></li>
+                <li><code>/auth/login</code>, <code>/auth/signup</code> → redirect to <code>/dashboard</code> if logged in</li>
+              </ul>
+            </div>
+          </div>
           <div class="card">
             <h2>Protected routes</h2>
-            <p>Middleware scaffold protects these paths:</p>
             <div class="code-block"><code>/dashboard, /profile, /settings → redirect to /auth/login if unauthenticated</code></div>
           </div>
         </section>
 
         <!-- ═══ ROLES ═══ -->
         <section class="section hidden" id="roles">
+          <div class="doc-panel" id="rolesDocs">
+            <h4><i class="ri-book-line"></i> Role-based access control <button class="toggle-docs" data-target="rolesDocsBody">toggle</button></h4>
+            <div class="doc-panel-body expanded" id="rolesDocsBody">
+              <p>Authly implements RBAC with three default roles:</p>
+              <ul>
+                <li><code>admin</code> — Full access to all resources</li>
+                <li><code>user</code> — Standard authenticated (auto-assigned on signup)</li>
+                <li><code>guest</code> — Limited access, read-only</li>
+              </ul>
+              <p style="margin-top:8px">Requires the <code>001_create_roles_table</code> and <code>004_create_user_roles_table</code> migrations.</p>
+            </div>
+          </div>
           <div class="card">
             <div style="display:flex;justify-content:space-between;align-items:center">
               <h2>Roles</h2>
@@ -146,7 +306,7 @@
         <section class="section hidden" id="api-keys">
           <div class="card">
             <h2>Generate API Key</h2>
-            <p>Create a key for programmatic access.</p>
+            <p>Create a key for programmatic access. The raw key is shown <strong>only once</strong>.</p>
             <form id="keyForm" style="display:flex;gap:8px;align-items:end;flex-wrap:wrap">
               <div>
                 <label style="font-size:.75rem;color:#888;display:block;margin-bottom:2px">Key name</label>
@@ -162,12 +322,29 @@
         <section class="section hidden" id="env">
           <div class="card">
             <h2>Environment variables</h2>
+            <p>Check which variables are set in the current environment.</p>
             <div class="vars-list" id="envVars"></div>
           </div>
         </section>
 
         <!-- ═══ MIGRATE ═══ -->
         <section class="section hidden" id="migrate">
+          <div class="doc-panel" id="migrateDocs">
+            <h4><i class="ri-book-line"></i> Database migrations <button class="toggle-docs" data-target="migrateDocsBody">toggle</button></h4>
+            <div class="doc-panel-body expanded" id="migrateDocsBody">
+              <p>Authly manages its own schema via incremental SQL migrations. Click <strong>Run</strong> to execute a migration directly against your Supabase database.</p>
+              <ul>
+                <li><code>001</code> — Roles table (admin, user, guest)</li>
+                <li><code>002</code> — Users table (authly_users)</li>
+                <li><code>003</code> — OAuth accounts (provider linkages)</li>
+                <li><code>004</code> — User roles + auto-assign trigger</li>
+                <li><code>005</code> — API keys (hashed)</li>
+                <li><code>006</code> — Sessions</li>
+                <li><code>007</code> — Magic links (Resend)</li>
+              </ul>
+              <p style="margin-top:8px">You can run migrations in any order — each uses <code>CREATE TABLE IF NOT EXISTS</code> so they're idempotent.</p>
+            </div>
+          </div>
           <div class="card">
             <h2>Migrations</h2>
             <div class="migration-list" id="migrationList"></div>
@@ -211,7 +388,6 @@
             </div>
             <p style="font-size:.8rem;color:#666;margin-top:12px">
               <i class="ri-error-warning-line"></i> MCP tools are experimental. All backend tools are wired directly via the REST API for now.
-              MCP will be fully trained after all tools are tested and stable.
             </p>
           </div>
         </section>

package/dist/dashboard/styles.css

@@ -124,6 +124,16 @@ code {
   text-align: center;
 }
 
+.sidebar__footer {
+  margin-top: auto;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.7rem;
+  color: #444;
+}
+
 /* ── Main ─────────────────────────────────────────────── */
 .main {
   flex: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rblez/authly",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Local auth dashboard for Next.js + Supabase",
   "type": "module",
   "bin": {

package/src/auth/index.js

@@ -5,6 +5,7 @@
  */
 
 import bcrypt from "bcryptjs";
+import { randomBytes, createHash } from "node:crypto";
 import { getSupabaseClient } from "../lib/supabase.js";
 import { createSessionToken, verifySessionToken } from "../lib/jwt.js";
 import { buildAuthorizeUrl, exchangeTokens, upsertUser, authWithProvider, listProviderStatus } from "../lib/oauth.js";
@@ -132,3 +133,100 @@ export async function handleOAuthCallback({ provider, code, redirectUri }) {
     return { user: null, token: null, error: e.message };
   }
 }
+
+// ── Magic Link (Resend) ──────────────────────────────
+
+/**
+ * Send a magic link to the user's email via Resend.
+ * Creates or finds the user, generates a verification token.
+ */
+export async function sendMagicLink({ email, callbackUrl }) {
+  const { client, errors } = getSupabaseClient();
+  if (!client) return { sent: false, error: errors.join(", ") };
+
+  const resendKey = process.env.RESEND_API_KEY;
+  if (!resendKey) return { sent: false, error: "RESEND_API_KEY not configured" };
+
+  if (!email) return { sent: false, error: "Email is required" };
+
+  const emailLower = email.toLowerCase();
+  const token = randomBytes(32).toString("hex");
+  const expiresAt = new Date(Date.now() + 30 * 60 * 1000); // 30 min
+
+  // Check if user exists, create if not (without password)
+  const { data: existing } = await client
+    .from("authly_users")
+    .select("id")
+    .eq("email", emailLower)
+    .single();
+
+  let userId = existing?.id;
+  if (!existing) {
+    const { data: newUser } = await client
+      .from("authly_users")
+      .insert({ email: emailLower, password_hash: null, name: emailLower.split("@")[0] })
+      .select("id")
+      .single();
+    if (newUser) userId = newUser.id;
+  }
+
+  if (!userId) return { sent: false, error: "Failed to create user record" };
+
+  // Store magic link token in DB
+  const { error: tokenError } = await client
+    .from("authly_magic_links")
+    .insert({ user_id: userId, token_hash: createHash("sha256").update(token).digest("hex"), expires_at: expiresAt.toISOString(), used: false });
+
+  if (tokenError) return { sent: false, error: tokenError.message };
+
+  // Send email via Resend
+  const from = process.env.RESEND_FROM || "noreply@authly.dev";
+  const link = `${callbackUrl}?token=${token}`;
+  const res = await fetch("https://api.resend.com/emails", {
+    method: "POST",
+    headers: { "Authorization": `Bearer ${resendKey}`, "Content-Type": "application/json" },
+    body: JSON.stringify({
+      from,
+      to: [emailLower],
+      subject: "Your Authly Magic Link",
+      html: `<p>Click the link to sign in:</p><p><a href="${link}">Sign In</a></p><p>This link expires in 30 minutes.</p>`,
+    }),
+  });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    return { sent: false, error: err.message || "Failed to send email" };
+  }
+
+  return { sent: true, error: null };
+}
+
+/**
+ * Verify a magic link token and create a session.
+ */
+export async function verifyMagicLink({ token }) {
+  const { client, errors } = getSupabaseClient();
+  if (!client) return { user: null, error: errors.join(", ") };
+
+  const tokenHash = createHash("sha256").update(token).digest("hex");
+
+  const { data: record, error } = await client
+    .from("authly_magic_links")
+    .select("user_id, expires_at, used")
+    .eq("token_hash", tokenHash)
+    .single();
+
+  if (error || !record) return { user: null, error: "Invalid token" };
+  if (record.used) return { user: null, error: "Token already used" };
+  if (new Date(record.expires_at) < new Date()) return { user: null, error: "Token expired" };
+
+  // Mark as used
+  await client.from("authly_magic_links").update({ used: true }).eq("token_hash", tokenHash);
+
+  // Get user
+  const { data: user } = await client.from("authly_users").select("id, email, name").eq("id", record.user_id).single();
+  if (!user) return { user: null, error: "User not found" };
+
+  const sessionToken = await createSessionToken({ sub: user.id, role: "user" });
+  return { user, token: sessionToken, error: null };
+}

package/src/commands/serve.js

@@ -8,7 +8,7 @@ import chalk from "chalk";
 import ora from "ora";
 import { getSupabaseClient, fetchUsers } from "../lib/supabase.js";
 import { createSessionToken, verifySessionToken, authMiddleware, requireRole } from "../lib/jwt.js";
-import { signUp, signIn, signOut, getSession, getProviders, handleOAuthCallback } from "../auth/index.js";
+import { signUp, signIn, signOut, getSession, getProviders, handleOAuthCallback, sendMagicLink, verifyMagicLink } from "../auth/index.js";
 import { buildAuthorizeUrl, exchangeTokens, listProviderStatus } from "../lib/oauth.js";
 import {
   createRole,
@@ -22,6 +22,7 @@ import { detectFramework } from "../lib/framework.js";
 import { scaffoldAuth, previewGenerated } from "../generators/ui.js";
 import { generateEnv } from "../generators/env.js";
 import { mountMcp } from "../mcp/server.js";
+import { scanSupabase } from "../integrations/supabase.js";
 
 const PORT = process.env.AUTHLY_PORT || 1284;
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -49,6 +50,13 @@ export async function cmdServe() {
   // ── Public API ─────────────────────────────────────
   app.get("/api/health", (c) => c.json({ status: "ok", uptime: process.uptime() }));
 
+  /** GET /api/integrations/supabase/scan — scan local project */
+  app.get("/api/integrations/supabase/scan", (c) => {
+    const projectRoot = path.resolve(process.cwd());
+    const scan = scanSupabase(projectRoot);
+    return c.json({ success: true, ...scan });
+  });
+
   /** GET /api/users — list all users from Supabase */
   app.get("/api/users", async (c) => {
     const { client, errors } = getSupabaseClient();
@@ -63,7 +71,31 @@ export async function cmdServe() {
     c.json({ providers: listProviderStatus() }),
   );
 
-  /** POST /api/auth/:provider/authorize — get OAuth URL */
+  /** GET /api/auth/:provider/authorize — redirect to provider */
+  app.get("/api/auth/:provider/authorize", async (c) => {
+    const { provider } = c.req.param();
+    const query = c.req.query();
+    const redirectUri = query.redirectUri || `${c.req.url.split("/api/")[0]}/api/auth/${provider}/callback`;
+
+    try {
+      const result = buildAuthorizeUrl({ provider, redirectUri, state: query.state, scope: query.scope });
+      return c.redirect(result.url);
+    } catch (e) {
+      // Provider not found — redirect to authorize page
+      return c.redirect("/authorize");
+    }
+  });
+
+  /** GET /authorize — sign-in page listing available providers */
+  app.get("/authorize", (c) => {
+    if (hasDashboard) {
+      const html = fs.readFileSync(path.join(dashboardPath, "authorize.html"), "utf-8");
+      return c.html(html);
+    }
+    return c.json({ providers: listProviderStatus() });
+  });
+
+  /** POST /api/auth/:provider/authorize — get OAuth URL as JSON */
   app.post("/api/auth/:provider/authorize", async (c) => {
     const { provider } = c.req.param();
     const body = await c.req.json();
@@ -142,6 +174,22 @@ export async function cmdServe() {
     return c.json({ providers });
   });
 
+  /** POST /api/auth/magic-link/send — send magic link email */
+  app.post("/api/auth/magic-link/send", async (c) => {
+    const body = await c.req.json();
+    const result = await sendMagicLink({ email: body.email, callbackUrl: body.callbackUrl || "/" });
+    if (result.error) return c.json({ success: false, error: result.error }, 400);
+    return c.json({ success: true, sent: true });
+  });
+
+  /** POST /api/auth/magic-link/verify — verify magic link token */
+  app.post("/api/auth/magic-link/verify", async (c) => {
+    const body = await c.req.json();
+    const { user, token, error } = await verifyMagicLink({ token: body.token });
+    if (error) return c.json({ success: false, error }, 401);
+    return c.json({ success: true, user, token });
+  });
+
   /** GET /api/config — non-sensitive project config */
   app.get("/api/config", async (c) => {
     const fw = detectFramework();
@@ -270,16 +318,33 @@ export async function cmdServe() {
   });
 
   // ── Init ──────────────────────────────────────────
-  /** POST /api/init/connect — detect project and generate config */
+  /** GET /api/init/scan — autodetect Supabase config in current project */
+  app.get("/api/init/scan", (c) => {
+    const projectRoot = path.resolve(process.cwd());
+    const scan = scanSupabase(projectRoot);
+    return c.json(scan);
+  });
+
+  /** POST /api/init/connect — connect with autodetected or manual config */
   app.post("/api/init/connect", async (c) => {
     const body = await c.req.json().catch(() => ({}));
-    const fw = detectFramework();
-    if (!fw) return c.json({ success: false, error: "No Next.js project detected" }, 400);
 
-    // Store Supabase config if provided
-    if (body.supabaseUrl) process.env.SUPABASE_URL = body.supabaseUrl;
-    if (body.supabaseAnonKey) process.env.SUPABASE_ANON_KEY = body.supabaseAnonKey;
-    if (body.supabaseServiceKey) process.env.SUPABASE_SERVICE_ROLE_KEY = body.supabaseServiceKey;
+    // Auto-detect first
+    const projectRoot = path.resolve(process.cwd());
+    const scan = scanSupabase(projectRoot);
+
+    // Merge scan results with any manually provided values
+    const url = scan.url || body.supabaseUrl || process.env.SUPABASE_URL || "";
+    const anonKey = scan.anonKey || body.supabaseAnonKey || process.env.SUPABASE_ANON_KEY || "";
+    const serviceKey = scan.serviceKey || body.supabaseServiceKey || process.env.SUPABASE_SERVICE_ROLE_KEY || "";
+
+    // Set env vars from detected config
+    if (url) process.env.SUPABASE_URL = url;
+    if (anonKey) process.env.SUPABASE_ANON_KEY = anonKey;
+    if (serviceKey) process.env.SUPABASE_SERVICE_ROLE_KEY = serviceKey;
+
+    const fw = scan.framework || detectFramework();
+    if (!fw && !body.supabaseUrl) return c.json({ success: false, error: "No Next.js project detected" }, 400);
 
     // Generate .env.local if needed
     if (!fs.existsSync(".env.local")) {
@@ -288,16 +353,28 @@ export async function cmdServe() {
 
     // Write authly.config.json
     const config = {
-      framework: fw,
+      framework: fw || "unknown",
       supabase: {
-        url: body.supabaseUrl || "",
-        anonKey: body.supabaseAnonKey ? "set" : "",
-        serviceKey: body.supabaseServiceKey ? "set" : "",
+        url,
+        projectRef: scan.projectRef || "",
+        anonKey: anonKey ? "set" : "",
+        serviceKey: serviceKey ? "set" : "",
+        autoDetected: scan.detected,
+        sources: scan.sources,
       },
     };
     fs.writeFileSync("authly.config.json", JSON.stringify(config, null, 2) + "\n");
 
-    return c.json({ success: true, framework: fw });
+    return c.json({
+      success: true,
+      framework: fw,
+      supabase: {
+        url,
+        detected: scan.detected,
+        canConnect: scan.canConnect,
+        sources: scan.sources,
+      },
+    });
   });
 
   // ── MCP (beta) ─────────────────────────────────────

package/src/generators/env.js

@@ -27,8 +27,9 @@ GOOGLE_CLIENT_SECRET=""
 GITHUB_CLIENT_ID=""
 GITHUB_CLIENT_SECRET=""
 
-# Magic Link (optional)
-# RESEND_API_KEY=""
+# Magic Link via Resend (optional)
+RESEND_API_KEY=""
+RESEND_FROM="noreply@authly.dev"
 
 # Dashboard (optional overrides)
 # AUTHLY_PORT=1284

package/src/generators/migrations.js

@@ -125,6 +125,23 @@ CREATE TABLE IF NOT EXISTS public.authly_sessions (
 
 CREATE INDEX idx_sessions_user ON public.authly_sessions(user_id);
 CREATE INDEX idx_sessions_token ON public.authly_sessions(token_hash);
+`,
+  },
+  {
+    name: "007_create_magic_links_table",
+    description: "Magic Link auth via Resend — one-time-use tokens",
+    sql: `
+CREATE TABLE IF NOT EXISTS public.authly_magic_links (
+  id          uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id     uuid NOT NULL REFERENCES public.authly_users(id) ON DELETE CASCADE,
+  token_hash  text UNIQUE NOT NULL,
+  expires_at  timestamptz NOT NULL,
+  used        boolean DEFAULT false,
+  created_at  timestamptz DEFAULT now()
+);
+
+CREATE INDEX idx_magic_links_token ON public.authly_magic_links(token_hash);
+CREATE INDEX idx_magic_links_user ON public.authly_magic_links(user_id);
 `,
   },
 ];

package/src/integrations/supabase.js

@@ -0,0 +1,156 @@
+/**
+ * Supabase auto-detection integration.
+ *
+ * Scans the local Next.js project for Supabase credentials.
+ * No PAT or manual input needed — Authly finds them in env files.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+/**
+ * Read a .env file format and return key-value pairs.
+ * @param {string} filePath
+ * @returns {Record<string, string>}
+ */
+function _parseEnv(filePath) {
+  const result = {};
+  if (!fs.existsSync(filePath)) return result;
+
+  const content = fs.readFileSync(filePath, "utf-8");
+  for (const line of content.split("\n")) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) continue;
+    const idx = trimmed.indexOf("=");
+    if (idx === -1) continue;
+    const key = trimmed.slice(0, idx).trim();
+    let value = trimmed.slice(idx + 1).trim();
+    // Remove surrounding quotes
+    if ((value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"))) {
+      value = value.slice(1, -1);
+    }
+    result[key] = value;
+  }
+  return result;
+}
+
+/**
+ * Parse supabase/config.toml if it exists.
+ * @param {string} projectRoot
+ * @returns {{ projectRef?: string; poolerUrl?: string }}
+ */
+function _parseSupabaseToml(projectRoot) {
+  const tomlPath = path.join(projectRoot, "supabase", "config.toml");
+  if (!fs.existsSync(tomlPath)) return {};
+
+  const content = fs.readFileSync(tomlPath, "utf-8");
+  const refMatch = content.match(/project_id\s*=\s*"?([a-zA-Z0-9]{20})"?/);
+  return refMatch ? { projectRef: refMatch[1] } : {};
+}
+
+/**
+ * Try to find a Supabase URL in a local project.
+ * Checks: supabase/.env, .env.local, .env, supabase/config.toml
+ * @param {string} cwd
+ * @returns {string|null}
+ */
+function _findSupabaseUrl(cwd) {
+  // Check supabase/.env
+  const supabaseEnv = _parseEnv(path.join(cwd, "supabase", ".env"));
+  if (supabaseEnv.SUPABASE_URL) return supabaseEnv.SUPABASE_URL;
+
+  // Check common env files in order of preference
+  for (const envFile of [".env.local", ".env.development.local", ".env.development", ".env"]) {
+    const env = _parseEnv(path.join(cwd, envFile));
+    if (env.NEXT_PUBLIC_SUPABASE_URL) return env.NEXT_PUBLIC_SUPABASE_URL;
+    if (env.SUPABASE_URL) return env.SUPABASE_URL;
+    if (env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
+      // Some projects set the ref as NEXT_PUBLIC_SUPABASE_URL
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Try to find Supabase keys in a local project.
+ * @param {string} cwd
+ * @returns {{ anonKey?: string; serviceKey?: string }}
+ */
+function _findSupabaseKeys(cwd) {
+  const result = {};
+
+  for (const envFile of [".env.local", ".env", ".env.development.local", ".env.development"]) {
+    const env = _parseEnv(path.join(cwd, envFile));
+    if (env.NEXT_PUBLIC_SUPABASE_ANON_KEY) result.anonKey = env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    if (env.SUPABASE_ANON_KEY) result.anonKey = env.SUPABASE_ANON_KEY;
+    if (env.SUPABASE_SERVICE_ROLE_KEY) result.serviceKey = env.SUPABASE_SERVICE_ROLE_KEY;
+  }
+
+  return result;
+}
+
+/**
+ * Scan the given project directory for Supabase configuration.
+ * Returns everything found — may be partial if not all vars are configured.
+ *
+ * @param {string} cwd — Project root (where package.json lives)
+ * @returns {{
+ *   detected: boolean;
+ *   url?: string;
+ *   anonKey?: string;
+ *   serviceKey?: string;
+ *   projectRef?: string;
+ *   framework?: string;
+ *   sources: string[];
+ *   canConnect: boolean;
+ * }}
+ */
+export function scanSupabase(cwd) {
+  const sources = [];
+
+  const url = _findSupabaseUrl(cwd);
+  if (url) sources.push("env files");
+
+  const keys = _findSupabaseKeys(cwd);
+  if (keys.anonKey) sources.push("env files");
+  if (keys.serviceKey) sources.push("env files");
+
+  const { projectRef } = _parseSupabaseToml(cwd);
+  if (projectRef) sources.push("supabase/config.toml");
+
+  const canConnect = !!(url && keys.anonKey && keys.serviceKey);
+
+  return {
+    detected: !!url || !!keys.anonKey,
+    url,
+    anonKey: keys.anonKey,
+    serviceKey: keys.serviceKey,
+    projectRef,
+    framework: _detectFramework(cwd),
+    sources: [...new Set(sources)],
+    canConnect,
+  };
+}
+
+/**
+ * Detect if the project is Next.js, Remit, etc.
+ * @param {string} cwd
+ * @returns {string|null}
+ */
+function _detectFramework(cwd) {
+  const pkgPath = path.join(cwd, "package.json");
+  if (!fs.existsSync(pkgPath)) return null;
+
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (deps.next) return "nextjs";
+    if (deps.remix) return "remix";
+    if (deps.sveltekit || deps["@sveltejs/kit"]) return "sveltekit";
+    if (deps.vite) return "vite";
+  } catch {}
+
+  return null;
+}

package/src/lib/oauth.js

@@ -255,13 +255,32 @@ export async function authWithProvider(opts) {
   };
 }
 
+/**
+ * List all configured providers and their status.
+ *
+ * @returns {{ name: string; enabled: boolean; scopes: string }[]}
+ */
+/**
+ * Include additional "providers" that are not in the PROVIDERS
+ * object (e.g. magic-link, password).
+ *
+ * @returns {{ name: string; enabled: boolean; scopes: string }[]}
+ */
+function _listAdditionalProviders() {
+  const extras = [];
+  if (process.env.RESEND_API_KEY) {
+    extras.push({ name: "magiclink", enabled: true, scopes: "email" });
+  }
+  return extras;
+}
+
 /**
  * List all configured providers and their status.
  *
  * @returns {{ name: string; enabled: boolean; scopes: string }[]}
  */
 export function listProviderStatus() {
-  return Object.keys(PROVIDERS).map((name) => {
+  const oauthProviders = Object.keys(PROVIDERS).map((name) => {
     const upper = name.toUpperCase();
     const clientId = process.env[`${upper}_CLIENT_ID`] || "";
     const clientSecret = process.env[`${upper}_CLIENT_SECRET`] || "";
@@ -271,6 +290,9 @@ export function listProviderStatus() {
       scopes: PROVIDERS[name].scopeDefault,
     };
   });
+
+  const extras = _listAdditionalProviders();
+  return [...oauthProviders, ...extras];
 }
 
 /**