@rblez/authly 0.1.0

package/README.md

@@ -0,0 +1,215 @@
+# Authly
+
+**Authly** is a local auth dashboard for Next.js + Supabase. No global installs. No third-party dependencies. Your data, your server.
+
+```bash
+npx @rblez/authly
+```
+
+<p align="center">
+  <img src="https://img.shields.io/badge/status-in_construction-black" alt="Status">
+  <img src="https://img.shields.io/node/v/@rblez/authly" alt="Node version">
+  <img src="https://img.shields.io/github/license/rblez/authly" alt="License">
+</p>
+
+---
+
+## Why it exists
+
+- I don't want to depend on Supabase Auth, Clerk, or Better Auth
+- I want auth ready in 10 minutes on any new project
+- I want to manage users from a panel while developing
+- Everything runs on my own infrastructure
+
+---
+
+## How it works
+
+1. Run `npx @rblez/authly` in your project
+2. It detects your stack (Next.js App Router)
+3. Starts a dashboard at `localhost:1284`
+4. Configure providers, roles, sessions from the UI
+5. Generates files, migrations, and env vars automatically
+6. While running — live user panel via internal API
+7. In production — it doesn't exist, zero exposed surface
+
+---
+
+## Quick start
+
+```bash
+# 1. In any project directory
+npx @rblez/authly
+
+# 2. Set Supabase credentials
+export SUPABASE_URL=""
+export SUPABASE_ANON_KEY=""
+export SUPABASE_SERVICE_ROLE_KEY=""
+export AUTHLY_SECRET="$(openssl rand -hex 32)"
+
+# 3. Configure OAuth providers
+export GOOGLE_CLIENT_ID=""
+export GOOGLE_CLIENT_SECRET=""
+export GITHUB_CLIENT_ID=""
+export GITHUB_CLIENT_SECRET=""
+
+# 4. Dashboard runs at http://localhost:1284
+```
+
+---
+
+## Installation
+
+```bash
+# One-off (recommended)
+npx @rblez/authly
+
+# Or install locally
+npm install @rblez/authly -D
+npx authly
+```
+
+**Requirements:**
+- Node.js 20+
+- A Supabase project
+- A Next.js project with App Router
+
+---
+
+## Setup
+
+Authly connects via environment variables or `authly.config.json`:
+
+```json
+{
+  "framework": "nextjs",
+  "supabase": {
+    "url": "https://xxx.supabase.co",
+    "anonKey": "",
+    "serviceRoleKey": ""
+  }
+}
+```
+
+Or via `.env.local`:
+
+```bash
+# required
+SUPABASE_URL=""
+SUPABASE_ANON_KEY=""
+SUPABASE_SERVICE_ROLE_KEY=""
+AUTHLY_SECRET=""          # random string for JWT signing
+
+# optional - providers
+GOOGLE_CLIENT_ID=""
+GOOGLE_CLIENT_SECRET=""
+GITHUB_CLIENT_ID=""
+GITHUB_CLIENT_SECRET=""
+
+# optional - overrides
+AUTHLY_PORT=1284
+```
+
+---
+
+## Dashboard sections
+
+| Section | What it does |
+|---|---|
+| **Init** | Connects to your project, detects stack |
+| **Providers** | Enable Google, GitHub, Discord — buttons appear auto |
+| **UI** | Generates login/signup TSX with SimpleIcon provider buttons |
+| **Routes** | Auth middleware, redirects, UTM tracking |
+| **Roles** | Role system: create roles, assign/revoke to users |
+| **API Keys** | Generate and manage programmatic API keys |
+| **Env** | Generates documented `.env.local` |
+| **Migrate** | Runs SQL migrations without Supabase dashboard |
+| **Users** | Live user panel via internal API |
+| **Audit** | Checks config, env vars, and database connectivity |
+
+---
+
+## API Reference
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `GET` | `/api/health` | Health check |
+| `GET` | `/api/auth/providers` | List OAuth providers + status |
+| `POST` | `/api/auth/register` | Sign up email + password |
+| `POST` | `/api/auth/login` | Sign in email + password |
+| `GET` | `/api/auth/me` | Verify session (Bearer token) |
+| `GET` | `/api/users` | List users from Supabase |
+| `GET` | `/api/roles` | List roles |
+| `POST` | `/api/roles` | Create role |
+| `POST` | `/api/keys` | Generate API key |
+| `GET` | `/api/migrations` | List available migrations |
+| `POST` | `/api/audit` | Run config audit |
+
+---
+
+## Stack
+
+| Layer | Tech |
+|---|---|
+| **Runtime** | Node.js 18+ |
+| **Server** | Hono |
+| **Database** | Supabase (PostgreSQL) |
+| **Sessions** | JWT via `jose` (HS256) |
+| **Password** | bcryptjs |
+| **OAuth** | Direct provider APIs + authly SDK |
+| **Output** | Next.js (TSX) + Supabase migrations |
+
+---
+
+## Design Rules
+
+- Black by default, always
+- SF Pro Text + SimpleIcons for provider logos
+- Zero data on third parties — everything in your Supabase
+- Never runs in production — development only
+- Plug-and-play — functional in under 10 minutes
+
+---
+
+## Roadmap
+
+### v0.1 — Core (personal use)
+- [x] `npx @rblez/authly` starts local server
+- [x] Base dashboard UI (black, SF Pro, Remixicon)
+- [x] Init — detects Next.js + connects Supabase
+- [x] Generates `users` table migration
+- [x] Generates `.env.local`
+
+### v0.2 — Auth in production
+- [ ] Provider: Magic Link (Resend)
+- [x] Provider: Google OAuth
+- [x] Provider: GitHub OAuth
+- [x] Scaffold login/signup TSX
+- [x] Protected route middleware
+- [x] Password auth (login/register)
+
+### v0.3 — User panel
+- [x] Internal API that fetches users from Supabase
+- [x] Live user view in dashboard
+- [x] Basic roles (admin / user)
+
+### v0.4 — Complete DX
+- [x] API Keys — generation and validation
+- [x] UTM tracking on redirects
+- [x] `authly audit` — detects config issues
+- [ ] Inline documentation in dashboard
+
+### v1.0 — Public Release
+- [ ] Tested on Tiendly, smsnumerovirtual, and a third project
+- [x] Complete README
+- [ ] Published on npm as `@rblez/authly`
+- [x] Public repo on github.com/rblez/authly
+
+### Future
+- [ ] Multi-DB support (PostgreSQL direct, MongoDB, etc.)
+
+---
+
+## License
+
+MIT — rblez

package/bin/authly.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+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 chalk from "chalk";
+
+const COMMANDS = {
+  serve: { description: "Start the local auth dashboard", handler: cmdServe },
+  init: { description: "Initialize authly in your project", handler: cmdInit },
+  audit: { description: "Check auth configuration for issues", handler: cmdAudit },
+  version: { description: "Show version", handler: () => console.log("0.1.0") },
+};
+
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+
+  if (!command || command === "--help" || command === "-h") {
+    printHelp();
+    return;
+  }
+
+  if (command === "--version" || command === "-v") {
+    COMMANDS.version.handler();
+    return;
+  }
+
+  const cmd = COMMANDS[command];
+  if (!cmd) {
+    console.error(`Unknown command: ${chalk.red(command)}\n`);
+    printHelp();
+    process.exit(1);
+  }
+
+  await cmd.handler(args.slice(1));
+}
+
+function printHelp() {
+  console.log(chalk.bold("\n  Authly — local auth dashboard for Next.js + Supabase\n"));
+  console.log(chalk.bold("  Usage:"));
+  console.log(`    npx @rblez/authly <command>\n`);
+  console.log(chalk.bold("  Commands:"));
+  for (const [name, info] of Object.entries(COMMANDS)) {
+    console.log(`    ${chalk.cyan(name.padEnd(10))} ${info.description}`);
+  }
+  console.log();
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/dist/dashboard/app.js

@@ -0,0 +1,326 @@
+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();
+
+  // ── Helpers ─────────────────────────────────────────
+  async function api(endpoint, opts = {}) {
+    const res = await fetch(`/api${endpoint}`, {
+      headers: { "Content-Type": "application/json" },
+      ...opts,
+    });
+    return res.json();
+  }
+
+  function showResult(el, text, type = "info") {
+    el.textContent = "";
+    el.classList.remove("hidden", "result--ok", "result--error", "result--info");
+    el.classList.add(`result--${type}`);
+    el.textContent = text;
+  }
+
+  function hideResult(el) {
+    el.classList.add("hidden");
+    el.classList.remove("result--ok", "result--error", "result--info");
+  }
+
+  function showToast(msg, type = "ok") {
+    const toast = document.getElementById("toast");
+    toast.textContent = msg;
+    toast.className = `toast toast--${type}`;
+    setTimeout(() => toast.classList.add("hidden"), 3500);
+  }
+
+  // ── Health ──────────────────────────────────────────
+  async function checkHealth() {
+    try {
+      const res = await fetch("/api/health");
+      if (res.ok) {
+        statusText.textContent = "Connected";
+        statusDot.style.background = "#22c55e";
+      } else {
+        setDisconnected();
+      }
+    } catch { setDisconnected(); }
+  }
+
+  function setDisconnected() {
+    statusText.textContent = "Disconnected";
+    statusDot.style.background = "#ef4444";
+  }
+
+  // ── Navigation ──────────────────────────────────────
+  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);
+    headerTitle.textContent = document.querySelector(`[data-section="${id}"]`)?.textContent?.trim() ?? "";
+    sidebar.classList.remove("open");
+
+    // Lazy-load section data
+    if (id === "users") loadUsers();
+    if (id === "providers") loadProviders();
+    if (id === "roles") loadRoles();
+    if (id === "env") loadEnv();
+    if (id === "migrate") loadMigrations();
+    if (id === "init") checkInitFiles();
+  }
+
+  // ── Init ────────────────────────────────────────────
+  checkInitFiles();
+
+  const initForm = document.getElementById("initForm");
+  if (initForm) {
+    initForm.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const btn = document.getElementById("initBtn");
+      const result = document.getElementById("initResult");
+      btn.disabled = true;
+      btn.textContent = "Connecting…";
+      hideResult(result);
+
+      const data = await api("/init/connect", {
+        method: "POST",
+        body: JSON.stringify({
+          supabaseUrl: document.getElementById("initUrl").value.trim(),
+          supabaseAnonKey: document.getElementById("initAnon").value.trim(),
+          supabaseServiceKey: document.getElementById("initService").value.trim(),
+        }),
+      });
+
+      btn.disabled = false;
+      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");
+        showToast("Project connected successfully");
+        checkInitFiles();
+        checkHealth();
+      } 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");
+    body.innerHTML = '<tr><td colspan="4" class="text-muted">Loading…</td></tr>';
+    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>';
+        return;
+      }
+      body.innerHTML = data.users.map(u =>
+        `<tr>
+          <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>
+        </tr>`
+      ).join("");
+    } catch {
+      body.innerHTML = '<tr><td colspan="4" class="text-muted">Failed to load users</td></tr>';
+    }
+  };
+
+  const refreshBtn = document.getElementById("refreshUsers");
+  if (refreshBtn) refreshBtn.addEventListener("click", () => loadUsers());
+
+  // ── Providers ───────────────────────────────────────
+  window.loadProviders = async function() {
+    const container = document.getElementById("providerList");
+    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>
+        <div class="provider-info">
+          <div class="provider-name">${p.name}</div>
+          <div class="provider-scopes">scope: ${p.scopes}</div>
+        </div>
+        <span class="provider-status ${p.enabled ? "enabled" : "disabled"}">${p.enabled ? "Configured" : "Not configured"}</span>
+      </div>`
+    ).join("");
+  };
+
+  // ── Roles ───────────────────────────────────────────
+  window.loadRoles = async function() {
+    const container = document.getElementById("rolesList");
+    const data = await api("/roles");
+    if (!data.success || !data.roles?.length) {
+      container.innerHTML = '<span class="text-muted">No roles. Connect Supabase and run migration.</span>';
+      return;
+    }
+    container.innerHTML = data.roles.map(r =>
+      `<span class="role-chip">${r.name}</span>`
+    ).join("");
+  };
+
+  const addRoleBtn = document.getElementById("addRoleBtn");
+  if (addRoleBtn) {
+    addRoleBtn.addEventListener("click", async () => {
+      const name = prompt("Role name (e.g. editor):");
+      if (!name) return;
+      const data = await api("/roles", {
+        method: "POST",
+        body: JSON.stringify({ name, description: "Custom role" }),
+      });
+      if (data.success) { showToast(`Role '${name}' created`); loadRoles(); }
+      else showToast(data.error || "Failed to create role", "error");
+    });
+  }
+
+  const assignForm = document.getElementById("roleAssignForm");
+  if (assignForm) {
+    assignForm.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const userId = document.getElementById("assignUserId").value.trim();
+      const roleName = document.getElementById("assignRoleName").value.trim();
+      if (!userId || !roleName) return;
+      const result = document.getElementById("roleAssignResult");
+      const data = await api(`/roles/${roleName}/users/${userId}/assign`, { method: "POST" });
+      if (data.success) { showResult(result, `Role '${roleName}' assigned to ${userId.slice(0,8)}…`, "ok"); }
+      else { showResult(result, data.error || "Failed", "error"); }
+    });
+  }
+
+  // ── API Keys ────────────────────────────────────────
+  const keyForm = document.getElementById("keyForm");
+  if (keyForm) {
+    keyForm.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const name = document.getElementById("keyName").value.trim();
+      if (!name) return;
+      const result = document.getElementById("keyResult");
+      const data = await api("/keys", { method: "POST", body: JSON.stringify({ name }) });
+      if (data.success && data.key) {
+        showResult(result, `Key generated (shown once):\n${data.key}`, "ok");
+      } else {
+        showResult(result, data.error || "Failed to generate key", "error");
+      }
+    });
+  }
+
+  // ── Env ─────────────────────────────────────────────
+  window.loadEnv = async function() {
+    const container = document.getElementById("envVars");
+    const vars = ["SUPABASE_URL", "SUPABASE_ANON_KEY", "SUPABASE_SERVICE_ROLE_KEY", "AUTHLY_SECRET", "GOOGLE_CLIENT_ID", "GITHUB_CLIENT_ID"];
+    const data = await api("/audit", { method: "POST" });
+    const checks = new Map();
+    if (data.issues) data.issues.forEach(i => checks.set(i.check, i.status));
+
+    container.innerHTML = vars.map(v => {
+      const status = checks.has(v) ? (checks.get(v) === "ok" ? "set" : "unset") : "unknown";
+      return `<div class="var-row">
+        <span class="var-name">${v}</span>
+        <span class="var-status ${status === "set" ? "var-status--set" : ""}">${status === "set" ? "● set" : status === "unknown" ? "— unknown" : "○ not set"}</span>
+      </div>`;
+    }).join("");
+  };
+
+  // ── Migrations ──────────────────────────────────────
+  window.loadMigrations = async function() {
+    const container = document.getElementById("migrationList");
+    const data = await api("/migrations");
+    if (!data.success) return;
+
+    container.innerHTML = data.migrations.map(m =>
+      `<div class="migration-item">
+        <i class="ri-file-code-line"></i>
+        <span>${m.name}</span>
+        <span class="text-muted" style="margin-left:4px">${m.description}</span>
+        <button class="btn btn--sm btn--primary" onclick="runMigration('${m.name}')">Run</button>
+      </div>`
+    ).join("");
+  };
+
+  window.runMigration = async function(name) {
+    const result = confirm(`Run migration '${name}'? This executes SQL directly.`);
+    if (!result) return;
+    const data = await api(`/migrations/${name}/run`, { method: "POST" });
+    if (data.success) showToast(`Migration '${name}' applied`);
+    else showToast(data.error || "Migration failed", "error");
+  };
+
+  // ── Audit ───────────────────────────────────────────
+  const auditBtn = document.getElementById("runAudit");
+  if (auditBtn) {
+    auditBtn.addEventListener("click", async () => {
+      const resultDiv = document.getElementById("auditResult");
+      resultDiv.classList.remove("hidden");
+      resultDiv.textContent = "Running…";
+
+      const data = await api("/audit", { method: "POST" });
+      let html = `<p style="margin-bottom:8px">${data.success ? "✔ All checks passed" : `✘ ${data.issues.length} issue(s)`}</p>`;
+      html += data.issues.map(i =>
+        `<div style="font-size:.8rem;padding:4px 0;display:flex;gap:6px">
+          <span>${i.status === "ok" ? "<span style='color:#22c55e'>✔</span>" : "<span style='color:#f87171'>✘</span>"}</span>
+          <span>${i.check}${i.detail ? `: ${i.detail}` : ""}</span>
+        </div>`
+      ).join("");
+      resultDiv.innerHTML = html;
+    });
+  }
+
+  // ── Scaffold ────────────────────────────────────────
+  for (const card of document.querySelectorAll(".scaffold-card")) {
+    card.addEventListener("click", async () => {
+      const type = card.dataset.scaffold;
+      const preview = document.getElementById("scaffoldPreview");
+      const code = document.getElementById("scaffoldCode");
+
+      const data = await api("/scaffold/preview", {
+        method: "POST",
+        body: JSON.stringify({ type }),
+      });
+
+      if (data.success) {
+        code.textContent = data.code;
+        preview.classList.remove("hidden");
+      }
+    });
+  }
+
+  // ── Mobile menu ─────────────────────────────────────
+  if (menuBtn) menuBtn.addEventListener("click", () => sidebar.classList.toggle("open"));
+
+  // ── Toggles ─────────────────────────────────────────
+  for (const toggle of document.querySelectorAll(".toggle")) {
+    toggle.addEventListener("click", () => {
+      toggle.setAttribute("aria-checked", String(toggle.getAttribute("aria-checked") !== "true"));
+    });
+  }
+
+  // ── Hash navigation ────────────────────────────────
+  const hash = location.hash.replace("#", "");
+  if (hash && document.getElementById(hash)) switchSection(hash);
+});