@rblez/authly 0.1.0 → 0.3.0

package/bin/authly.js

@@ -3,13 +3,15 @@ import { parseArgs } from "node:util";
 import { cmdServe } from "../src/commands/serve.js";
 import { cmdInit } from "../src/commands/init.js";
 import { cmdAudit } from "../src/commands/audit.js";
+import { cmdExt } from "../src/commands/ext.js";
 import chalk from "chalk";
 
 const COMMANDS = {
   serve: { description: "Start the local auth dashboard", handler: cmdServe },
   init: { description: "Initialize authly in your project", handler: cmdInit },
+  ext: { description: "Manage extensions (add, remove)", handler: cmdExt },
   audit: { description: "Check auth configuration for issues", handler: cmdAudit },
-  version: { description: "Show version", handler: () => console.log("0.1.0") },
+  version: { description: "Show version", handler: () => console.log("0.3.0") },
 };
 
 async function main() {

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,117 @@
+<!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 12px; }
+    .section-label {
+      font-size: .7rem; color: #555; text-transform: uppercase;
+      letter-spacing: 1px; margin: 16px 0 8px; text-align: left;
+    }
+    .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; }
+    .platform-connect {
+      display: flex; align-items: center; gap: 12px; width: 100%;
+      padding: 12px 16px; margin-bottom: 8px; border: 1px solid #1d355e;
+      border-radius: 8px; background: #0d1b3e; color: #58a6ff;
+      font-size: .9rem; cursor: pointer; transition: border-color .2s;
+      text-decoration: none;
+    }
+    .platform-connect:hover { border-color: #58a6ff; }
+    .platform-connect.connected { border-color: #22c55e44; background: #0a1a0a; color: #22c55e; }
+    .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>Connect your Supabase project to enable authentication</p>
+
+      <!-- Platform: Connect Supabase (OAuth to Supabase API) -->
+      <div class="section-label">Platform connection</div>
+      <a href="/api/auth/supabase/authorize" id="supabasePlatformBtn" class="platform-connect">
+        <img src="https://cdn.simpleicons.org/supabase/fff" width="20" height="20" alt="Supabase" />
+        <span class="label">Connect Supabase</span>
+        <span class="status" id="sbStatus">Not connected</span>
+      </a>
+
+      <!-- Regular OAuth providers -->
+      <div class="section-label">App authentication</div>
+      <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>";
+      }
+    }
+
+    // Check if Supabase is already connected
+    async function checkSupabaseConnected() {
+      try {
+        const res = await fetch("/api/health");
+        if (res.ok) {
+          document.getElementById("sbStatus").textContent = "Connected";
+          const btn = document.getElementById("supabasePlatformBtn");
+          btn.classList.add("connected");
+        }
+      } catch {}
+    }
+
+    loadProviders();
+    checkSupabaseConnected();
+  </script>
+</body>
+</html>