@0x0501/mystack 0.0.0-stage → 0.1.0-bootstrap.0

package/template/src/routes/sign-up.tsx

@@ -0,0 +1,135 @@
+import { createFileRoute, Link, redirect } from "@tanstack/react-router";
+import { useRef, useState } from "react";
+import { AuthDivider, GithubButton } from "@/components/auth/social";
+import { Turnstile, type TurnstileHandle } from "@/components/auth/turnstile";
+import {
+	AuthShell,
+	buttonClass,
+	Field,
+	inputClass,
+	linkClass,
+	mutedTextClass,
+	PageAlert,
+} from "@/components/shells";
+import { authClient } from "@/lib/auth-client";
+import { CAPTCHA_ENABLED } from "@/lib/captcha";
+import { GITHUB_OAUTH_ENABLED } from "@/lib/github";
+import { NOINDEX_META, pageTitle } from "@/lib/site";
+import * as m from "@/paraglide/messages";
+import { afterAuthTarget } from "@/utils/auth-redirect";
+
+export const Route = createFileRoute("/sign-up")({
+	validateSearch: (search: Record<string, unknown>) => search,
+	beforeLoad: ({ context: { session } }) => {
+		if (session?.user) {
+			throw redirect({ to: "/dashboard" });
+		}
+	},
+	head: () => ({
+		meta: [...NOINDEX_META, { title: pageTitle(m.auth_sign_up_title()) }],
+	}),
+	component: SignUpPage,
+});
+
+function SignUpPage() {
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [info, setInfo] = useState<string | null>(null);
+	const [pending, setPending] = useState(false);
+	const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+	const turnstile = useRef<TurnstileHandle>(null);
+
+	async function onSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		setPending(true);
+		setError(null);
+		setInfo(null);
+		if (CAPTCHA_ENABLED && !captchaToken) {
+			setError(m.auth_captcha_required());
+			setPending(false);
+			return;
+		}
+		const { error: err } = await authClient.signUp.email({
+			email,
+			password,
+			name,
+			callbackURL: afterAuthTarget(),
+			fetchOptions: {
+				headers: { "x-captcha-response": captchaToken ?? "" },
+			},
+		});
+		turnstile.current?.reset();
+		setPending(false);
+		if (err) {
+			setError(err.message ?? m.auth_sign_up_failed());
+			return;
+		}
+		setInfo(m.auth_check_email());
+	}
+
+	return (
+		<AuthShell title={m.auth_sign_up_title()}>
+			<form onSubmit={onSubmit}>
+				<Field label={m.field_display_name()}>
+					<input
+						className={inputClass}
+						type="text"
+						autoComplete="name"
+						required
+						value={name}
+						onChange={(ev) => setName(ev.target.value)}
+					/>
+				</Field>
+				<Field label={m.field_email()}>
+					<input
+						className={inputClass}
+						type="email"
+						autoComplete="email"
+						required
+						value={email}
+						onChange={(ev) => setEmail(ev.target.value)}
+					/>
+				</Field>
+				<Field label={m.field_password()} hint={m.auth_password_hint()}>
+					<input
+						className={inputClass}
+						type="password"
+						autoComplete="new-password"
+						required
+						minLength={8}
+						value={password}
+						onChange={(ev) => setPassword(ev.target.value)}
+					/>
+				</Field>
+				<Turnstile ref={turnstile} onToken={setCaptchaToken} />
+				{error ? <PageAlert>{error}</PageAlert> : null}
+				{info ? <PageAlert tone="success">{info}</PageAlert> : null}
+				<button
+					type="submit"
+					className={buttonClass}
+					disabled={pending || (CAPTCHA_ENABLED && !captchaToken)}
+				>
+					{pending ? m.auth_creating() : m.nav_sign_up()}
+				</button>
+			</form>
+
+			{GITHUB_OAUTH_ENABLED ? (
+				<>
+					<AuthDivider />
+					<div className="mt-4">
+						<GithubButton label={m.auth_signup_github()} />
+					</div>
+				</>
+			) : null}
+
+			<p className={`mt-4 text-center ${mutedTextClass}`}>
+				{m.auth_have_account()}{" "}
+				<Link to="/sign-in" className={linkClass}>
+					{m.nav_sign_in()}
+				</Link>
+			</p>
+		</AuthShell>
+	);
+}

package/template/src/routes/two-factor.tsx

@@ -0,0 +1,74 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	AuthShell,
+	buttonClass,
+	Field,
+	inputClass,
+	mutedTextClass,
+	PageAlert,
+} from "@/components/shells";
+import { authClient } from "@/lib/auth-client";
+import { NOINDEX_META, pageTitle } from "@/lib/site";
+import * as m from "@/paraglide/messages";
+import { afterAuthTarget } from "@/utils/auth-redirect";
+
+export const Route = createFileRoute("/two-factor")({
+	validateSearch: (search: Record<string, unknown>) => search,
+	head: () => ({
+		meta: [...NOINDEX_META, { title: pageTitle(m.auth_two_factor_title()) }],
+	}),
+	component: TwoFactorPage,
+});
+
+function TwoFactorPage() {
+	const [code, setCode] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [pending, setPending] = useState(false);
+
+	async function onSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		setPending(true);
+		setError(null);
+		const { error: err } = await authClient.twoFactor.verifyTotp({
+			code,
+		});
+		if (err) {
+			// Try backup code if TOTP fails.
+			const backup = await authClient.twoFactor.verifyBackupCode({
+				code,
+			});
+			setPending(false);
+			if (backup.error) {
+				setError(err.message ?? m.auth_invalid_code());
+				return;
+			}
+		} else {
+			setPending(false);
+		}
+		window.location.href = afterAuthTarget();
+	}
+
+	return (
+		<AuthShell title={m.auth_two_factor_title()}>
+			<p className={`mb-4 ${mutedTextClass}`}>{m.auth_two_factor_blurb()}</p>
+			<form onSubmit={onSubmit}>
+				<Field label={m.field_code()}>
+					<input
+						className={inputClass}
+						type="text"
+						inputMode="numeric"
+						autoComplete="one-time-code"
+						required
+						value={code}
+						onChange={(ev) => setCode(ev.target.value)}
+					/>
+				</Field>
+				{error ? <PageAlert>{error}</PageAlert> : null}
+				<button type="submit" className={buttonClass} disabled={pending}>
+					{pending ? m.auth_verifying() : m.auth_verify()}
+				</button>
+			</form>
+		</AuthShell>
+	);
+}

package/template/src/server/README.md

@@ -0,0 +1,3 @@
+# Server functions
+
+The single home for TanStack Start server functions (`createServerFn`). Define them here and import into routes/components; keep the actual business logic in `src/services/` and call it from these thin server entrypoints.

package/template/src/server/account-security.ts

@@ -0,0 +1,163 @@
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeaders } from "@tanstack/react-start/server";
+import { z } from "zod";
+import { betterAuthMiddleware } from "@/middlewares/better-auth";
+import {
+	changePasswordWithOtp,
+	checkPasswordChangeOtp,
+	disableTwoFactorWithCode,
+	enableTwoFactorWithOtp,
+	reauthenticate,
+	regenerateBackupCodesWithCode,
+	removePasskeyWithFreshSession,
+	requestPasswordChangeOtp,
+	requestReauthOtp,
+} from "@/services/account-security";
+import { validated } from "@/utils/api-error";
+import { MAX_PASSWORD_LENGTH, MIN_PASSWORD_LENGTH } from "@/utils/input-rules";
+
+// Security-page server functions. betterAuthMiddleware only — auth.api runs on
+// the raw connection; an open RLS transaction would buy nothing.
+//
+// One read function per page, not one per panel. A server function is its own
+// HTTP request and has to establish the caller itself, so splitting the account
+// page's panels across two of them bought two session reads for one render.
+
+export const getSecurityOverview = createServerFn({ method: "GET" })
+	.middleware([betterAuthMiddleware])
+	.handler(async ({ context }) => {
+		const headers = getRequestHeaders();
+		const session = await context.auth.api.getSession({ headers });
+		if (!session?.user) return null;
+		const [accounts, passkeys, sessions] = await Promise.all([
+			context.auth.api.listUserAccounts({ headers }),
+			context.auth.api.listPasskeys({ headers }),
+			context.auth.api.listSessions({ headers }),
+		]);
+		const u = session.user as typeof session.user & {
+			twoFactorEnabled?: boolean | null;
+			locale?: string | null;
+		};
+		return {
+			email: session.user.email,
+			name: session.user.name ?? null,
+			locale: u.locale ?? null,
+			emailVerified: Boolean(session.user.emailVerified),
+			hasPassword: accounts.some((a) => a.providerId === "credential"),
+			githubLinked: accounts.some((a) => a.providerId === "github"),
+			twoFactorEnabled: Boolean(u.twoFactorEnabled),
+			sessions: sessions.map((s) => ({
+				id: s.id,
+				token: s.token,
+				createdAt: new Date(s.createdAt).toISOString(),
+				expiresAt: new Date(s.expiresAt).toISOString(),
+				ipAddress: s.ipAddress ?? null,
+				userAgent: s.userAgent ?? null,
+				isCurrent: s.token === session.session.token,
+			})),
+			passkeys: passkeys.map((p) => ({
+				id: p.id,
+				name: p.name ?? null,
+				createdAt: p.createdAt ? new Date(p.createdAt).toISOString() : null,
+			})),
+		};
+	});
+
+// `revokeOtherSessions` keeps its own authoritative read: a privileged
+// mutation must not trust the cookie cache, which may still be serving a
+// session that was revoked seconds ago.
+export const revokeOtherSessions = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.handler(async ({ context }) => {
+		const headers = getRequestHeaders();
+		const session = await context.auth.api.getSession({
+			headers,
+			query: { disableCookieCache: true },
+		});
+		if (!session?.user) return { ok: false as const, code: "unauthorized" };
+		await context.auth.api.revokeOtherSessions({ headers });
+		return { ok: true as const };
+	});
+
+export const requestPasswordOtp = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.handler(({ context }) =>
+		requestPasswordChangeOtp(context.auth, getRequestHeaders()),
+	);
+
+export const verifyPasswordOtp = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.validator(validated(z.object({ otp: z.string().trim().min(1).max(16) })))
+	.handler(({ context, data }) =>
+		checkPasswordChangeOtp(context.auth, getRequestHeaders(), data),
+	);
+
+export const confirmPasswordChange = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.validator(
+		validated(
+			z.object({
+				otp: z.string().trim().min(1).max(16),
+				newPassword: z
+					.string()
+					.min(MIN_PASSWORD_LENGTH)
+					.max(MAX_PASSWORD_LENGTH),
+			}),
+		),
+	)
+	.handler(({ context, data }) =>
+		changePasswordWithOtp(context.auth, getRequestHeaders(), data),
+	);
+
+export const requestReauthCode = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.handler(({ context }) =>
+		requestReauthOtp(context.auth, getRequestHeaders()),
+	);
+
+export const confirmReauth = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.validator(
+		validated(
+			z.object({
+				code: z.string().trim().min(1).max(32),
+				backupCode: z.boolean().optional(),
+			}),
+		),
+	)
+	.handler(({ context, data }) =>
+		reauthenticate(context.auth, getRequestHeaders(), data),
+	);
+
+export const beginTwoFactorEnable = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.validator(validated(z.object({ otp: z.string().trim().min(1).max(16) })))
+	.handler(({ context, data }) =>
+		enableTwoFactorWithOtp(context.auth, getRequestHeaders(), data),
+	);
+
+const secondFactorInput = z.object({
+	code: z.string().trim().min(1).max(32),
+	backupCode: z.boolean().optional(),
+});
+
+export const disableTwoFactor = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.validator(validated(secondFactorInput))
+	.handler(({ context, data }) =>
+		disableTwoFactorWithCode(context.auth, getRequestHeaders(), data),
+	);
+
+export const regenerateBackupCodes = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.validator(validated(secondFactorInput))
+	.handler(({ context, data }) =>
+		regenerateBackupCodesWithCode(context.auth, getRequestHeaders(), data),
+	);
+
+export const removePasskey = createServerFn({ method: "POST" })
+	.middleware([betterAuthMiddleware])
+	.validator(validated(z.object({ passkeyId: z.string().trim().min(1) })))
+	.handler(({ context, data }) =>
+		removePasskeyWithFreshSession(context.auth, getRequestHeaders(), data),
+	);

package/template/src/server/admin-audit.ts

@@ -0,0 +1,37 @@
+import { createServerFn } from "@tanstack/react-start";
+import { desc } from "drizzle-orm";
+import { z } from "zod";
+import { adminAction } from "@/db/schema";
+import { adminMiddleware } from "@/middlewares/admin";
+import { databaseMiddleware } from "@/middlewares/database";
+import { validated } from "@/utils/api-error";
+
+export const listAuditEvents = createServerFn({ method: "GET" })
+	.middleware([databaseMiddleware, adminMiddleware])
+	.validator(
+		validated(
+			z.object({
+				limit: z.number().int().min(1).max(200).default(50),
+			}),
+		),
+	)
+	.handler(async ({ context, data }) => {
+		const rows = await context.db
+			.select({
+				id: adminAction.id,
+				actorId: adminAction.actorId,
+				action: adminAction.action,
+				targetType: adminAction.targetType,
+				targetId: adminAction.targetId,
+				detail: adminAction.detail,
+				createdAt: adminAction.createdAt,
+			})
+			.from(adminAction)
+			.orderBy(desc(adminAction.createdAt))
+			.limit(data.limit);
+
+		return rows.map((r) => ({
+			...r,
+			createdAt: r.createdAt.toISOString(),
+		}));
+	});

package/template/src/server/admin-users.ts

@@ -0,0 +1,112 @@
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeaders } from "@tanstack/react-start/server";
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+import { user } from "@/db/schema";
+import { adminMiddleware } from "@/middlewares/admin";
+import { databaseMiddleware } from "@/middlewares/database";
+import {
+	assertAdminMayActOn,
+	assertNotLastAdmin,
+	isAdminRole,
+	logAdminAction,
+	revokeUserCredentials,
+} from "@/services/admin-security";
+import { applyAdminUserUpdate, listAdminUsers } from "@/services/admin-users";
+import { HttpError, validated } from "@/utils/api-error";
+
+const listSchema = z.object({
+	page: z.number().int().min(0).default(0),
+	pageSize: z.number().int().min(1).max(100).default(20),
+	search: z.string().default(""),
+	sort: z.object({ id: z.string(), desc: z.boolean().optional() }).optional(),
+	filters: z
+		.object({
+			role: z.string().optional(),
+			banned: z.string().optional(),
+		})
+		.default({}),
+});
+
+export const getUsers = createServerFn({ method: "GET" })
+	.middleware([databaseMiddleware, adminMiddleware])
+	.validator(validated(listSchema))
+	.handler(({ context, data }) => listAdminUsers(context.db, data));
+
+export const updateUser = createServerFn({ method: "POST" })
+	.middleware([databaseMiddleware, adminMiddleware])
+	.validator(
+		validated(
+			z.object({
+				userId: z.string().min(1),
+				emailVerified: z.boolean(),
+				// Superadmin role is not assignable from UI (SQL bootstrap only).
+				role: z.enum(["user", "admin"]).optional(),
+				banned: z.boolean(),
+			}),
+		),
+	)
+	.handler(async ({ context, data }) => {
+		const actorId = context.session.user.id;
+		const [current] = await context.db
+			.select({
+				role: user.role,
+				banned: user.banned,
+				emailVerified: user.emailVerified,
+			})
+			.from(user)
+			.where(eq(user.id, data.userId))
+			.limit(1);
+		if (!current) {
+			throw new HttpError({
+				status: 404,
+				error: "not_found",
+				message: "User not found.",
+			});
+		}
+
+		if (data.banned && !current.banned && actorId === data.userId) {
+			throw new HttpError({
+				status: 403,
+				error: "forbidden",
+				message: "You cannot ban your own account.",
+			});
+		}
+		assertAdminMayActOn({
+			actorId,
+			targetId: data.userId,
+			targetRole: current.role,
+			nextRole: data.role,
+			banning: data.banned && !current.banned,
+		});
+
+		const demotingAdmin =
+			data.role !== undefined &&
+			isAdminRole(current.role) &&
+			!isAdminRole(data.role);
+		const banningAdmin =
+			data.banned && !current.banned && isAdminRole(current.role);
+		if (demotingAdmin || banningAdmin) {
+			await assertNotLastAdmin(context.db, data.userId);
+		}
+
+		const headers = getRequestHeaders();
+		await applyAdminUserUpdate(
+			{
+				db: context.db,
+				auth: {
+					setRole: (args) => context.auth.api.setRole(args),
+					banUser: (args) => context.auth.api.banUser(args),
+					unbanUser: (args) => context.auth.api.unbanUser(args),
+				},
+				headers,
+				actorId,
+				log: (entry) => logAdminAction(context.db, entry),
+				revokeCredentials: (userId) =>
+					revokeUserCredentials(context.db, userId),
+			},
+			current,
+			data,
+		);
+		return { ok: true };
+	});

package/template/src/server/auth.ts

@@ -0,0 +1,44 @@
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeaders } from "@tanstack/react-start/server";
+import { betterAuthMiddleware } from "@/middlewares/better-auth";
+
+export type RootSession = {
+	user: {
+		id: string;
+		email: string;
+		name: string;
+		emailVerified: boolean;
+		role: string | null;
+		twoFactorEnabled: boolean;
+		locale: string | null;
+	};
+};
+
+/**
+ * One session read per request for the root route.
+ * Child routes should prefer `context.session` when a full session is enough;
+ * privileged surfaces may still re-read with cookie-cache disabled.
+ */
+export const getSession = createServerFn({ method: "GET" })
+	.middleware([betterAuthMiddleware])
+	.handler(async ({ context }): Promise<RootSession | null> => {
+		const headers = getRequestHeaders();
+		const session = await context.auth.api.getSession({ headers });
+		if (!session?.user) return null;
+		const u = session.user as typeof session.user & {
+			role?: string | null;
+			twoFactorEnabled?: boolean | null;
+			locale?: string | null;
+		};
+		return {
+			user: {
+				id: session.user.id,
+				email: session.user.email,
+				name: session.user.name,
+				emailVerified: Boolean(session.user.emailVerified),
+				role: u.role ?? null,
+				twoFactorEnabled: Boolean(u.twoFactorEnabled),
+				locale: u.locale ?? null,
+			},
+		};
+	});

package/template/src/server/demo-checkout.ts

@@ -0,0 +1,67 @@
+/**
+ * Demo checkout server fns. sessionMiddleware + explicit withRlsService:
+ * system_config and purchase writes need service GUC; provider HTTP must not
+ * run inside a held transaction (client-bundle: import providers in handler).
+ */
+import { createServerFn } from "@tanstack/react-start";
+import { z } from "zod";
+import { withRlsService } from "@/db/helper";
+import { sessionMiddleware } from "@/middlewares/protected";
+import { startDemoCheckout } from "@/services/demo-checkout";
+import { getPaymentToggles } from "@/services/payment-toggles";
+import { createPendingPurchase } from "@/services/purchase";
+import { validated } from "@/utils/api-error";
+
+// sessionMiddleware → betterAuth → database (raw db, no user RLS tx).
+// Purchase / system_config writes use withRlsService; provider HTTP stays outside.
+
+export const getDemoCheckoutMethods = createServerFn({ method: "GET" })
+	.middleware([sessionMiddleware])
+	.handler(async ({ context }) => {
+		const { isPaymentProviderConfigured } = await import(
+			"@/services/payment-providers"
+		);
+		const toggles = await withRlsService(context.db, (tx) =>
+			getPaymentToggles(tx),
+		);
+		return {
+			stripe: toggles.stripe && isPaymentProviderConfigured("stripe"),
+			creem: toggles.creem && isPaymentProviderConfigured("creem"),
+			nowpayments:
+				toggles.nowpayments && isPaymentProviderConfigured("nowpayments"),
+		};
+	});
+
+export const startDemoPurchase = createServerFn({ method: "POST" })
+	.middleware([sessionMiddleware])
+	.validator(
+		validated(
+			z.object({
+				provider: z.enum(["stripe", "creem", "nowpayments"]),
+			}),
+		),
+	)
+	.handler(async ({ context, data }) => {
+		const { createHostedCheckoutSession, isPaymentProviderConfigured } =
+			await import("@/services/payment-providers");
+
+		// The order (gate → host session → pending row) lives in
+		// `startDemoCheckout` and is covered there. This handler only supplies
+		// the Worker-side edges: RLS-scoped reads and writes, and provider HTTP
+		// that must stay outside any held transaction.
+		return startDemoCheckout(
+			{
+				getToggles: () =>
+					withRlsService(context.db, (tx) => getPaymentToggles(tx)),
+				isConfigured: isPaymentProviderConfigured,
+				createHostedSession: createHostedCheckoutSession,
+				createPendingPurchase: (input) =>
+					withRlsService(context.db, (tx) => createPendingPurchase(tx, input)),
+			},
+			{
+				userId: context.session.user.id,
+				userEmail: context.session.user.email,
+				provider: data.provider,
+			},
+		);
+	});