@getjack/jack 0.1.19 → 0.1.22

package/templates/saas/src/client/pages/SignupPage.tsx

@@ -0,0 +1,192 @@
+import { useState } from "react";
+import { authClient } from "../lib/auth-client";
+import { ThemeToggle } from "../components/ThemeToggle";
+
+interface SignupPageProps {
+	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+}
+
+export default function SignupPage({ navigate }: SignupPageProps) {
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setError(null);
+		setIsLoading(true);
+
+		// Basic password validation
+		if (password.length < 8) {
+			setError("Password must be at least 8 characters long.");
+			setIsLoading(false);
+			return;
+		}
+
+		try {
+			const result = await authClient.signUp.email({
+				email,
+				password,
+				name,
+			});
+
+			if (result.error) {
+				setError(result.error.message || "Failed to create account. Please try again.");
+				setIsLoading(false);
+				return;
+			}
+
+			navigate("/dashboard");
+		} catch (err) {
+			setError("An unexpected error occurred. Please try again.");
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<div className="min-h-screen bg-background flex flex-col">
+			{/* Navigation */}
+			<nav className="border-b border-border">
+				<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="flex justify-between items-center h-16">
+						<button
+							type="button"
+							onClick={() => navigate("/")}
+							className="text-xl font-bold hover:opacity-80 transition-opacity"
+						>
+							jack-template
+						</button>
+						<ThemeToggle />
+					</div>
+				</div>
+			</nav>
+
+			{/* Signup Form */}
+			<div className="flex-1 flex items-center justify-center px-4 py-12">
+				<div className="w-full max-w-md">
+					<div className="text-center mb-8">
+						<h1 className="text-2xl font-bold mb-2">Create your account</h1>
+						<p className="text-muted-foreground">Get started for free. No credit card required.</p>
+					</div>
+
+					<form onSubmit={handleSubmit} className="space-y-4">
+						{error && (
+							<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+								<p className="text-sm text-destructive">{error}</p>
+							</div>
+						)}
+
+						<div>
+							<label htmlFor="name" className="block text-sm font-medium mb-2">
+								Name
+							</label>
+							<input
+								id="name"
+								type="text"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								placeholder="Your name"
+								required
+								disabled={isLoading}
+								className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+							/>
+						</div>
+
+						<div>
+							<label htmlFor="email" className="block text-sm font-medium mb-2">
+								Email
+							</label>
+							<input
+								id="email"
+								type="email"
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								placeholder="you@example.com"
+								required
+								disabled={isLoading}
+								className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+							/>
+						</div>
+
+						<div>
+							<label htmlFor="password" className="block text-sm font-medium mb-2">
+								Password
+							</label>
+							<input
+								id="password"
+								type="password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								placeholder="At least 8 characters"
+								required
+								disabled={isLoading}
+								className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+							/>
+							<p className="mt-1 text-xs text-muted-foreground">
+								Must be at least 8 characters long
+							</p>
+						</div>
+
+						<button
+							type="submit"
+							disabled={isLoading}
+							className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md hover:opacity-90 transition-opacity font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+						>
+							{isLoading ? (
+								<>
+									<svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+										<circle
+											className="opacity-25"
+											cx="12"
+											cy="12"
+											r="10"
+											stroke="currentColor"
+											strokeWidth="4"
+										/>
+										<path
+											className="opacity-75"
+											fill="currentColor"
+											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+										/>
+									</svg>
+									Creating account...
+								</>
+							) : (
+								"Create account"
+							)}
+						</button>
+					</form>
+
+					<p className="mt-6 text-xs text-center text-muted-foreground">
+						By creating an account, you agree to our Terms of Service and Privacy Policy.
+					</p>
+
+					<div className="mt-6 text-center">
+						<p className="text-sm text-muted-foreground">
+							Already have an account?{" "}
+							<button
+								type="button"
+								onClick={() => navigate("/login")}
+								className="text-primary hover:underline font-medium"
+							>
+								Sign in
+							</button>
+						</p>
+					</div>
+
+					<div className="mt-4 text-center">
+						<button
+							type="button"
+							onClick={() => navigate("/")}
+							className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+						>
+							Back to home
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/templates/saas/src/index.ts

@@ -0,0 +1,208 @@
+// Server-side Worker - handles API routes, keeps secrets secure
+/// <reference types="@cloudflare/workers-types" />
+
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import Stripe from "stripe";
+import { createAuth } from "./auth";
+
+// Environment bindings and secrets
+type Env = {
+	// Bindings
+	DB: D1Database;
+	ASSETS: Fetcher;
+
+	// Secrets (set via `jack secrets set`)
+	BETTER_AUTH_SECRET: string;
+	BETTER_AUTH_URL?: string;
+	STRIPE_SECRET_KEY: string;
+	STRIPE_WEBHOOK_SECRET: string;
+	STRIPE_PRO_PRICE_ID?: string;
+	STRIPE_ENTERPRISE_PRICE_ID?: string;
+};
+
+const app = new Hono<{ Bindings: Env }>();
+
+// CORS for API routes
+app.use("/api/*", cors());
+
+// Mount Better Auth handler - handles all auth routes including Stripe webhooks
+// Routes: /api/auth/signup, /api/auth/signin, /api/auth/session, /api/auth/stripe/webhook, etc.
+app.all("/api/auth/*", async (c) => {
+	const auth = createAuth(c.env);
+	return auth.handler(c.req.raw);
+});
+
+// Health check endpoint
+app.get("/api/health", (c) => {
+	return c.json({
+		status: "ok",
+		timestamp: new Date().toISOString(),
+	});
+});
+
+// Config endpoint - exposes non-sensitive configuration to frontend
+app.get("/api/config", (c) => {
+	const isStripeTestMode = c.env.STRIPE_SECRET_KEY?.startsWith("sk_test_") ?? true;
+	return c.json({
+		stripeTestMode: isStripeTestMode,
+	});
+});
+
+// Get subscription status with real-time Stripe data
+app.get("/api/subscription-status", async (c) => {
+	try {
+		const auth = createAuth(c.env);
+		const session = await auth.api.getSession({ headers: c.req.raw.headers });
+
+		if (!session?.user) {
+			return c.json({ error: "Unauthorized" }, 401);
+		}
+
+		const stripeClient = new Stripe(c.env.STRIPE_SECRET_KEY);
+
+		// Find customer by email
+		const customers = await stripeClient.customers.list({
+			email: session.user.email,
+			limit: 1,
+		});
+
+		if (customers.data.length === 0) {
+			console.log(`[subscription-status] No Stripe customer for: ${session.user.email}`);
+			return c.json({ subscription: null });
+		}
+
+		// Get subscriptions for this customer (active or scheduled to cancel)
+		const subscriptions = await stripeClient.subscriptions.list({
+			customer: customers.data[0].id,
+			limit: 10,  // Get more to find the right one
+			expand: ["data.default_payment_method"],  // Force fresh data
+		});
+
+		// Find active or trialing subscription (even if set to cancel at period end)
+		const sub = subscriptions.data.find(
+			(s) => s.status === "active" || s.status === "trialing"
+		);
+
+		if (!sub) {
+			console.log(`[subscription-status] No active subscriptions for customer: ${customers.data[0].id}`);
+			return c.json({ subscription: null });
+		}
+
+		console.log(`[subscription-status] Found: id=${sub.id}, status=${sub.status}, cancel_at_period_end=${sub.cancel_at_period_end}`);
+
+		return c.json({
+			subscription: {
+				id: sub.id,
+				status: sub.status,
+				cancelAtPeriodEnd: sub.cancel_at_period_end,
+				periodEnd: sub.current_period_end
+					? new Date(sub.current_period_end * 1000).toISOString()
+					: null,
+				plan: sub.items.data[0]?.price?.lookup_key || sub.items.data[0]?.price?.id,
+			},
+		});
+	} catch (err) {
+		console.error("[subscription-status] Error:", err);
+		return c.json({
+			error: "Failed to fetch subscription status",
+			details: err instanceof Error ? err.message : String(err)
+		}, 500);
+	}
+});
+
+// Resubscribe - undo a pending cancellation
+app.post("/api/resubscribe", async (c) => {
+	try {
+		const auth = createAuth(c.env);
+		const session = await auth.api.getSession({ headers: c.req.raw.headers });
+
+		if (!session?.user) {
+			return c.json({ error: "Unauthorized" }, 401);
+		}
+
+		const stripeClient = new Stripe(c.env.STRIPE_SECRET_KEY);
+
+		// Find customer
+		const customers = await stripeClient.customers.list({
+			email: session.user.email,
+			limit: 1,
+		});
+
+		if (customers.data.length === 0) {
+			return c.json({ error: "No billing account found" }, 404);
+		}
+
+		// Find active subscription set to cancel
+		const subscriptions = await stripeClient.subscriptions.list({
+			customer: customers.data[0].id,
+			status: "active",
+			limit: 1,
+		});
+
+		if (subscriptions.data.length === 0) {
+			return c.json({ error: "No active subscription found" }, 404);
+		}
+
+		const sub = subscriptions.data[0];
+
+		// Undo the cancellation in Stripe (if set)
+		if (sub.cancel_at_period_end) {
+			await stripeClient.subscriptions.update(sub.id, {
+				cancel_at_period_end: false,
+			});
+		}
+
+		// Also clear the local cancelAt in Better Auth's database
+		await c.env.DB.prepare(
+			"UPDATE subscription SET cancelAt = NULL WHERE stripeSubscriptionId = ?"
+		).bind(sub.id).run();
+
+		return c.json({ success: true });
+	} catch (err) {
+		console.error("[resubscribe] Error:", err);
+		return c.json({
+			error: "Failed to resubscribe",
+			details: err instanceof Error ? err.message : String(err),
+		}, 500);
+	}
+});
+
+// Billing portal - redirects authenticated user to Stripe Customer Portal
+app.get("/api/billing-portal", async (c) => {
+	const auth = createAuth(c.env);
+	const session = await auth.api.getSession({ headers: c.req.raw.headers });
+
+	if (!session?.user) {
+		return c.json({ error: "Unauthorized" }, 401);
+	}
+
+	// Get the Stripe customer ID from the user's subscription
+	const stripeClient = new Stripe(c.env.STRIPE_SECRET_KEY);
+
+	// Find the customer by email (Better Auth creates customer on signup)
+	const customers = await stripeClient.customers.list({
+		email: session.user.email,
+		limit: 1,
+	});
+
+	if (customers.data.length === 0) {
+		return c.json({ error: "No billing account found" }, 404);
+	}
+
+	const returnUrl = c.req.header("origin") || c.req.header("referer") || c.env.BETTER_AUTH_URL || "/";
+
+	const portalSession = await stripeClient.billingPortal.sessions.create({
+		customer: customers.data[0].id,
+		return_url: `${returnUrl}/#/dashboard`,
+	});
+
+	return c.redirect(portalSession.url);
+});
+
+// Serve React app for all other routes
+app.get("*", (c) => c.env.ASSETS.fetch(c.req.raw));
+
+// Export type for client-side usage with hono/client
+export type AppType = typeof app;
+export default app;

package/templates/saas/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"jsx": "react-jsx",
+		"strict": true,
+		"skipLibCheck": true,
+		"noEmit": true,
+		"types": ["@cloudflare/workers-types"],
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/client/*"]
+		}
+	},
+	"include": ["src"]
+}

package/templates/saas/vite.config.ts

@@ -0,0 +1,14 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [react(), tailwindcss(), cloudflare()],
+	resolve: {
+		alias: {
+			"@": resolve(__dirname, "./src/client"),
+		},
+	},
+});

package/templates/saas/wrangler.jsonc

@@ -0,0 +1,20 @@
+{
+	"name": "jack-template",
+	"main": "src/index.ts",
+	"compatibility_date": "2024-12-01",
+	"compatibility_flags": ["nodejs_compat"],
+	"assets": {
+		"binding": "ASSETS",
+		"directory": "dist/client",
+		"not_found_handling": "single-page-application",
+		// Required for API routes (/api/*) to work alongside static assets
+		// Without this, Cloudflare serves static files directly, bypassing the worker
+		"run_worker_first": true
+	},
+	"d1_databases": [
+		{
+			"binding": "DB",
+			"database_name": "jack-template-db"
+		}
+	]
+}