create-volt 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to `create-volt` are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/), and this project adheres to
 [Semantic Versioning](https://semver.org/).
 
+## [0.10.0] - 2026-06-28
+
+### Added
+- Frontend UI for the user-facing add-ons, auto-mounted when enabled:
+  - **auth** → a magic-link sign-in panel (email → link → signed-in state)
+  - **realtime** → a live chat panel (rooms, presence, typing, messages)
+  Each add-on serves its own `/<name>-ui.js` (only when enabled); `public/app.js`
+  mounts them alongside the demo. The server exposes `GET /__volt/addons`.
+
+### Security
+- Security headers on every response: `X-Content-Type-Options: nosniff`,
+  `X-Frame-Options: SAMEORIGIN`, `Referrer-Policy: same-origin`, `X-Powered-By` off.
+- Hardened forms: typed / length-capped / autocompleted inputs; all user content
+  renders through Volt holes (text nodes — HTML-escaped, no innerHTML); server
+  validation + caps (email ≤ 320, chat ≤ 500); `.env` values stripped of newlines;
+  session cookies `HttpOnly` + `SameSite=Lax`.
+
 ## [0.9.0] - 2026-06-28
 
 ### Changed
@@ -129,6 +146,7 @@ All notable changes to `create-volt` are documented here. The format follows
   watching and full-page hot reload. Supports `--skip-install` and `--force`,
   and auto-detects npm / pnpm / yarn / bun for the install step.
 
+[0.10.0]: https://github.com/MIR-2025/volt/releases/tag/v0.10.0
 [0.9.0]: https://github.com/MIR-2025/volt/releases/tag/v0.9.0
 [0.8.0]: https://github.com/MIR-2025/volt/releases/tag/v0.8.0
 [0.7.0]: https://github.com/MIR-2025/volt/releases/tag/v0.7.0

package/addons/auth/files/lib/auth.js

@@ -72,7 +72,7 @@ export function authRouter({ store, mailer }) {
 
   router.post("/api/login", async (req, res) => {
     const email = normalize(req.body?.email);
-    if (!validEmail(email)) return res.status(400).json({ ok: false, error: "Enter a valid email." });
+    if (!validEmail(email) || email.length > 320) return res.status(400).json({ ok: false, error: "Enter a valid email." });
     const tok = token();
     await tokens.put(tok, { email, ua: req.headers["user-agent"] || "", expiresAt: Date.now() + TOKEN_TTL, used: false });
     const link = `${req.protocol}://${req.get("host")}/verify?token=${tok}`;

package/addons/auth/files/public/auth-ui.js

@@ -0,0 +1,62 @@
+// auth-ui.js — magic-link sign-in panel (frontend for the auth add-on).
+// Served at /auth-ui.js when auth is enabled; mounted by public/app.js.
+// All dynamic text is rendered through Volt holes, which create text nodes
+// (HTML-escaped) — so emails/notices can't inject markup.
+import { signal, html } from "/volt.js";
+
+const api = async (url, body) => {
+  const res = await fetch(url, {
+    method: body ? "POST" : "GET",
+    headers: body ? { "Content-Type": "application/json" } : undefined,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  return res.json().catch(() => ({}));
+};
+
+// local part only, for a friendlier "signed in as" (still escaped on render)
+const shortName = (email) => String(email || "").split("@")[0];
+
+export function authPanel() {
+  const me = signal(null);
+  const email = signal("");
+  const notice = signal("");
+  const busy = signal(false);
+
+  api("/api/me").then((r) => me(r.email || null));
+
+  async function sendLink(e) {
+    e?.preventDefault?.();
+    const addr = email().trim();
+    if (!addr || busy()) return;
+    busy(true);
+    notice("Sending…");
+    const r = await api("/api/login", { email: addr });
+    busy(false);
+    notice(r.ok ? (r.dev ? "Magic link printed to the server console — open it to sign in." : `Magic link sent to ${addr}.`) : r.error || "Could not send link.");
+  }
+  async function logout() {
+    await api("/api/logout", {});
+    me(null);
+    notice("");
+  }
+
+  const signedOut = () =>
+    html`<form class="d-flex gap-2" onsubmit=${sendLink} autocomplete="on">
+      <input class="form-control" type="email" name="email" placeholder="you@example.com"
+             maxlength="320" autocomplete="email" inputmode="email" required
+             value=${email} oninput=${(e) => email(e.target.value)} />
+      <button class="btn btn-primary" type="submit" disabled=${() => busy()}>Send magic link</button>
+    </form>`;
+
+  const signedIn = () =>
+    html`<div class="d-flex justify-content-between align-items-center">
+      <span class="text-muted small">Signed in as <span class="accent fw-semibold">${() => shortName(me())}</span></span>
+      <button class="btn btn-sm btn-outline-secondary" onclick=${logout}>Sign out</button>
+    </div>`;
+
+  return html`<div class="card-x p-4 mb-4">
+    <h2 class="h6 mb-3">Account <span class="text-muted small">— magic-link auth</span></h2>
+    ${() => (me() ? signedIn() : signedOut())}
+    ${() => (notice() ? html`<p class="small text-muted mb-0 mt-2">${notice}</p>` : null)}
+  </div>`;
+}

package/addons/realtime/files/public/chat-ui.js

@@ -0,0 +1,116 @@
+// chat-ui.js — live chat panel (frontend for the realtime add-on). Served at
+// /chat-ui.js when realtime is enabled; mounted by public/app.js.
+// Identity comes from the auth session (if auth is on), else "guest-…".
+// All message text and names render through Volt holes → text nodes (escaped),
+// so nothing a user types can inject markup.
+import { signal, computed, html } from "/volt.js";
+import { createChat } from "/chat-client.js";
+
+const ROOMS = ["general", "random"];
+const MAX = 500; // keep in sync with the server cap
+
+const fmtTime = (ts) => {
+  try {
+    return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return "";
+  }
+};
+
+export function chatPanel() {
+  const room = signal(ROOMS[0]);
+  const messages = signal([]);
+  const online = signal([]);
+  const typers = signal([]);
+  const draft = signal("");
+
+  const timers = new Map();
+  const sawTyping = (name) => {
+    clearTimeout(timers.get(name));
+    if (!typers().includes(name)) typers([...typers(), name]);
+    timers.set(
+      name,
+      setTimeout(() => {
+        typers(typers().filter((n) => n !== name));
+        timers.delete(name);
+      }, 2500),
+    );
+  };
+
+  let chat;
+  try {
+    chat = createChat({
+      onHistory: ({ room: r, messages: m }) => {
+        if (r === room()) messages(m);
+      },
+      onMessage: (m) => {
+        if (m.room === room()) messages([...messages(), m]);
+      },
+      onPresence: ({ room: r, users }) => {
+        if (r === room()) online(users);
+      },
+      onTyping: ({ name }) => sawTyping(name),
+    });
+    chat.join(room());
+  } catch {
+    /* socket.io client missing — panel still renders, just inert */
+  }
+
+  const switchRoom = (r) => {
+    if (r === room() || !chat) return;
+    room(r);
+    messages([]);
+    online([]);
+    typers([]);
+    chat.join(r);
+  };
+
+  let lastTyped = 0;
+  const onType = (e) => {
+    draft(e.target.value);
+    const now = Date.now();
+    if (chat && now - lastTyped > 800) {
+      chat.typing(room());
+      lastTyped = now;
+    }
+  };
+  const send = () => {
+    const body = draft().trim();
+    if (!body || !chat) return;
+    chat.send(room(), body.slice(0, MAX));
+    draft("");
+  };
+
+  const typingLine = computed(() => {
+    const t = typers().filter((n) => n);
+    if (!t.length) return "";
+    return t.length === 1 ? `${t[0]} is typing…` : `${t.length} people are typing…`;
+  });
+
+  const roomTab = (r) =>
+    html`<button class=${() => "btn btn-sm " + (room() === r ? "btn-primary" : "btn-outline-secondary")} onclick=${() => switchRoom(r)}>#${r}</button>`;
+
+  const messageRow = (m) =>
+    html`<div class="py-1 small">
+      <span class="accent fw-semibold">${m.name}</span>
+      <span class="text-muted ms-1">${fmtTime(m.createdAt)}</span>
+      <div>${m.body}</div>
+    </div>`;
+
+  return html`<div class="card-x p-4 mb-4">
+    <div class="d-flex justify-content-between align-items-center mb-2">
+      <h2 class="h6 mb-0">Chat <span class="text-muted small">— realtime</span></h2>
+      <div class="d-flex gap-1">${ROOMS.map(roomTab)}</div>
+    </div>
+    <div class="small text-muted mb-2">Online: ${() => online().join(", ") || "—"}</div>
+    <div style="max-height:220px;overflow:auto">
+      ${() => (messages().length ? messages().map(messageRow) : html`<span class="text-muted small">No messages yet.</span>`)}
+    </div>
+    <div style="height:1.2em">${() => (typingLine() ? html`<span class="text-muted small fst-italic">${typingLine}</span>` : null)}</div>
+    <div class="input-group mt-2">
+      <input class="form-control" placeholder=${() => "Message #" + room() + "…"} maxlength=${String(MAX)}
+             value=${draft} oninput=${onType} onkeydown=${(e) => e.key === "Enter" && send()} />
+      <button class="btn btn-primary" onclick=${send}>Send</button>
+    </div>
+  </div>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
   "type": "module",
   "bin": {

package/templates/default/public/app.js

@@ -63,4 +63,27 @@ function Todos() {
     </div>`;
 }
 
-mount("#app", Counter(), Todos());
+// Mount the demo, plus the UI for any enabled add-ons (auth, realtime, …).
+// Add-ons serve their own /…-ui.js when turned on in the setup wizard.
+const nodes = [Counter(), Todos()];
+let enabled = [];
+try {
+  enabled = await (await fetch("/__volt/addons")).json();
+} catch {
+  /* older app without the endpoint — just the demo */
+}
+if (enabled.includes("auth")) {
+  try {
+    nodes.unshift((await import("/auth-ui.js")).authPanel());
+  } catch {
+    /* auth UI unavailable */
+  }
+}
+if (enabled.includes("realtime")) {
+  try {
+    nodes.push((await import("/chat-ui.js")).chatPanel());
+  } catch {
+    /* realtime UI unavailable */
+  }
+}
+mount("#app", ...nodes);

package/templates/default/server.js

@@ -87,6 +87,13 @@ async function startApp() {
   const PORT = Number(process.env.PORT) || DEFAULT_PORT;
   const enabled = enabledFrom(process.env);
   const app = express();
+  app.disable("x-powered-by");
+  app.use((_req, res, next) => {
+    res.setHeader("X-Content-Type-Options", "nosniff");
+    res.setHeader("X-Frame-Options", "SAMEORIGIN");
+    res.setHeader("Referrer-Policy", "same-origin");
+    next();
+  });
   app.use(express.static(path.join(__dirname, "public")));
 
   let store = null;
@@ -95,6 +102,13 @@ async function startApp() {
   if (enabled.has("mailer")) mailer = await (await addonMod("mailer")).createMailer();
   if (enabled.has("auth") && store && mailer) app.use((await addonMod("auth")).authRouter({ store, mailer }));
 
+  // expose which add-ons are on, and serve each enabled add-on's frontend assets
+  app.get("/__volt/addons", (_req, res) => res.json([...enabled]));
+  for (const n of enabled) {
+    const pub = path.join(ADDONS_DIR, n, "files", "public");
+    if (fs.existsSync(pub)) app.use(express.static(pub));
+  }
+
   app.get("/", (_req, res) => res.sendFile(path.join(__dirname, "views", "index.html")));
 
   const server = http.createServer(app);

package/templates/default/setup/setup.js

@@ -35,22 +35,23 @@ function effective(s) {
   return order.filter((n) => want.has(n));
 }
 
+const clean = (v) => String(v).replace(/[\r\n]/g, "").trim(); // one value per line; no injection
 function genEnv(s) {
   const eff = effective(s);
-  const out = [`VOLT_ADDONS=${eff.join(",")}`, `PORT=${s.port}`];
+  const out = [`VOLT_ADDONS=${eff.join(",")}`, `PORT=${clean(s.port)}`];
   if (eff.includes("db")) {
-    out.push(`DB_DRIVER=${s.dbDriver}`);
+    out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
-      out.push(`MONGODB_URI=${s.mongoUri}`);
-      if (s.mongoDb) out.push(`MONGODB_DATABASE=${s.mongoDb}`);
+      out.push(`MONGODB_URI=${clean(s.mongoUri)}`);
+      if (s.mongoDb) out.push(`MONGODB_DATABASE=${clean(s.mongoDb)}`);
     } else if (s.dbDriver === "mysql" || s.dbDriver === "postgres") {
-      out.push(`DATABASE_URL=${s.dbUrl}`);
+      out.push(`DATABASE_URL=${clean(s.dbUrl)}`);
     }
   }
   if (eff.includes("mailer")) {
-    if (s.smtpUrl) out.push(`SMTP_URL=${s.smtpUrl}`);
+    if (s.smtpUrl) out.push(`SMTP_URL=${clean(s.smtpUrl)}`);
     else out.push("# SMTP_URL=        # unset → emails print to the console");
-    if (s.mailFrom) out.push(`MAIL_FROM=${s.mailFrom}`);
+    if (s.mailFrom) out.push(`MAIL_FROM=${clean(s.mailFrom)}`);
   }
   return out.join("\n") + "\n";
 }