create-authhero 0.17.0 → 0.18.0

package/dist/cloudflare-multitenant/README.md

@@ -4,6 +4,7 @@ A production-grade multi-tenant AuthHero authentication server using Cloudflare
 
 - Multi-tenant support with tenant isolation at the data level
 - Multiple tenants in a single D1 database
+- Static assets (widget, CSS, JS) served via Cloudflare Workers Assets
 - Easy setup similar to single-tenant
 
 ## Architecture
@@ -18,6 +19,11 @@ A production-grade multi-tenant AuthHero authentication server using Cloudflare
                     │  │   - Tenant isolation via API    │   │
                     │  └─────────────────────────────────┘   │
                     │              │                          │
+                    │  ┌───────────┴────────────────────┐     │
+                    │  │      Static Assets             │     │
+                    │  │  /u/widget/* /u/css/* /u/js/*  │     │
+                    │  └────────────────────────────────┘     │
+                    │              │                          │
                     └──────────────┼──────────────────────────┘
                                    │
                                    ▼
@@ -28,6 +34,25 @@ A production-grade multi-tenant AuthHero authentication server using Cloudflare
                           └─────────────┘
 ```
 
+## Static Assets
+
+The authentication widget, CSS, and client-side JavaScript are served as static assets via Cloudflare Workers Assets.
+
+### How It Works
+
+1. **Source**: Assets are bundled with the `authhero` package in `node_modules/authhero/dist/assets`
+2. **Build Step**: The `copy-assets.js` script copies these files to `./dist/assets` before dev/deploy
+3. **Serving**: Wrangler serves files from `./dist/assets` (configured in `wrangler.toml`)
+4. **Automatic**: The copy happens automatically when you run `npm run dev` or `npm run deploy`
+
+> **Note**: Wrangler's Assets feature does not support serving files directly from `node_modules`, which is why the copy step is necessary.
+
+Assets are served at:
+
+- `/u/widget/*` - AuthHero login widget (Stencil web component)
+- `/u/css/*` - Tailwind CSS for universal login pages
+- `/u/js/*` - Client-side JavaScript bundle
+
 ## Security & Privacy
 
 This project is designed to be **open-source friendly**. Sensitive Cloudflare IDs are kept out of version control:

package/dist/cloudflare-multitenant/copy-assets.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+/**
+ * Copy AuthHero assets to dist directory
+ *
+ * This script copies static assets from the authhero package to the dist directory
+ * so they can be served by Wrangler's Assets feature. Wrangler does not support
+ * serving files directly from node_modules.
+ */
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const sourceDir = path.join(
+  __dirname,
+  "node_modules",
+  "authhero",
+  "dist",
+  "assets",
+);
+const targetDir = path.join(__dirname, "dist", "assets");
+
+/**
+ * Recursively copy directory contents
+ */
+function copyDirectory(src, dest) {
+  // Create destination directory if it doesn't exist
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  // Read source directory
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDirectory(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+try {
+  console.log("📦 Copying AuthHero assets...");
+
+  if (!fs.existsSync(sourceDir)) {
+    console.error(`❌ Source directory not found: ${sourceDir}`);
+    console.error("Make sure the authhero package is installed.");
+    process.exit(1);
+  }
+
+  copyDirectory(sourceDir, targetDir);
+
+  console.log(`✅ Assets copied to ${targetDir}`);
+} catch (error) {
+  console.error("❌ Error copying assets:", error.message);
+  process.exit(1);
+}

package/dist/cloudflare-multitenant/wrangler.toml

@@ -15,6 +15,17 @@ name = "authhero-multitenant"
 main = "src/index.ts"
 compatibility_date = "2024-11-20"
 
+# ════════════════════════════════════════════════════════════════════════════
+# Static Assets (CSS, JS, Widget)
+# ════════════════════════════════════════════════════════════════════════════
+# Serve static assets from the authhero package.
+# This includes the widget, CSS, and client-side JavaScript.
+# Assets are copied from node_modules/authhero/dist/assets to dist/assets
+# during the build process (see copy-assets.js).
+# Assets are served at their path: /u/widget/*, /u/css/*, /u/js/*
+[assets]
+directory = "./dist/assets"
+
 # ════════════════════════════════════════════════════════════════════════════
 # D1 Database binding
 # ════════════════════════════════════════════════════════════════════════════

package/dist/cloudflare-simple/README.md

@@ -130,12 +130,34 @@ The server will be available at `https://localhost:3000`.
 │   ├── app.ts            # AuthHero app configuration
 │   ├── seed.ts           # Database seeding worker
 │   └── types.ts          # TypeScript type definitions
+├── dist/
+│   └── assets/           # Copied static assets (CSS, JS, Widget)
+├── copy-assets.js        # Build script to copy assets from authhero package
 ├── drizzle.config.ts     # Drizzle configuration (reference only)
 ├── seed-helper.js        # Helper script for automated seeding
 ├── wrangler.toml         # Cloudflare Worker configuration
 └── package.json
 ```
 
+## Static Assets
+
+The authentication widget, CSS, and client-side JavaScript are served as static assets via Cloudflare Workers Assets.
+
+### How It Works
+
+1. **Source**: Assets are bundled with the `authhero` package in `node_modules/authhero/dist/assets`
+2. **Build Step**: The `copy-assets.js` script copies these files to `./dist/assets` before dev/deploy
+3. **Serving**: Wrangler serves files from `./dist/assets` (configured in `wrangler.toml`)
+4. **Automatic**: The copy happens automatically when you run `npm run dev` or `npm run deploy`
+
+> **Note**: Wrangler's Assets feature does not support serving files directly from `node_modules`, which is why the copy step is necessary.
+
+Assets are served at:
+
+- `/u/widget/*` - AuthHero login widget (Stencil web component)
+- `/u/css/*` - Tailwind CSS for universal login pages
+- `/u/js/*` - Client-side JavaScript bundle
+
 ## Database Migrations
 
 Database migrations are pre-generated and shipped with the `@authhero/drizzle` package. The schema is managed by AuthHero to ensure compatibility with future updates.

package/dist/cloudflare-simple/copy-assets.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+/**
+ * Copy AuthHero assets to dist directory
+ *
+ * This script copies static assets from the authhero package to the dist directory
+ * so they can be served by Wrangler's Assets feature. Wrangler does not support
+ * serving files directly from node_modules.
+ */
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const sourceDir = path.join(
+  __dirname,
+  "node_modules",
+  "authhero",
+  "dist",
+  "assets",
+);
+const targetDir = path.join(__dirname, "dist", "assets");
+
+/**
+ * Recursively copy directory contents
+ */
+function copyDirectory(src, dest) {
+  // Create destination directory if it doesn't exist
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  // Read source directory
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDirectory(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+try {
+  console.log("📦 Copying AuthHero assets...");
+
+  if (!fs.existsSync(sourceDir)) {
+    console.error(`❌ Source directory not found: ${sourceDir}`);
+    console.error("Make sure the authhero package is installed.");
+    process.exit(1);
+  }
+
+  copyDirectory(sourceDir, targetDir);
+
+  console.log(`✅ Assets copied to ${targetDir}`);
+} catch (error) {
+  console.error("❌ Error copying assets:", error.message);
+  process.exit(1);
+}

package/dist/cloudflare-simple/wrangler.toml

@@ -15,6 +15,17 @@ name = "authhero-server"
 main = "src/index.ts"
 compatibility_date = "2024-11-20"
 
+# ════════════════════════════════════════════════════════════════════════════
+# Static Assets (CSS, JS, Widget)
+# ════════════════════════════════════════════════════════════════════════════
+# Serve static assets from the authhero package.
+# This includes the widget, CSS, and client-side JavaScript.
+# Assets are copied from node_modules/authhero/dist/assets to dist/assets
+# during the build process (see copy-assets.js).
+# Assets are served at their path: /u/widget/*, /u/css/*, /u/js/*
+[assets]
+directory = "./dist/assets"
+
 # ════════════════════════════════════════════════════════════════════════════
 # D1 Database binding
 # ════════════════════════════════════════════════════════════════════════════

package/dist/create-authhero.js

@@ -1,16 +1,16 @@
 #!/usr/bin/env node
-import { Command as j } from "commander";
+import { Command as A } from "commander";
 import m from "inquirer";
-import o from "fs";
+import s from "fs";
 import i from "path";
 import { spawn as b } from "child_process";
-const D = new j(), c = {
+const D = new A(), c = {
   local: {
     name: "Local (SQLite)",
     description: "Local development setup with SQLite database - great for getting started",
     templateDir: "local",
-    packageJson: (s) => ({
-      name: s,
+    packageJson: (o) => ({
+      name: o,
       version: "1.0.0",
       type: "module",
       scripts: {
@@ -42,14 +42,15 @@ const D = new j(), c = {
     name: "Cloudflare Simple (Single Tenant)",
     description: "Single-tenant Cloudflare Workers setup with D1 database",
     templateDir: "cloudflare-simple",
-    packageJson: (s) => ({
-      name: s,
+    packageJson: (o) => ({
+      name: o,
       version: "1.0.0",
       type: "module",
       scripts: {
-        dev: "wrangler dev --port 3000 --local-protocol https",
-        "dev:remote": "wrangler dev --port 3000 --local-protocol https --remote --config wrangler.local.toml",
-        deploy: "wrangler deploy --config wrangler.local.toml",
+        "copy-assets": "node copy-assets.js",
+        dev: "npm run copy-assets && wrangler dev --port 3000 --local-protocol https",
+        "dev:remote": "npm run copy-assets && wrangler dev --port 3000 --local-protocol https --remote --config wrangler.local.toml",
+        deploy: "npm run copy-assets && wrangler deploy --config wrangler.local.toml",
         "db:migrate:local": "wrangler d1 migrations apply AUTH_DB --local",
         "db:migrate:remote": "wrangler d1 migrations apply AUTH_DB --remote --config wrangler.local.toml",
         migrate: "wrangler d1 migrations apply AUTH_DB --local",
@@ -82,14 +83,15 @@ const D = new j(), c = {
     name: "Cloudflare Multi-Tenant (Production)",
     description: "Production-grade multi-tenant setup with D1 database and tenant management",
     templateDir: "cloudflare-multitenant",
-    packageJson: (s) => ({
-      name: s,
+    packageJson: (o) => ({
+      name: o,
       version: "1.0.0",
       type: "module",
       scripts: {
-        dev: "wrangler dev --port 3000 --local-protocol https",
-        "dev:remote": "wrangler dev --port 3000 --local-protocol https --remote --config wrangler.local.toml",
-        deploy: "wrangler deploy --config wrangler.local.toml",
+        "copy-assets": "node copy-assets.js",
+        dev: "npm run copy-assets && wrangler dev --port 3000 --local-protocol https",
+        "dev:remote": "npm run copy-assets && wrangler dev --port 3000 --local-protocol https --remote --config wrangler.local.toml",
+        deploy: "npm run copy-assets && wrangler deploy --config wrangler.local.toml",
         "db:migrate:local": "wrangler d1 migrations apply AUTH_DB --local",
         "db:migrate:remote": "wrangler d1 migrations apply AUTH_DB --remote --config wrangler.local.toml",
         migrate: "wrangler d1 migrations apply AUTH_DB --local",
@@ -119,10 +121,10 @@ const D = new j(), c = {
     seedFile: "seed.ts"
   }
 };
-function A(s, e) {
-  o.readdirSync(s).forEach((n) => {
-    const a = i.join(s, n), t = i.join(e, n);
-    o.lstatSync(a).isDirectory() ? (o.mkdirSync(t, { recursive: !0 }), A(a, t)) : o.copyFileSync(a, t);
+function j(o, e) {
+  s.readdirSync(o).forEach((n) => {
+    const a = i.join(o, n), t = i.join(e, n);
+    s.lstatSync(a).isDirectory() ? (s.mkdirSync(t, { recursive: !0 }), j(a, t)) : s.copyFileSync(a, t);
   });
 }
 function I() {
@@ -159,9 +161,9 @@ async function main() {
 main().catch(console.error);
 `;
 }
-function x(s) {
-  const e = i.join(s, ".github", "workflows");
-  o.mkdirSync(e, { recursive: !0 });
+function x(o) {
+  const e = i.join(o, ".github", "workflows");
+  s.mkdirSync(e, { recursive: !0 });
   const r = `name: Unit tests
 
 on: push
@@ -248,9 +250,9 @@ jobs:
           apiToken: \${{ secrets.PROD_CLOUDFLARE_API_TOKEN }}
           command: deploy --env production
 `;
-  o.writeFileSync(i.join(e, "unit-tests.yml"), r), o.writeFileSync(i.join(e, "deploy-dev.yml"), n), o.writeFileSync(i.join(e, "release.yml"), a), console.log("\\n📦 GitHub CI workflows created!");
+  s.writeFileSync(i.join(e, "unit-tests.yml"), r), s.writeFileSync(i.join(e, "deploy-dev.yml"), n), s.writeFileSync(i.join(e, "release.yml"), a), console.log("\\n📦 GitHub CI workflows created!");
 }
-function C(s) {
+function C(o) {
   const e = {
     branches: ["main"],
     plugins: [
@@ -259,11 +261,11 @@ function C(s) {
       "@semantic-release/github"
     ]
   };
-  o.writeFileSync(
-    i.join(s, ".releaserc.json"),
+  s.writeFileSync(
+    i.join(o, ".releaserc.json"),
     JSON.stringify(e, null, 2)
   );
-  const r = i.join(s, "package.json"), n = JSON.parse(o.readFileSync(r, "utf-8"));
+  const r = i.join(o, "package.json"), n = JSON.parse(s.readFileSync(r, "utf-8"));
   n.devDependencies = {
     ...n.devDependencies,
     "semantic-release": "^24.0.0"
@@ -271,11 +273,11 @@ function C(s) {
     ...n.scripts,
     test: 'echo "No tests yet"',
     "type-check": "tsc --noEmit"
-  }, o.writeFileSync(r, JSON.stringify(n, null, 2));
+  }, s.writeFileSync(r, JSON.stringify(n, null, 2));
 }
-function v(s, e) {
+function v(o, e) {
   return new Promise((r, n) => {
-    const a = b(s, [], {
+    const a = b(o, [], {
       cwd: e,
       shell: !0,
       stdio: "inherit"
@@ -285,9 +287,9 @@ function v(s, e) {
     }), a.on("error", n);
   });
 }
-function S(s, e, r) {
+function S(o, e, r) {
   return new Promise((n, a) => {
-    const t = b(s, [], {
+    const t = b(o, [], {
       cwd: e,
       shell: !0,
       stdio: "inherit",
@@ -304,23 +306,23 @@ D.version("1.0.0").description("Create a new AuthHero project").argument("[proje
 ).option("-e, --email <email>", "admin email address").option("-p, --password <password>", "admin password (min 8 characters)").option(
   "--package-manager <pm>",
   "package manager to use: npm, yarn, pnpm, or bun"
-).option("--skip-install", "skip installing dependencies").option("--skip-migrate", "skip running database migrations").option("--skip-seed", "skip seeding the database").option("--skip-start", "skip starting the development server").option("--github-ci", "include GitHub CI workflows with semantic versioning").option("-y, --yes", "skip all prompts and use defaults/provided options").action(async (s, e) => {
+).option("--skip-install", "skip installing dependencies").option("--skip-migrate", "skip running database migrations").option("--skip-seed", "skip seeding the database").option("--skip-start", "skip starting the development server").option("--github-ci", "include GitHub CI workflows with semantic versioning").option("-y, --yes", "skip all prompts and use defaults/provided options").action(async (o, e) => {
   const r = e.yes === !0;
   console.log(`
 🔐 Welcome to AuthHero!
 `);
-  let n = s;
+  let n = o;
   n || (r ? (n = "auth-server", console.log(`Using default project name: ${n}`)) : n = (await m.prompt([
     {
       type: "input",
       name: "projectName",
       message: "Project name:",
       default: "auth-server",
-      validate: (d) => d !== "" || "Project name cannot be empty"
+      validate: (p) => p !== "" || "Project name cannot be empty"
     }
   ])).projectName);
   const a = i.join(process.cwd(), n);
-  o.existsSync(a) && (console.error(`❌ Project "${n}" already exists.`), process.exit(1));
+  s.existsSync(a) && (console.error(`❌ Project "${n}" already exists.`), process.exit(1));
   let t;
   e.template ? (["local", "cloudflare-simple", "cloudflare-multitenant"].includes(
     e.template
@@ -354,7 +356,7 @@ D.version("1.0.0").description("Create a new AuthHero project").argument("[proje
     }
   ])).setupType;
   const f = c[t];
-  o.mkdirSync(a, { recursive: !0 }), o.writeFileSync(
+  s.mkdirSync(a, { recursive: !0 }), s.writeFileSync(
     i.join(a, "package.json"),
     JSON.stringify(f.packageJson(n), null, 2)
   );
@@ -362,25 +364,25 @@ D.version("1.0.0").description("Create a new AuthHero project").argument("[proje
     import.meta.url.replace("file://", "").replace("/create-authhero.js", ""),
     f.templateDir
   );
-  if (o.existsSync(k) ? A(k, a) : (console.error(`❌ Template directory not found: ${k}`), process.exit(1)), t === "cloudflare-simple" || t === "cloudflare-multitenant") {
-    const l = i.join(a, "wrangler.toml"), d = i.join(a, "wrangler.local.toml");
-    o.existsSync(l) && o.copyFileSync(l, d);
-    const p = i.join(a, ".dev.vars.example"), u = i.join(a, ".dev.vars");
-    o.existsSync(p) && o.copyFileSync(p, u), console.log(
+  if (s.existsSync(k) ? j(k, a) : (console.error(`❌ Template directory not found: ${k}`), process.exit(1)), t === "cloudflare-simple" || t === "cloudflare-multitenant") {
+    const l = i.join(a, "wrangler.toml"), p = i.join(a, "wrangler.local.toml");
+    s.existsSync(l) && s.copyFileSync(l, p);
+    const d = i.join(a, ".dev.vars.example"), u = i.join(a, ".dev.vars");
+    s.existsSync(d) && s.copyFileSync(d, u), console.log(
       "📁 Created wrangler.local.toml and .dev.vars for local development"
     );
   }
-  let w = !1;
-  if ((t === "cloudflare-simple" || t === "cloudflare-multitenant") && (e.githubCi !== void 0 ? (w = e.githubCi, w && console.log("Including GitHub CI workflows with semantic versioning")) : r || (w = (await m.prompt([
+  let y = !1;
+  if ((t === "cloudflare-simple" || t === "cloudflare-multitenant") && (e.githubCi !== void 0 ? (y = e.githubCi, y && console.log("Including GitHub CI workflows with semantic versioning")) : r || (y = (await m.prompt([
     {
       type: "confirm",
       name: "includeGithubCi",
       message: "Would you like to include GitHub CI with semantic versioning?",
       default: !1
     }
-  ])).includeGithubCi), w && (x(a), C(a))), t === "local") {
+  ])).includeGithubCi), y && (x(a), C(a))), t === "local") {
     const l = I();
-    o.writeFileSync(i.join(a, "src/seed.ts"), l);
+    s.writeFileSync(i.join(a, "src/seed.ts"), l);
   }
   console.log(
     `
@@ -416,8 +418,8 @@ D.version("1.0.0").description("Create a new AuthHero project").argument("[proje
 📦 Installing dependencies with ${l}...
 `);
     try {
-      const d = l === "pnpm" ? "pnpm install --ignore-workspace" : `${l} install`;
-      if (await v(d, a), t === "local" && (console.log(`
+      const p = l === "pnpm" ? "pnpm install --ignore-workspace" : `${l} install`;
+      if (await v(p, a), t === "local" && (console.log(`
 🔧 Building native modules...
 `), await v("npm rebuild better-sqlite3", a)), console.log(`
 ✅ Dependencies installed successfully!
@@ -441,14 +443,14 @@ D.version("1.0.0").description("Create a new AuthHero project").argument("[proje
               name: "username",
               message: "Admin email:",
               default: "admin@example.com",
-              validate: (y) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(y) || "Please enter a valid email address"
+              validate: (w) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(w) || "Please enter a valid email address"
             },
             {
               type: "password",
               name: "password",
               message: "Admin password:",
               mask: "*",
-              validate: (y) => y.length < 8 ? "Password must be at least 8 characters" : !0
+              validate: (w) => w.length < 8 ? "Password must be at least 8 characters" : !0
             }
           ]), e.skipMigrate || (console.log(`
 🔄 Running migrations...
@@ -471,27 +473,27 @@ D.version("1.0.0").description("Create a new AuthHero project").argument("[proje
           ));
         }
       }
-      let p;
-      e.skipStart || r ? p = !1 : p = (await m.prompt([
+      let d;
+      e.skipStart || r ? d = !1 : d = (await m.prompt([
         {
           type: "confirm",
           name: "shouldStart",
           message: "Would you like to start the development server?",
           default: !0
         }
-      ])).shouldStart, p && (console.log(
+      ])).shouldStart, d && (console.log(
         `
 🚀 Starting development server on https://localhost:3000 ...
 `
-      ), await v(`${l} run dev`, a)), r && !p && (console.log(`
+      ), await v(`${l} run dev`, a)), r && !d && (console.log(`
 ✅ Setup complete!`), console.log(`
 To start the development server:`), console.log(`  cd ${n}`), console.log("  npm run dev"), (t === "cloudflare-simple" || t === "cloudflare-multitenant") && console.log(
         `
 Server will be available at: https://localhost:3000`
       ));
-    } catch (d) {
+    } catch (p) {
       console.error(`
-❌ An error occurred:`, d), process.exit(1);
+❌ An error occurred:`, p), process.exit(1);
     }
   }
   h || (console.log("Next steps:"), console.log(`  cd ${n}`), t === "local" ? (console.log("  npm install"), console.log("  npm run migrate"), console.log(

package/dist/local/src/app.ts

@@ -2,6 +2,7 @@ import { Context } from "hono";
 import { HTTPException } from "hono/http-exception";
 import { AuthHeroConfig, init } from "authhero";
 import { swaggerUI } from "@hono/swagger-ui";
+import { serveStatic } from "@hono/node-server/serve-static";
 
 export default function createApp(config: AuthHeroConfig) {
   const { app } = init(config);
@@ -20,7 +21,15 @@ export default function createApp(config: AuthHeroConfig) {
         status: "running",
       });
     })
-    .get("/docs", swaggerUI({ url: "/api/v2/spec" }));
+    .get("/docs", swaggerUI({ url: "/api/v2/spec" }))
+    // Serve static assets (widget, CSS, JS) from authhero package
+    .get(
+      "/u/*",
+      serveStatic({
+        root: "./node_modules/authhero/dist/assets/u",
+        rewriteRequestPath: (path) => path.replace("/u", ""),
+      }),
+    );
 
   return app;
 }

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/markusahlstrand/authhero"
   },
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "main": "dist/create-authhero.js",
   "bin": {