vite-plugin-auth 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { Plugin } from 'vite';
+
+interface AppearanceOptions {
+    title?: string;
+    descriptionHtml?: string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+}
+interface AuthGateOptions {
+    users?: Array<{
+        username: string;
+        password: string;
+    }>;
+    username?: string;
+    password?: string;
+    sessionDuration?: number;
+    cookieName?: string;
+    loginPath?: string;
+    allowedIPs?: string[];
+    title?: string;
+    description?: string;
+    appearance?: AppearanceOptions;
+    sessionFile?: string;
+}
+interface ResolvedAppearance {
+    title: string;
+    descriptionHtml: string;
+    backgroundColor: string;
+    backgroundImage: string;
+}
+
+declare const auth: (raw?: AuthGateOptions) => Plugin;
+
+export { type AppearanceOptions, type AuthGateOptions, type ResolvedAppearance, auth, auth as default };

package/dist/index.js

@@ -0,0 +1,288 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/session.ts
+import { readFileSync, writeFileSync, renameSync, existsSync, mkdirSync } from "fs";
+import { dirname } from "path";
+
+// src/crypto.ts
+import crypto from "crypto";
+var generateToken = () => crypto.randomBytes(48).toString("hex");
+var safeEqual = (a, b) => {
+  try {
+    return crypto.timingSafeEqual(Buffer.from(a), Buffer.from(b));
+  } catch {
+    return false;
+  }
+};
+
+// src/session.ts
+var CLEANUP_INTERVAL = 5 * 60 * 1e3;
+var _sessions, _timer, _filePath, _SessionStore_instances, load_fn, save_fn, cleanup_fn;
+var SessionStore = class {
+  constructor(filePath) {
+    __privateAdd(this, _SessionStore_instances);
+    __privateAdd(this, _sessions, /* @__PURE__ */ new Map());
+    __privateAdd(this, _timer);
+    __privateAdd(this, _filePath);
+    __privateSet(this, _filePath, filePath);
+    if (__privateGet(this, _filePath)) __privateMethod(this, _SessionStore_instances, load_fn).call(this);
+  }
+  create(username, ttlMs) {
+    const token = generateToken();
+    const now = Date.now();
+    __privateGet(this, _sessions).set(token, { username, createdAt: now, expiresAt: now + ttlMs });
+    __privateMethod(this, _SessionStore_instances, save_fn).call(this);
+    return token;
+  }
+  get(token) {
+    const s = __privateGet(this, _sessions).get(token);
+    if (!s) return null;
+    if (s.expiresAt <= Date.now()) {
+      __privateGet(this, _sessions).delete(token);
+      __privateMethod(this, _SessionStore_instances, save_fn).call(this);
+      return null;
+    }
+    return s;
+  }
+  startCleanup() {
+    __privateSet(this, _timer, setInterval(() => __privateMethod(this, _SessionStore_instances, cleanup_fn).call(this), CLEANUP_INTERVAL));
+    if (__privateGet(this, _timer)?.unref) __privateGet(this, _timer).unref();
+  }
+  destroy() {
+    clearInterval(__privateGet(this, _timer));
+    __privateGet(this, _sessions).clear();
+  }
+};
+_sessions = new WeakMap();
+_timer = new WeakMap();
+_filePath = new WeakMap();
+_SessionStore_instances = new WeakSet();
+load_fn = function() {
+  try {
+    if (!existsSync(__privateGet(this, _filePath))) return;
+    const raw = readFileSync(__privateGet(this, _filePath), "utf-8");
+    const data = JSON.parse(raw);
+    const now = Date.now();
+    for (const [token, s] of Object.entries(data)) {
+      const session = s;
+      if (session.expiresAt > now) __privateGet(this, _sessions).set(token, session);
+    }
+  } catch {
+  }
+};
+save_fn = function() {
+  if (!__privateGet(this, _filePath)) return;
+  const data = {};
+  for (const [token, s] of __privateGet(this, _sessions)) data[token] = s;
+  const dir = dirname(__privateGet(this, _filePath));
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+  const tmp = __privateGet(this, _filePath) + ".tmp";
+  writeFileSync(tmp, JSON.stringify(data, null, 2), "utf-8");
+  renameSync(tmp, __privateGet(this, _filePath));
+};
+cleanup_fn = function() {
+  const now = Date.now();
+  let changed = false;
+  for (const [token, s] of __privateGet(this, _sessions)) {
+    if (s.expiresAt <= now) {
+      __privateGet(this, _sessions).delete(token);
+      changed = true;
+    }
+  }
+  if (changed) __privateMethod(this, _SessionStore_instances, save_fn).call(this);
+};
+
+// src/utils.ts
+import { isIP } from "net";
+var parseCookies = (header) => {
+  const map = {};
+  if (!header) return map;
+  for (const pair of header.split(";")) {
+    const idx = pair.indexOf("=");
+    if (idx === -1) continue;
+    map[pair.slice(0, idx).trim()] = pair.slice(idx + 1).trim();
+  }
+  return map;
+};
+var collectBody = (req) => new Promise((resolve2, reject) => {
+  const chunks = [];
+  req.on("data", (c) => chunks.push(c));
+  req.on("end", () => resolve2(Buffer.concat(chunks).toString("utf-8")));
+  req.on("error", reject);
+});
+var getClientIP = (req) => {
+  const forwarded = req.headers["x-forwarded-for"];
+  if (typeof forwarded === "string") {
+    const first = forwarded.split(",")[0].trim();
+    if (isIP(first)) return first;
+  }
+  const raw = req.socket.remoteAddress ?? "";
+  return raw === "::1" || raw === "::ffff:127.0.0.1" ? "127.0.0.1" : raw;
+};
+var matchCIDR = (ip, cidr) => {
+  if (!cidr.includes("/")) return ip === cidr;
+  const [range, bitsStr] = cidr.split("/");
+  const bits = parseInt(bitsStr, 10);
+  if (isNaN(bits) || bits < 0 || bits > 32) return false;
+  const ipNum = ip.split(".").reduce((acc, oct) => (acc << 8) + parseInt(oct, 10), 0);
+  const rangeNum = range.split(".").reduce((acc, oct) => (acc << 8) + parseInt(oct, 10), 0);
+  const mask = ~(2 ** (32 - bits) - 1);
+  return (ipNum & mask) === (rangeNum & mask);
+};
+var buildCookie = (cookieName, token, secure) => {
+  const parts = [
+    `${cookieName}=${token}`,
+    "HttpOnly",
+    "SameSite=Lax",
+    "Path=/"
+  ];
+  if (secure) parts.push("Secure");
+  return parts.join("; ");
+};
+
+// src/auth-login.html
+var auth_login_default = '<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width,initial-scale=1" />\n    <title>Restricted Access</title>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        font-family:\n          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        min-height: 100vh;\n      }\n      .card {\n        background: #fff;\n        padding: 2rem;\n        border-radius: 8px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        width: 100%;\n        max-width: 360px;\n      }\n      h1 {\n        font-size: 1.25rem;\n        margin-bottom: 1.5rem;\n        text-align: center;\n        color: #333;\n      }\n      label {\n        display: block;\n        margin-bottom: 0.25rem;\n        font-size: 0.875rem;\n        color: #555;\n      }\n      .field {\n        margin-bottom: 1rem;\n      }\n      .input-wrap {\n        display: flex;\n        align-items: center;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: #fff;\n      }\n      .input-wrap input {\n        flex: 1;\n        padding: 0.5rem;\n        border: none;\n        outline: none;\n        font-size: 0.875rem;\n        background: transparent;\n      }\n      .input-wrap button {\n        background: transparent;\n        border: none;\n        padding: 0 0.6rem;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        color: #999;\n        font-size: 1.1rem;\n        line-height: 1;\n      }\n      .input-wrap button:hover {\n        color: #333;\n      }\n      .input-wrap:focus-within {\n        border-color: #1877f2;\n        box-shadow: 0 0 0 1px #1877f2;\n      }\n      button[type="submit"] {\n        width: 100%;\n        padding: 0.5rem;\n        background: #1877f2;\n        color: #fff;\n        border: none;\n        border-radius: 4px;\n        font-size: 0.875rem;\n        cursor: pointer;\n        margin-top: 0.5rem;\n      }\n      button[type="submit"]:hover {\n        background: #166fe5;\n      }\n      .error {\n        color: #d32f2f;\n        font-size: 0.8rem;\n        margin-bottom: 0.75rem;\n        text-align: center;\n      }\n      .logo {\n        text-align: center;\n        margin-bottom: 0.5rem;\n        color: #1877f2;\n      }\n      .logo svg {\n        width: 48px;\n        height: 48px;\n      }\n      .sub {\n        text-align: center;\n        color: #888;\n        font-size: 0.8rem;\n        margin-bottom: 1.25rem;\n      }\n    </style>\n  </head>\n  <body style="background: {BG_COLOR};{BG_IMAGE}">\n    <div class="card">\n      <div class="logo">\n        <svg\n          viewBox="0 0 24 24"\n          width="48"\n          height="48"\n          fill="none"\n          stroke="currentColor"\n          stroke-width="1.5"\n          stroke-linecap="round"\n          stroke-linejoin="round"\n        >\n          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />\n          <path d="m9 12 2 2 4-4" />\n        </svg>\n      </div>\n      <h1>{TITLE}</h1>\n      <form id="auth-form">\n        <div class="field">\n          <label for="u">Username</label>\n          <div class="input-wrap">\n            <input\n              type="text"\n              id="u"\n              name="username"\n              required\n              autocomplete="username"\n            />\n          </div>\n        </div>\n        <div class="field">\n          <label for="p">Password</label>\n          <div class="input-wrap">\n            <input\n              type="password"\n              id="p"\n              name="password"\n              required\n              autocomplete="current-password"\n            />\n            <button\n              type="button"\n              id="toggle-pw"\n              tabindex="-1"\n              aria-label="Show password"\n            >\n              <svg\n                viewBox="0 0 24 24"\n                width="20"\n                height="20"\n                fill="none"\n                stroke="currentColor"\n                stroke-width="2"\n                stroke-linecap="round"\n                stroke-linejoin="round"\n              >\n                <path\n                  d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"\n                />\n                <line x1="1" y1="1" x2="23" y2="23" /></svg\n              ><svg\n                viewBox="0 0 24 24"\n                width="20"\n                height="20"\n                fill="none"\n                stroke="currentColor"\n                stroke-width="2"\n                stroke-linecap="round"\n                stroke-linejoin="round"\n                style="display: none"\n              >\n                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />\n                <circle cx="12" cy="12" r="3" />\n              </svg>\n            </button>\n          </div>\n        </div>\n        <button type="submit">Sign in</button>\n      </form>\n      {ERROR_HTML}\n      <br/>\n      <div class="sub">\n        {DESCRIPTION}\n      </div>\n    </div>\n    <script>\n      (function () {\n        var form = document.getElementById("auth-form");\n        var pw = document.getElementById("p");\n        var toggle = document.getElementById("toggle-pw");\n        toggle.addEventListener("click", function () {\n          var show = pw.type === "password";\n          pw.type = show ? "text" : "password";\n          toggle.querySelector("svg:first-child").style.display = show\n            ? "none"\n            : "";\n          toggle.querySelector("svg:last-child").style.display = show\n            ? ""\n            : "none";\n          toggle.setAttribute(\n            "aria-label",\n            show ? "Hide password" : "Show password",\n          );\n        });\n        form.addEventListener("submit", function (e) {\n          e.preventDefault();\n          var fd = new FormData(form);\n          var params = new URLSearchParams();\n          for (var p of fd) params.append(p[0], p[1]);\n          fetch("{LOGIN_PATH}", { method: "POST", body: params }).then(\n            function (r) {\n              if (r.ok) window.location.href = "/";\n              else\n                r.text().then(function (html) {\n                  document.open();\n                  document.write(html);\n                  document.close();\n                });\n            },\n          );\n        });\n      })();\n    </script>\n  </body>\n</html>\n';
+
+// src/login-page.ts
+var renderLoginPage = (loginPath, opts) => {
+  const errorHtml = opts?.error ? `<p class="error">${escapeHtml(opts.error)}</p>` : "";
+  const bgImage = opts?.backgroundImage ? `background-image: url('${escapeHtml(opts.backgroundImage)}'); background-size: cover; background-position: center; background-repeat: no-repeat;` : "";
+  return auth_login_default.replace("{LOGIN_PATH}", loginPath).replace("{ERROR_HTML}", errorHtml).replace("{TITLE}", escapeHtml(opts?.title ?? "vite-plugin-auth")).replace("{DESCRIPTION}", opts?.descriptionHtml ?? "").replace("{BG_COLOR}", opts?.backgroundColor ?? "#f0f2f5").replace("{BG_IMAGE}", bgImage);
+};
+var escapeHtml = (str) => str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+// src/middleware.ts
+var createAuthMiddleware = (ctx) => async (req, res, next) => {
+  try {
+    await handleRequest(req, res, next, ctx);
+  } catch (err) {
+    console.error("[vite-auth-gate]", err);
+    if (!res.writableEnded) {
+      res.statusCode = 500;
+      res.end("Internal Server Error");
+    }
+  }
+};
+var sendLoginPage = (res, loginPath, ctx) => {
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "text/html; charset=utf-8");
+  res.end(renderLoginPage(loginPath, ctx.appearance));
+};
+var handleLogin = async (req, res, ctx) => {
+  const body = await collectBody(req);
+  const params = new URLSearchParams(body);
+  const username = params.get("username") ?? "";
+  const password = params.get("password") ?? "";
+  const user = ctx.users.find((u) => u.username === username);
+  const valid = user && safeEqual(user.password, password);
+  if (!valid) {
+    res.statusCode = 401;
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    res.end(renderLoginPage(ctx.loginPath, { ...ctx.appearance, error: "Invalid username or password" }));
+    return;
+  }
+  const token = ctx.sessions.create(username, ctx.sessionTtl);
+  res.statusCode = 302;
+  res.setHeader("Location", "/");
+  res.setHeader("Set-Cookie", buildCookie(ctx.cookieName, token, ctx.secure));
+  res.end();
+};
+var handleRequest = async (req, res, next, ctx) => {
+  if (ctx.allowedIPs.length) {
+    const clientIP = getClientIP(req);
+    const allowed = ctx.allowedIPs.some((entry) => matchCIDR(clientIP, entry));
+    if (allowed) return next();
+  }
+  if (req.method === "POST" && req.url === ctx.loginPath) {
+    return handleLogin(req, res, ctx);
+  }
+  if (req.url === ctx.loginPath) {
+    return sendLoginPage(res, ctx.loginPath, ctx);
+  }
+  const token = parseCookies(req.headers.cookie)[ctx.cookieName];
+  if (token && ctx.sessions.get(token)) {
+    return next();
+  }
+  sendLoginPage(res, ctx.loginPath, ctx);
+};
+
+// src/config.ts
+import { readFileSync as readFileSync2 } from "fs";
+import { extname, resolve } from "path";
+var MIME_TYPES = {
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+  ".bmp": "image/bmp",
+  ".ico": "image/x-icon"
+};
+var resolveBgImage = (image) => {
+  if (image.startsWith("data:") || image.startsWith("http://") || image.startsWith("https://")) {
+    return image;
+  }
+  const filePath = resolve(process.cwd(), image);
+  const ext = extname(filePath).toLowerCase();
+  const mime = MIME_TYPES[ext] || "image/png";
+  const data = readFileSync2(filePath);
+  return `data:${mime};base64,${data.toString("base64")}`;
+};
+var ensureOpts = (raw = {}) => {
+  const users = raw.users?.length ? raw.users : raw.username ? [{ username: raw.username, password: raw.password ?? "" }] : [];
+  const a = raw.appearance ?? {};
+  return {
+    users,
+    sessionTtl: (raw.sessionDuration || 3600) * 1e3,
+    cookieName: raw.cookieName || "vite_plugin_auth",
+    loginPath: raw.loginPath || "/__vite_plugin_auth/login",
+    allowedIPs: raw.allowedIPs ?? [],
+    sessionFile: raw.sessionFile || resolve(process.cwd(), ".vite-plugin-auth/sessions.json"),
+    appearance: {
+      title: a.title ?? raw.title ?? "vite-plugin-auth",
+      descriptionHtml: a.descriptionHtml ?? raw.description ?? "Password-based access control for your Vite dev server. Ideal for staging, preview deployments, and internal tools that need quick protection without a full authentication system.",
+      backgroundColor: a.backgroundColor ?? "#f0f2f5",
+      backgroundImage: a.backgroundImage ? resolveBgImage(a.backgroundImage) : ""
+    }
+  };
+};
+
+// src/index.ts
+var auth = (raw = {}) => {
+  const cfg = ensureOpts(raw);
+  const sessions = new SessionStore(cfg.sessionFile);
+  sessions.startCleanup();
+  return {
+    name: "vite-auth-gate",
+    configureServer(server) {
+      const secure = !!server.config.server?.https;
+      const middleware = createAuthMiddleware({
+        sessions,
+        users: cfg.users,
+        sessionTtl: cfg.sessionTtl,
+        cookieName: cfg.cookieName,
+        loginPath: cfg.loginPath,
+        secure,
+        allowedIPs: cfg.allowedIPs,
+        appearance: cfg.appearance
+      });
+      server.middlewares.use(middleware);
+    },
+    closeBundle() {
+      sessions.destroy();
+    }
+  };
+};
+var index_default = auth;
+export {
+  auth,
+  index_default as default
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "vite-plugin-auth",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Password-based authentication plugin for Vite. Protects dev servers, preview deployments, and internal tools with a login form, session persistence, and IP allowlisting.",
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "auth",
+    "authentication",
+    "login",
+    "password",
+    "basic-auth",
+    "access-control",
+    "dev-server",
+    "security"
+  ],
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "license": "MIT",
+  "author": "Willyams Yujra <yracnet@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yracnet/vite-plugin-auth"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "homepage": "https://github.com/yracnet/vite-plugin-auth",
+  "bugs": "https://github.com/yracnet/vite-plugin-auth/issues",
+  "scripts": {
+    "build": "tsup",
+    "tar": "yarn pack",
+    "prepublish": "yarn build",
+    "prepack": "yarn build"
+  },
+  "dependencies": {
+  },
+  "peerDependencies": {
+    "vite": "^2 || ^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.1",
+    "globals": "^16.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0"
+  }
+}