create-githat-app 1.8.12 → 1.9.0

package/dist/cli.js

@@ -1,9 +1,9 @@
 import { createRequire } from 'module'; const require = createRequire(import.meta.url);
 
 // src/cli.ts
-import { Command as Command7 } from "commander";
-import * as p12 from "@clack/prompts";
-import chalk10 from "chalk";
+import { Command as Command8 } from "commander";
+import * as p13 from "@clack/prompts";
+import chalk11 from "chalk";
 
 // src/utils/ascii.ts
 import figlet from "figlet";
@@ -11,7 +11,7 @@ import gradient from "gradient-string";
 import chalk from "chalk";
 
 // src/constants.ts
-var VERSION = "1.0.18";
+var VERSION = "1.9.0";
 var DEFAULT_API_URL = "https://api.githat.io";
 var DASHBOARD_URL = "https://githat.io/dashboard/apps";
 var BRAND_COLORS = ["#7c3aed", "#6366f1", "#8b5cf6"];
@@ -527,11 +527,12 @@ async function promptGitHat(existingKey) {
     options: [
       { value: "forgot-password", label: "Forgot password", hint: "reset via email" },
       { value: "email-verification", label: "Email verification" },
+      { value: "magic-link", label: "Magic link sign-in", hint: "passwordless email link" },
       { value: "org-management", label: "Organizations", hint: "teams & roles" },
       { value: "mcp-servers", label: "MCP servers", hint: "Model Context Protocol" },
       { value: "ai-agents", label: "AI agents", hint: "wallet-based identity" }
     ],
-    initialValues: ["forgot-password"],
+    initialValues: ["forgot-password", "email-verification", "magic-link"],
     required: false
   });
   if (p5.isCancel(authFeatures)) {
@@ -616,7 +617,7 @@ function getDefaults(projectName, publishableKey, typescript, fullstack, backend
     packageManager: detectPackageManager(),
     publishableKey: publishableKey || "",
     apiUrl: DEFAULT_API_URL,
-    authFeatures: template === "agent" ? ["forgot-password", "email-verification", "mcp-servers", "ai-agents"] : isMinimal ? [] : ["forgot-password"],
+    authFeatures: template === "agent" ? ["forgot-password", "email-verification", "magic-link", "mcp-servers", "ai-agents"] : isMinimal ? [] : ["forgot-password", "email-verification", "magic-link"],
     databaseChoice: "none",
     useTailwind: true,
     includeDashboard: template === "agent" ? true : !isMinimal,
@@ -672,6 +673,7 @@ function answersToContext(answers) {
     includeGithatFolder: answers.includeGithatFolder,
     includeForgotPassword: answers.authFeatures.includes("forgot-password"),
     includeEmailVerification: answers.authFeatures.includes("email-verification"),
+    includeMagicLink: answers.authFeatures.includes("magic-link"),
     includeOrgManagement: answers.authFeatures.includes("org-management"),
     includeMcpModule: answers.authFeatures.includes("mcp-servers"),
     includeAgentModule: answers.authFeatures.includes("ai-agents"),
@@ -1648,35 +1650,236 @@ skillsCommand.action(() => {
   console.log("");
 });
 
+// src/commands/deploy/index.ts
+import { Command as Command7 } from "commander";
+import * as p12 from "@clack/prompts";
+import chalk10 from "chalk";
+import ora2 from "ora";
+import { execSync as execSync4, spawn } from "child_process";
+import { promises as fs8, existsSync as existsSync4 } from "fs";
+import path8 from "path";
+import * as tar from "tar";
+var DEFAULT_API_URL2 = "https://api.githat.io";
+async function readConfig(cwd) {
+  const configPath = path8.join(cwd, ".githat", "config.json");
+  let appId;
+  let apiUrl = DEFAULT_API_URL2;
+  if (existsSync4(configPath)) {
+    try {
+      const cfg = JSON.parse(await fs8.readFile(configPath, "utf-8"));
+      appId = cfg.appId;
+      if (cfg.apiUrl) apiUrl = cfg.apiUrl;
+    } catch (err) {
+      throw new Error(
+        `Could not read .githat/config.json: ${err.message}`
+      );
+    }
+  }
+  if (!appId) appId = process.env.GITHAT_APP_ID;
+  if (process.env.NEXT_PUBLIC_GITHAT_API_URL) apiUrl = process.env.NEXT_PUBLIC_GITHAT_API_URL;
+  if (!appId) {
+    throw new Error(
+      [
+        "No appId found. Either:",
+        `  - Run ${chalk10.cyan("githat init")} to bind this directory to a GitHat app, or`,
+        `  - Set ${chalk10.cyan("GITHAT_APP_ID")} in your environment, or`,
+        `  - Create ${chalk10.cyan(".githat/config.json")} with { "appId": "..." }`
+      ].join("\n")
+    );
+  }
+  let secretKey = process.env.GITHAT_SECRET_KEY || "";
+  if (!secretKey) {
+    const envPath = path8.join(cwd, ".env.local");
+    if (existsSync4(envPath)) {
+      const envText = await fs8.readFile(envPath, "utf-8");
+      const m = envText.match(/^GITHAT_SECRET_KEY=(.*)$/m);
+      if (m) secretKey = m[1].replace(/^["']|["']$/g, "").trim();
+    }
+  }
+  if (!secretKey || !secretKey.startsWith("sk_live_")) {
+    throw new Error(
+      [
+        "No GITHAT_SECRET_KEY found. Either:",
+        `  - Add ${chalk10.cyan("GITHAT_SECRET_KEY=sk_live_...")} to ${chalk10.cyan(".env.local")}, or`,
+        `  - Set the ${chalk10.cyan("GITHAT_SECRET_KEY")} env var (CI flow)`,
+        "",
+        chalk10.dim("Get yours at https://githat.io/dashboard/apps \u2192 your app \u2192 Keys \u2192 New secret key")
+      ].join("\n")
+    );
+  }
+  return { appId, apiUrl, secretKey };
+}
+async function packArtifact(cwd) {
+  const outDir = path8.join(cwd, "out");
+  if (!existsSync4(outDir)) {
+    throw new Error(
+      `No \`out/\` directory at ${outDir}. Run \`npm run build\` first.`
+    );
+  }
+  const entries = await fs8.readdir(outDir);
+  if (entries.length === 0) {
+    throw new Error("`out/` is empty. Build did not produce any files.");
+  }
+  const stream = tar.create(
+    {
+      gzip: true,
+      cwd: outDir,
+      // 'portable' strips uid/gid/atime/ctime so the bundle hashes
+      // identically across machines (helpful if you later add deploy
+      // dedup on content hash).
+      portable: true
+    },
+    entries
+  );
+  const chunks = [];
+  for await (const chunk of stream) chunks.push(chunk);
+  return Buffer.concat(chunks);
+}
+async function uploadArtifact(cfg, artifact, commit, commitMessage) {
+  const url = `${cfg.apiUrl.replace(/\/$/, "")}/apps/${cfg.appId}/deploy`;
+  const headers = {
+    "Content-Type": "application/gzip",
+    "Authorization": `Bearer ${cfg.secretKey}`
+  };
+  if (commit) headers["X-GitHat-Commit"] = commit;
+  if (commitMessage) {
+    const subject = commitMessage.split(/\r?\n/, 1)[0] || "";
+    const sanitized = subject.replace(/[\x00-\x1f\x7f]/g, " ").trim().slice(0, 200);
+    if (sanitized) headers["X-GitHat-Commit-Message"] = sanitized;
+  }
+  const res = await fetch(url, { method: "POST", headers, body: artifact });
+  const text4 = await res.text();
+  let body;
+  try {
+    body = JSON.parse(text4);
+  } catch {
+    body = { error: text4 };
+  }
+  if (!res.ok) {
+    throw new Error(
+      `Deploy failed (${res.status}): ${body?.error || res.statusText}`
+    );
+  }
+  return body;
+}
+function maybeReadGitInfo(cwd) {
+  try {
+    const commit = execSync4("git rev-parse --short HEAD", {
+      cwd,
+      stdio: ["ignore", "pipe", "ignore"]
+    }).toString().trim();
+    const message = execSync4("git log -1 --pretty=%B", {
+      cwd,
+      stdio: ["ignore", "pipe", "ignore"]
+    }).toString().trim();
+    return { commit, message };
+  } catch {
+    return { commit: null, message: null };
+  }
+}
+async function ensureBuilt(cwd, force) {
+  const outDir = path8.join(cwd, "out");
+  if (existsSync4(outDir) && !force) {
+    return;
+  }
+  const spinner2 = ora2("Building static export (npm run build)...").start();
+  await new Promise((resolve4, reject) => {
+    const child = spawn("npm", ["run", "build"], {
+      cwd,
+      stdio: ["ignore", "pipe", "pipe"],
+      env: { ...process.env }
+    });
+    let stderr = "";
+    child.stderr.on("data", (d) => {
+      stderr += d.toString();
+    });
+    child.on("close", (code) => {
+      if (code === 0) resolve4();
+      else reject(new Error(`Build exited with code ${code}.
+${stderr.slice(-2e3)}`));
+    });
+  });
+  spinner2.succeed("Build complete");
+}
+function formatBytes(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(2)} MB`;
+}
+var deployCommand = new Command7("deploy").description("Deploy this app to GitHat (no AWS credentials required)").option("--build", "Force a fresh build even if out/ exists", false).option("--cwd <dir>", "Run from this directory instead of the current one").action(async (opts) => {
+  const cwd = path8.resolve(opts.cwd ?? process.cwd());
+  try {
+    const cfg = await readConfig(cwd);
+    p12.note(
+      [
+        `${chalk10.dim("app:    ")}${cfg.appId}`,
+        `${chalk10.dim("api:    ")}${cfg.apiUrl}`,
+        `${chalk10.dim("cwd:    ")}${cwd}`
+      ].join("\n"),
+      "githat deploy"
+    );
+    await ensureBuilt(cwd, !!opts.build);
+    const packSpin = ora2("Packing artifact...").start();
+    const artifact = await packArtifact(cwd);
+    packSpin.succeed(`Packed ${formatBytes(artifact.length)}`);
+    if (artifact.length > 10 * 1024 * 1024) {
+      throw new Error(
+        `Artifact is ${formatBytes(artifact.length)} \u2014 over the 10 MB API limit. Reduce out/ size or wait for the chunked-upload flow.`
+      );
+    }
+    const upSpin = ora2("Uploading to GitHat...").start();
+    const git = maybeReadGitInfo(cwd);
+    const result = await uploadArtifact(cfg, artifact, git.commit, git.message);
+    upSpin.succeed(
+      `Uploaded ${result.filesUploaded} files (${formatBytes(result.bytesUploaded)})`
+    );
+    const lines = [
+      chalk10.green.bold("\u{1F680} Deployment succeeded"),
+      "",
+      `${chalk10.dim("deployment id:  ")}${result.deploymentId}`,
+      `${chalk10.dim("cf invalidation:")} ${result.cloudfrontInvalidationId ?? chalk10.dim("(none)")}`,
+      `${chalk10.dim("files:          ")}${result.filesUploaded}`,
+      `${chalk10.dim("size:           ")}${formatBytes(result.bytesUploaded)}`
+    ];
+    if (result.url) {
+      lines.push("", `${chalk10.cyan("Live at:")} ${result.url}`);
+    }
+    p12.note(lines.join("\n"));
+  } catch (err) {
+    p12.cancel(chalk10.red(err.message));
+    process.exit(1);
+  }
+});
+
 // src/cli.ts
-var program = new Command7();
+var program = new Command8();
 program.name("githat").description("GitHat CLI - Scaffold apps and manage skills").version(VERSION);
 program.command("create [project-name]", { isDefault: true }).description("Scaffold a new GitHat app").option("--key <key>", "CI only: bake key into .env.local. Default flow is paste into .env.local after scaffold.").option("--ts", "Use TypeScript (default)").option("--js", "Use JavaScript").option("--plain", "Smallest scaffold: auth + a homepage. No dashboard.").option("--saas", "B2B starter: orgs, teams, RBAC, subscription billing.").option("--marketplace", "Multi-vendor commerce: anonymous-first browsing, Sebastn Connect.").option("--agent", "Web4 wallet-bound autonomous agent + MCP server registration.").option("--content", "Paywalled posts, newsletter, one-time purchases via Sebastn.").option("--dashboard", "Admin UI over your existing database, auth-gated.").option("--portfolio", "Personal portfolio: public projects, auth-gated editor.").option("--classroom", "Live student presentations with real-time audience feedback.").option("--fullstack", "Create fullstack project (Turborepo)").option("--backend <framework>", "Backend framework (hono, express, fastify)").option("-y, --yes", "Skip prompts and use defaults").action(async (projectName, opts) => {
   try {
     displayBanner();
     if (!opts.yes && !opts.key) {
-      p12.note(
+      p13.note(
         [
-          chalk10.bold("How the GitHat key flow works:"),
+          chalk11.bold("How the GitHat key flow works:"),
           "",
-          `  ${chalk10.cyan("1.")} We'll scaffold your project with a placeholder`,
-          `     in ${chalk10.bold(".env.local")} (gitignored \u2014 safe to keep secrets here)`,
+          `  ${chalk11.cyan("1.")} We'll scaffold your project with a placeholder`,
+          `     in ${chalk11.bold(".env.local")} (gitignored \u2014 safe to keep secrets here)`,
           "",
-          `  ${chalk10.cyan("2.")} You open ${chalk10.cyan("https://githat.io/dashboard/apps")}`,
+          `  ${chalk11.cyan("2.")} You open ${chalk11.cyan("https://githat.io/dashboard/apps")}`,
           `     and copy your publishable key`,
           "",
-          `  ${chalk10.cyan("3.")} You paste it into ${chalk10.bold(".env.local")} and run`,
-          `     ${chalk10.dim("npm run dev")}`,
+          `  ${chalk11.cyan("3.")} You paste it into ${chalk11.bold(".env.local")} and run`,
+          `     ${chalk11.dim("npm run dev")}`,
           "",
-          chalk10.dim("Why not pass the key on the command line? Shell"),
-          chalk10.dim("history is forever. .env.local is more secure.")
+          chalk11.dim("Why not pass the key on the command line? Shell"),
+          chalk11.dim("history is forever. .env.local is more secure.")
         ].join("\n"),
         "First time with GitHat?"
       );
     }
     const typescript = opts.js ? false : opts.ts ? true : void 0;
     if (opts.yes && !projectName) {
-      p12.cancel(chalk10.red("Project name is required when using --yes flag"));
+      p13.cancel(chalk11.red("Project name is required when using --yes flag"));
       process.exit(1);
     }
     const template = opts.marketplace ? "marketplace" : opts.classroom ? "classroom" : opts.portfolio ? "portfolio" : opts.agent ? "agent" : opts.saas ? "saas" : opts.content ? "content" : opts.dashboard ? "dashboard" : opts.plain ? "plain" : void 0;
@@ -1696,9 +1899,10 @@ program.command("create [project-name]", { isDefault: true }).description("Scaff
       skipPrompts: opts.yes
     });
   } catch (err) {
-    p12.cancel(chalk10.red(err.message || "Something went wrong."));
+    p13.cancel(chalk11.red(err.message || "Something went wrong."));
     process.exit(1);
   }
 });
 program.addCommand(skillsCommand);
+program.addCommand(deployCommand);
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-githat-app",
-  "version": "1.8.12",
+  "version": "1.9.0",
   "description": "GitHat CLI — scaffold apps and manage the skills marketplace",
   "type": "module",
   "bin": {
@@ -26,6 +26,7 @@
     "gradient-string": "^3.0.0",
     "handlebars": "^4.7.9",
     "ora": "^9.3.0",
+    "tar": "^7.4.3",
     "unzipper": "^0.12.3"
   },
   "devDependencies": {

package/templates/agent/app/(auth)/forgot-password/page.tsx.hbs

@@ -1,6 +1,8 @@
 {{#if includeForgotPassword}}
 import { ForgotPasswordForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Reset password — {{businessName}}' };
+
 export default function ForgotPasswordPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)' }}{{/if}}>

package/templates/agent/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/agent/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/classroom/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/classroom/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/content/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/content/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/dashboard/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/dashboard/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/fullstack/apps-web-nextjs/app/(auth)/forgot-password/page.tsx.hbs

@@ -1,6 +1,8 @@
 {{#if includeForgotPassword}}
 import { ForgotPasswordForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Reset password — {{businessName}}' };
+
 export default function ForgotPasswordPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/fullstack/apps-web-nextjs/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/fullstack/apps-web-nextjs/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/marketplace/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/marketplace/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/nextjs/app/(auth)/forgot-password/page.tsx.hbs

@@ -1,6 +1,8 @@
 {{#if includeForgotPassword}}
 import { ForgotPasswordForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Reset password — {{businessName}}' };
+
 export default function ForgotPasswordPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/nextjs/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/nextjs/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/nextjs/app/(auth)/verify-email/page.tsx.hbs

@@ -1,57 +1,47 @@
 {{#if includeEmailVerification}}
 'use client';
 
-import { useEffect, useState } from 'react';
-{{#if includeGithatFolder}}
-import { authApi } from '../../../githat/api/auth{{#unless typescript}}.js{{/unless}}';
-{{/if}}
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { VerifyEmailStatus } from '@githat/nextjs';
 
-export default function VerifyEmailPage() {
-  const [status, setStatus] = useState{{#if typescript}}<'loading' | 'success' | 'error'>{{/if}}('loading');
+export const metadata = { title: 'Verify email — {{businessName}}' };
 
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const token = params.get('token');
-    if (!token) {
-      setStatus('error');
-      return;
-    }
+/**
+ * Verify-email landing — handles the `/verify-email?token=…` link from
+ * the GitHat Auth verification email. Uses the SDK's VerifyEmailStatus
+ * component (consistent with how SignInForm / SignUpForm /
+ * ForgotPasswordForm / ResetPasswordForm / MagicLinkVerify wrap their
+ * respective flows in this scaffold). Every auth page is a thin
+ * wrapper around the SDK component.
+ */
+function VerifyEmailContent() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token');
 
-    (async () => {
-      try {
-{{#if includeGithatFolder}}
-        await authApi.verifyEmail(token);
-{{else}}
-        await fetch('{{apiUrl}}/auth/verify-email', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ token }),
-        });
-{{/if}}
-        setStatus('success');
-      } catch {
-        setStatus('error');
-      }
-    })();
-  }, []);
+  if (!token) {
+    return (
+      <div {{#if useTailwind}}className="text-center max-w-sm p-8"{{else}}style=\{{ textAlign: 'center', maxWidth: '24rem', padding: '2rem' }}{{/if}}>
+        <h1 {{#if useTailwind}}className="text-xl font-semibold text-white mb-2"{{else}}style=\{{ fontSize: '1.25rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}{{/if}}>
+          Verification link missing
+        </h1>
+        <p {{#if useTailwind}}className="text-zinc-400"{{else}}style=\{{ color: '#a1a1aa' }}{{/if}}>
+          <Link href="/sign-in" {{#if useTailwind}}className="text-violet-500 hover:underline"{{else}}style=\{{ color: '#7c3aed' }}{{/if}}>Back to sign in</Link>
+        </p>
+      </div>
+    );
+  }
 
+  return <VerifyEmailStatus token={token} signInUrl="/sign-in" />;
+}
+
+export default function VerifyEmailPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
-      <div style=\{{ textAlign: 'center' }}>
-        {status === 'loading' && <p style=\{{ color: '#a1a1aa' }}>Verifying your email...</p>}
-        {status === 'success' && (
-          <>
-            <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Email verified!</h1>
-            <p style=\{{ color: '#a1a1aa' }}>You can now <a href="/sign-in" style=\{{ color: '#7c3aed' }}>sign in</a>.</p>
-          </>
-        )}
-        {status === 'error' && (
-          <>
-            <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Verification failed</h1>
-            <p style=\{{ color: '#a1a1aa' }}>The link may have expired. <a href="/sign-up" style=\{{ color: '#7c3aed' }}>Try again</a>.</p>
-          </>
-        )}
-      </div>
+      <Suspense fallback={null}>
+        <VerifyEmailContent />
+      </Suspense>
     </main>
   );
 }

package/templates/plain/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/plain/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/portfolio/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/portfolio/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/saas/app/(auth)/sign-in/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignInForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign in — {{businessName}}' };
+
 export default function SignInPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>

package/templates/saas/app/(auth)/sign-up/page.tsx.hbs

@@ -1,5 +1,7 @@
 import { SignUpForm } from '@githat/nextjs';
 
+export const metadata = { title: 'Sign up — {{businessName}}' };
+
 export default function SignUpPage() {
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>