4bnode 4.1.2 → 4.1.4

package/skeleton/.4bnode/assets/js/components/Sidebar.js

@@ -29,7 +29,7 @@ export function Sidebar() {
       lockMsg: "Requires database",
     },
     { id: "routes", label: "API Routes", icon: Icons.route },
-    { id: "docs", label: "API Docs", icon: Icons.docs },
+    // { id: "docs", label: "API Docs", icon: Icons.docs },  // hidden for now
     { id: "api-tester", label: "API Tester", icon: Icons.apiTester },
     {
       id: "security",
@@ -37,10 +37,9 @@ export function Sidebar() {
       icon: Icons.shield,
       section: "Features",
     },
-    { id: "api-keys", label: "API Keys", icon: Icons.apiKeys },
     { id: "realtime", label: "Real-time", icon: Icons.realtime },
     { id: "serialport", label: "SerialPort", icon: Icons.serial },
-    { id: "mail", label: "Email", icon: Icons.mail },
+    // { id: "mail", label: "Email", icon: Icons.mail },  // hidden for now
     { id: "logs", label: "Logs", icon: Icons.logs, section: "Settings" },
     { id: "env", label: "Environment", icon: Icons.env },
   ];

package/skeleton/.4bnode/assets/js/lib.js

@@ -23,7 +23,6 @@ import {
   LuSparkles,
   LuBookOpen,
   LuMail,
-  LuKeyRound,
 } from "react-icons/lu";
 
 export const html = htm.bind(React.createElement);
@@ -88,7 +87,6 @@ export const Icons = {
   serial: html`<${LuCable} size=${16} />`,
   zap: html`<${LuZap} size=${16} />`,
   shield: html`<${LuShield} size=${16} />`,
-  apiKeys: html`<${LuKeyRound} size=${16} />`,
   box: html`<${LuBox} size=${16} />`,
   apiTester: html`<${LuFlaskConical} size=${16} />`,
   send: html`<${LuSend} size=${16} />`,
@@ -106,7 +104,6 @@ export const PAGE_TITLES = {
   routes: "API Routes",
   docs: "API Docs",
   security: "Security",
-  "api-keys": "API Keys",
   "api-tester": "API Tester",
   realtime: "Real-time",
   serialport: "SerialPort",

package/skeleton/.4bnode/assets/js/pages/DocsPage.js

@@ -4,14 +4,21 @@ import { html, api } from "../lib.js";
 import { useApp } from "../context.js";
 
 export function DocsPage() {
-  const { toast, refresh, showConfirm } = useApp();
+  const { toast, refresh } = useApp();
   const [info, setInfo] = useState(null);
   const [busy, setBusy] = useState(false);
   const [pw, setPw] = useState("");
   const [pwBusy, setPwBusy] = useState(false);
 
   const load = useCallback(async () => {
-    try { setInfo(await api("/docs")); } catch (err) { toast(err.message, "error"); }
+    // Docs setup/regenerate writes src/docs.js → nodemon restart. Retry across the
+    // restart window so the re-fetch doesn't surface as a "NetworkError".
+    let lastErr;
+    for (let i = 0; i < 8; i++) {
+      try { setInfo(await api("/docs")); return; }
+      catch (err) { lastErr = err; await new Promise((r) => setTimeout(r, 500)); }
+    }
+    if (lastErr) toast(lastErr.message, "error");
   }, [toast]);
 
   useEffect(() => { load(); }, [load]);
@@ -22,10 +29,18 @@ export function DocsPage() {
   })();
 
   async function setup() {
+    if (pw && pw.length < 6) {
+      toast("Password must be at least 6 characters (or leave blank for public docs)", "error");
+      return;
+    }
     setBusy(true);
     try {
-      const r = await api("/docs/setup", { method: "POST" });
-      toast(r.message, "success");
+      // Set the password first (writes docs-auth.json), then create the docs route —
+      // so /docs is protected from the moment it goes live.
+      if (pw) await api("/docs/password", { method: "POST", body: { password: pw } });
+      await api("/docs/setup", { method: "POST" });
+      toast(pw ? "API docs set up and password-protected." : "API docs set up at /docs.", "success");
+      setPw("");
       await load();
       refresh().catch(() => {});
     } catch (err) { toast(err.message, "error"); }
@@ -54,25 +69,13 @@ export function DocsPage() {
     setPwBusy(false);
   }
 
-  async function removePassword() {
-    const ok = await showConfirm("Remove the docs password? /docs will be publicly accessible.", { danger: true, confirmLabel: "Remove" });
-    if (!ok) return;
-    setPwBusy(true);
-    try {
-      const r = await api("/docs/password", { method: "DELETE" });
-      toast(r.message, "success");
-      await load();
-    } catch (err) { toast(err.message, "error"); }
-    setPwBusy(false);
-  }
-
   if (!info) return html`<div className="text-muted" style=${{ padding: "16px" }}>Loading…</div>`;
 
   return html`<div>
     <div className="flex items-center justify-between mb-4">
       <div>
         <div className="card-title">API Documentation</div>
-        <div className="card-subtitle">OpenAPI 3 spec + interactive Swagger UI, generated from your routes</div>
+        <div className="card-subtitle">Interactive API docs generated from your routes and models</div>
       </div>
     </div>
 
@@ -82,9 +85,16 @@ export function DocsPage() {
             <${LuFileText} size=${20} color="var(--accent)" />
             <div>
               <div style=${{ fontWeight: 600 }}>Set up API docs</div>
-              <div className="text-sm text-muted">Adds a /docs route (Swagger UI) and generates the OpenAPI spec from your ${info.endpointCount} endpoint${info.endpointCount === 1 ? "" : "s"}.</div>
+              <div className="text-sm text-muted">Generates a spec from your ${info.endpointCount} endpoint${info.endpointCount === 1 ? "" : "s"} and serves an interactive docs page at <span style=${{ fontFamily: "monospace" }}>/docs</span>.</div>
             </div>
           </div>
+          <div className="form-group">
+            <label className="form-label">Docs password</label>
+            <input className="form-input" type="password" value=${pw}
+              placeholder="Protect /docs (min 6 chars) — leave blank for public docs"
+              onInput=${(e) => setPw(e.target.value)}
+              onKeyDown=${(e) => { if (e.key === "Enter") setup(); }} />
+          </div>
           <button className="btn btn-primary" onClick=${setup} disabled=${busy}>
             ${busy ? html`<span className="spinner" />` : html`<${LuCheck} size=${16} />`}
             ${busy ? "Setting up..." : "Set up API docs"}
@@ -111,13 +121,11 @@ export function DocsPage() {
             <div className="card-title mb-1">Docs access</div>
             <div className="card-subtitle mb-4">
               By default <span style=${{ fontFamily: "monospace" }}>/docs</span> is public — anyone who can reach the app can read it.
-              Set a password to require HTTP Basic Auth (applies immediately, no restart).
+              Set a password to require a login before the docs are shown.
             </div>
             ${info.passwordProtected
               ? html`<div className="flex items-center gap-3" style=${{ flexWrap: "wrap" }}>
                   <span className="badge badge-success">🔒 Password protected</span>
-                  <button className="btn btn-sm btn-ghost" onClick=${removePassword} disabled=${pwBusy}
-                    style=${{ color: "var(--danger, #ef4444)" }}>Remove password</button>
                   <div style=${{ display: "flex", gap: "8px", marginLeft: "auto", flexWrap: "wrap" }}>
                     <input className="form-input" type="password" placeholder="New password" value=${pw}
                       onInput=${(e) => setPw(e.target.value)} style=${{ width: "200px" }} />

package/skeleton/.4bnode/assets/js/pages/RoutesPage.js

@@ -614,6 +614,7 @@ function CreateRoutePanel({ onCreated }) {
   const [registerFields, setRegisterFields] = useState([]);
   const [selectedFields, setSelectedFields] = useState([]);
   const [customFields, setCustomFields] = useState([]);
+  const [authRequired, setAuthRequired] = useState(false);
   const [newFieldName, setNewFieldName] = useState("");
   const [newFieldType, setNewFieldType] = useState("String");
   const [loading, setLoading] = useState(false);
@@ -732,6 +733,7 @@ function CreateRoutePanel({ onCreated }) {
             (routeType === "methods" || routeType === "crud") && customFields.length > 0
               ? customFields
               : undefined,
+          authRequired: !isAuthType ? authRequired : undefined,
         },
       });
       toast(result.message, "success");
@@ -1176,6 +1178,16 @@ function CreateRoutePanel({ onCreated }) {
           </button>
         </div>
       </div>`}
+      ${routeType && !isAuthType &&
+      html`<div className="form-group" style=${{ marginTop: "4px" }}>
+        <label style=${{ display: "flex", alignItems: "center", gap: "8px", fontSize: "13px", cursor: "pointer" }}>
+          <input type="checkbox" checked=${authRequired} onChange=${(e) => setAuthRequired(e.target.checked)} />
+          <span>Require authentication (JWT)</span>
+        </label>
+        <div className="text-sm text-muted" style=${{ marginTop: "4px", marginLeft: "24px" }}>
+          Protects every endpoint with the <span style=${{ fontFamily: "monospace" }}>auth</span> middleware — callers must send a valid Bearer token in the Authorization header.
+        </div>
+      </div>`}
       ${routeType === "login" &&
       modelName &&
       modelFields.length > 0 &&

package/skeleton/.4bnode/codegen.js

@@ -274,44 +274,26 @@ export default roles;
 `;
 }
 
-// src/middleware/apiKey.js — static API key auth via x-api-key header.
-export function buildApiKeyFile() {
-  return `// API key authentication. Named keys are managed by the 4bnode dashboard and
-// stored in src/api-keys.json. Send a key in the \`x-api-key\` request header:
-//   import apiKey from './src/middleware/apiKey.js';
-//   app.use('/api/private', apiKey);
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const KEYS_FILE = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'api-keys.json');
-let _cache = { mtimeMs: -1, keys: [] };
-
-// Read the keys file fresh when it changes (mtime-cached), so keys generated or
-// revoked in the dashboard take effect immediately — no restart needed.
-function loadKeys() {
-  try {
-    const { mtimeMs } = fs.statSync(KEYS_FILE);
-    if (mtimeMs !== _cache.mtimeMs) {
-      const list = JSON.parse(fs.readFileSync(KEYS_FILE, 'utf8'));
-      _cache = { mtimeMs, keys: (Array.isArray(list) ? list : []).map((k) => k && k.key).filter(Boolean) };
-    }
-  } catch {
-    _cache = { mtimeMs: -1, keys: [] };
+// src/middleware/auth.js — JWT verification. Reads a Bearer token, verifies it
+// with JWT_SECRET, and sets req.user. Use as middleware: router.get('/', auth, h).
+export function buildAuthMiddleware() {
+  return `import jwt from 'jsonwebtoken';
+
+const auth = (req, res, next) => {
+  const token = req.header('Authorization')?.replace('Bearer ', '');
+  if (!token) {
+    return res.status(401).json({ message: 'No token, authorization denied' });
   }
-  return _cache.keys;
-}
-
-const apiKey = (req, res, next) => {
-  const provided = req.header('x-api-key');
-  const valid = loadKeys();
-  if (!provided || !valid.includes(provided)) {
-    return res.status(401).json({ message: 'Invalid or missing API key' });
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    req.user = decoded;
+    next();
+  } catch (err) {
+    res.status(401).json({ message: 'Token is not valid' });
   }
-  next();
 };
 
-export default apiKey;
+export default auth;
 `;
 }
 
@@ -406,6 +388,22 @@ export function wireValidateIntoRouteContent(content, modelBase) {
   return out;
 }
 
+// Protect a whole route file with JWT: insert `auth` as the FIRST middleware on
+// every endpoint (so it runs before validation), and add the import. Idempotent.
+export function wireAuthIntoRouteContent(content) {
+  // (router.<method>('/path', )(existing middleware)(handler arrow)
+  const handlerRe =
+    /(router\.(?:get|post|put|patch|delete)\(\s*['"`][^'"`]*['"`]\s*,\s*)([\s\S]*?)((?:async\s*)?\(\s*req\s*,\s*res\s*(?:,\s*next\s*)?\)\s*=>)/g;
+  let changed = false;
+  const replaced = content.replace(handlerRe, (full, pathPart, middleware, handler) => {
+    if (/\bauth\s*,/.test(middleware)) return full; // already protected
+    changed = true;
+    return `${pathPart}auth, ${middleware}${handler}`;
+  });
+  if (!changed) return content;
+  return addImportToContent(replaced, "import auth from '../middleware/auth.js';");
+}
+
 // Anchor comment that marks the central error handler in index.js. Route
 // registration looks for this so new routes are always inserted ABOVE it.
 export const ERROR_HANDLER_MARKER = "// ── Error handling (must be last) ──";
@@ -421,7 +419,28 @@ export function securityWiring(features) {
 
   if (has("helmet")) {
     imports.push("import helmet from 'helmet';");
-    beforeRoutesParts.push("// ── Security headers ──\napp.use(helmet());");
+    beforeRoutesParts.push(
+      `// ── Security headers ──
+// helmet() defaults to a strict Content-Security-Policy (script-src 'self',
+// etc.) that blocks CDN-loaded scripts, inline <script> blocks, and cross-origin
+// assets. We widen the policy so a typical frontend/docs page works while keeping
+// the rest of helmet's protections. Tighten these directives for production.
+app.use(helmet({
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      scriptSrc: ["'self'", 'https:', "'unsafe-inline'"],
+      styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
+      imgSrc: ["'self'", 'data:', 'https:'],
+      connectSrc: ["'self'"],
+    },
+  },
+  crossOriginEmbedderPolicy: false,
+  // Allow other origins (e.g. a separate frontend host) to load assets served
+  // by this app. Default is 'same-origin'. Tighten to 'same-site' for production.
+  crossOriginResourcePolicy: { policy: 'cross-origin' },
+}));`
+    );
   }
   if (has("rateLimit")) {
     imports.push("import rateLimit from 'express-rate-limit';");
@@ -960,7 +979,6 @@ export function buildDocsHtml(specUrl = "openapi.json") {
       html+='<div class="row"><span class="resp-code">'+esc(code)+'</span><span class="detail-sum" style="margin:0">'+esc((resp[code]||{}).description||'')+'</span></div>';
     });
     html+='<div class="sec">Try it</div>';
-    html+='<div class="try-field"><label class="try-label">x-api-key</label><input class="f" id="'+id+'_apikey" placeholder="API key (saved for this browser)" /></div>';
     pp.forEach(function(p){html+='<div class="try-field"><label class="try-label">'+esc(p.name)+' (path)</label><input class="f" data-kind="path" data-name="'+esc(p.name)+'" /></div>';});
     qp.forEach(function(p){html+='<div class="try-field"><label class="try-label">'+esc(p.name)+' (query)</label><input class="f" data-kind="query" data-name="'+esc(p.name)+'" /></div>';});
     if(e.op.security){html+='<div class="try-field"><label class="try-label">Authorization (Bearer token)</label><input class="f" id="'+id+'_auth" placeholder="token" /></div>';}
@@ -973,8 +991,6 @@ export function buildDocsHtml(specUrl = "openapi.json") {
 
   function wireTry(e,id,root){
     var btn=root.querySelector('#'+id+'_send');if(!btn)return;
-    var keyEl=root.querySelector('#'+id+'_apikey');
-    if(keyEl){ try{ keyEl.value=localStorage.getItem('docs_api_key')||''; }catch(err){} }
     // Auto-grow the body textarea to fit its content (capped, then scrolls).
     var bodyTa=root.querySelector('#'+id+'_body');
     if(bodyTa){
@@ -989,7 +1005,6 @@ export function buildDocsHtml(specUrl = "openapi.json") {
       root.querySelectorAll('[data-kind=query]').forEach(function(inp){if(inp.value)qs.push(encodeURIComponent(inp.getAttribute('data-name'))+'='+encodeURIComponent(inp.value));});
       if(qs.length)url+=(url.indexOf('?')>=0?'&':'?')+qs.join('&');
       var opts={method:e.method.toUpperCase(),headers:{}};
-      if(keyEl&&keyEl.value){ opts.headers['x-api-key']=keyEl.value; try{ localStorage.setItem('docs_api_key',keyEl.value); }catch(err){} }
       var auth=root.querySelector('#'+id+'_auth');if(auth&&auth.value)opts.headers['Authorization']='Bearer '+auth.value;
       var bodyEl=root.querySelector('#'+id+'_body');
       if(bodyEl&&['post','put','patch'].indexOf(e.method)>=0){opts.headers['Content-Type']='application/json';opts.body=bodyEl.value;}
@@ -1023,7 +1038,11 @@ export function buildDocsHtml(specUrl = "openapi.json") {
     document.getElementById('apiVersion').textContent='v'+((spec.info&&spec.info.version)||'1.0.0');
     ITEMS=collect(spec);
     var nav=document.getElementById('nav');nav.innerHTML='';
-    if(!ITEMS.length){nav.innerHTML='<div class="group-title">No endpoints</div>';return;}
+    if(!ITEMS.length){
+      nav.innerHTML='<div class="group-title">No endpoints</div>';
+      document.getElementById('main').innerHTML='<div class="main-empty">No endpoints in the spec yet. Add routes, then regenerate the docs from the dashboard (API Docs).</div>';
+      return;
+    }
     var groups={};ITEMS.forEach(function(e){var k=groupKey(e.path);(groups[k]=groups[k]||[]).push(e);});
     var first=null;
     Object.keys(groups).sort().forEach(function(k){
@@ -1046,9 +1065,20 @@ export function buildDocsHtml(specUrl = "openapi.json") {
     document.querySelectorAll('.nav-item').forEach(function(c){c.style.display=c.getAttribute('data-search').indexOf(q)>=0?'':'none';});
   });
 
-  fetch(SPEC_URL).then(function(r){return r.json();}).then(render).catch(function(){
-    document.getElementById('main').innerHTML='<div class="main-empty">Could not load the API spec.</div>';
-  });
+  // The server inlines the spec below (so a protected page needs no second
+  // authenticated request — avoids cross-browser cookie quirks on fetch). If it
+  // isn't inlined (e.g. the page is served statically), fall back to fetching.
+  var SPEC_DATA=/*__SPEC__*/null;
+  if(SPEC_DATA&&typeof SPEC_DATA==='object'){
+    render(SPEC_DATA);
+  } else {
+    fetch(SPEC_URL,{credentials:'same-origin'}).then(function(r){
+      if(!r.ok){throw new Error('the server returned HTTP '+r.status+'. Regenerate the docs from the dashboard (API Docs).');}
+      return r.json();
+    }).then(render).catch(function(err){
+      document.getElementById('main').innerHTML='<div class="main-empty">Could not load the API spec &mdash; '+esc(String((err&&err.message)||err))+'</div>';
+    });
+  }
 })();
 </script>
 </body>
@@ -1145,12 +1175,29 @@ router.use((req, res, next) => {
 // Interactive API documentation. The page is fully self-contained (no external
 // CDN); the spec is generated by 4bnode and served from this app.
 router.get('/openapi.json', (req, res) => {
+  res.set('Cache-Control', 'no-store');
   if (!fs.existsSync(SPEC)) return res.status(404).json({ error: 'API spec not generated yet.' });
   res.sendFile(SPEC);
 });
 
+const DOCS_PAGE = ${JSON.stringify(buildDocsHtml("/docs/openapi.json"))};
+
 router.get('/', (req, res) => {
-  res.type('html').send(${JSON.stringify(buildDocsHtml("/docs/openapi.json"))});
+  // Inline the spec into the page so a password-protected page doesn't need a
+  // second authenticated request (some browsers won't attach the docs cookie to
+  // the fetch). Falls back to fetching /openapi.json if no spec is inlined.
+  let spec = 'null';
+  try {
+    if (fs.existsSync(SPEC)) {
+      const raw = fs.readFileSync(SPEC, 'utf8').trim();
+      // Escape '<' so a spec value containing '</script>' can't break out of the
+      // inline <script>. The '\\u003c' sequence still evaluates to '<' in JS.
+      if (raw) spec = raw.split('<').join(String.fromCharCode(92) + 'u003c');
+    }
+  } catch {}
+  // Never cache the docs page — keeps it from going stale after a regenerate.
+  res.set('Cache-Control', 'no-store');
+  res.type('html').send(DOCS_PAGE.replace('/*__SPEC__*/null', () => spec));
 });
 
 export default router;