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

package/template/src/routes/api/webhooks/creem.ts

@@ -0,0 +1,69 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { withRlsService } from "@/db/helper";
+import { env } from "@/env";
+import { webhookBodyLimitMiddleware } from "@/middlewares/body-limit";
+import { databaseMiddleware } from "@/middlewares/database";
+import { handleCreemWebhook } from "@/services/creem";
+import { APIError, methodNotAllowed } from "@/utils/api-error";
+
+// Creem checkout webhook: a thin shell over the framework-agnostic handler.
+// Fulfillment runs under service RLS context. HTTP contract: a valid signature
+// answers 200 for every mapped outcome so Creem stops retrying a delivered
+// event; a bad or missing signature answers 400 with no effect; a genuine
+// processing failure throws and answers 5xx so Creem retries — that retry is
+// what makes the purchase-paid hook exactly-once.
+export const Route = createFileRoute("/api/webhooks/creem")({
+	server: {
+		handlers: ({ createHandlers }) =>
+			createHandlers({
+				// Answers a browser, which would otherwise get the SPA shell.
+				GET: { handler: () => methodNotAllowed("POST") },
+				POST: {
+					// Public and unauthenticated: the body is capped before anything
+					// reads or hashes it.
+					middleware: [databaseMiddleware, webhookBodyLimitMiddleware],
+					handler: async ({ request, context }) => {
+						const secret = env.CREEM_WEBHOOK_SECRET;
+						if (!secret) {
+							return APIError({
+								status: 503,
+								error: "not_configured",
+								message: "Creem is not configured.",
+							});
+						}
+
+						const result = await withRlsService(context.db, (tx) =>
+							handleCreemWebhook(tx, {
+								rawBody: context.rawBody,
+								signature:
+									request.headers.get("creem-signature") ??
+									request.headers.get("x-creem-signature"),
+								secret,
+							}),
+						);
+
+						if (result === "invalid_signature") {
+							return APIError({
+								status: 400,
+								error: "invalid_signature",
+								message: "Signature verification failed.",
+							});
+						}
+						if (result === "invalid_payload") {
+							return APIError({
+								status: 400,
+								error: "invalid_payload",
+								message: "Request body is not valid JSON.",
+							});
+						}
+						if (result === "unknown_order") {
+							console.error(
+								"[creem] event references an unknown purchase — not fulfilled",
+							);
+						}
+						return Response.json({ result }, { status: 200 });
+					},
+				},
+			}),
+	},
+});

package/template/src/routes/api/webhooks/nowpayments.ts

@@ -0,0 +1,62 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { withRlsService } from "@/db/helper";
+import { env } from "@/env";
+import { webhookBodyLimitMiddleware } from "@/middlewares/body-limit";
+import { databaseMiddleware } from "@/middlewares/database";
+import { handleNowPaymentsWebhook } from "@/services/nowpayments";
+import { APIError, methodNotAllowed } from "@/utils/api-error";
+
+// NowPayments IPN callback: a thin shell over the framework-agnostic handler.
+// Fulfillment runs under service RLS context. HTTP contract: a valid signature
+// answers 200 for every mapped outcome so NowPayments stops retrying a
+// delivered notification; a bad or missing signature answers 400 with no
+// effect; a genuine processing failure throws and answers 5xx so NowPayments
+// retries — that retry is what makes the purchase-paid hook exactly-once.
+export const Route = createFileRoute("/api/webhooks/nowpayments")({
+	server: {
+		handlers: ({ createHandlers }) =>
+			createHandlers({
+				// Answers a browser, which would otherwise get the SPA shell.
+				GET: { handler: () => methodNotAllowed("POST") },
+				POST: {
+					// Public and unauthenticated: the body is capped before anything
+					// reads or hashes it.
+					middleware: [databaseMiddleware, webhookBodyLimitMiddleware],
+					handler: async ({ request, context }) => {
+						const ipnKey = env.NOW_PAYMENTS_IPN_KEY;
+						if (!ipnKey) {
+							return APIError({
+								status: 503,
+								error: "not_configured",
+								message: "NowPayments is not configured.",
+							});
+						}
+
+						const result = await withRlsService(context.db, (tx) =>
+							handleNowPaymentsWebhook(tx, {
+								rawBody: context.rawBody,
+								signature: request.headers.get("x-nowpayments-sig"),
+								ipnKey,
+							}),
+						);
+
+						if (result === "invalid_signature") {
+							return APIError({
+								status: 400,
+								error: "invalid_signature",
+								message: "Signature verification failed.",
+							});
+						}
+						if (result === "unknown_order") {
+							// Signed, but joins no known Purchase — nothing to do. Still 200
+							// so NowPayments stops retrying a callback we cannot act on.
+							console.error(
+								"[nowpayments] IPN references an unknown purchase — not fulfilled",
+							);
+						}
+						return Response.json({ result }, { status: 200 });
+					},
+				},
+			}),
+	},
+});

package/template/src/routes/api/webhooks/stripe.ts

@@ -0,0 +1,74 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { withRlsService } from "@/db/helper";
+import { env } from "@/env";
+import { webhookBodyLimitMiddleware } from "@/middlewares/body-limit";
+import { databaseMiddleware } from "@/middlewares/database";
+import { handleStripeWebhook } from "@/services/stripe";
+import { APIError, methodNotAllowed } from "@/utils/api-error";
+
+// Stripe Checkout webhook: a thin shell over the framework-agnostic handler.
+// Fulfillment runs under service RLS context. HTTP contract: a valid signature
+// answers 200 for every mapped outcome so Stripe stops retrying a delivered
+// event; a bad or missing signature answers 400 with no effect; a genuine
+// processing failure throws and answers 5xx so Stripe retries — that retry is
+// what makes the purchase-paid hook exactly-once.
+export const Route = createFileRoute("/api/webhooks/stripe")({
+	server: {
+		handlers: ({ createHandlers }) =>
+			createHandlers({
+				// Answers a browser, which would otherwise get the SPA shell.
+				GET: { handler: () => methodNotAllowed("POST") },
+				POST: {
+					// Public and unauthenticated: the body is capped before anything
+					// reads or hashes it.
+					middleware: [databaseMiddleware, webhookBodyLimitMiddleware],
+					handler: async ({ request, context }) => {
+						const secret = env.STRIPE_WEBHOOK_SECRET;
+						if (!secret) {
+							return APIError({
+								status: 503,
+								error: "not_configured",
+								message: "Stripe is not configured.",
+							});
+						}
+
+						const result = await withRlsService(context.db, (tx) =>
+							handleStripeWebhook(tx, {
+								rawBody: context.rawBody,
+								signature: request.headers.get("stripe-signature"),
+								secret,
+							}),
+						);
+
+						if (result === "invalid_signature") {
+							return APIError({
+								status: 400,
+								error: "invalid_signature",
+								message: "Signature verification failed.",
+							});
+						}
+						if (result === "invalid_payload") {
+							return APIError({
+								status: 400,
+								error: "invalid_payload",
+								message: "Request body is not valid JSON.",
+							});
+						}
+						if (result === "amount_mismatch") {
+							// The one branch designed to fail closed. It answers 200 so
+							// Stripe stops retrying, but it must not pass unnoticed.
+							console.error(
+								"[stripe] reported amount does not match the Purchase row — not fulfilled",
+							);
+						}
+						if (result === "unknown_order") {
+							console.error(
+								"[stripe] event references an unknown purchase — not fulfilled",
+							);
+						}
+						return Response.json({ result }, { status: 200 });
+					},
+				},
+			}),
+	},
+});

package/template/src/routes/dashboard/account.tsx

@@ -0,0 +1,430 @@
+import { Select } from "@base-ui/react/select";
+import { Tabs } from "@base-ui/react/tabs";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import {
+	buttonClass,
+	buttonSecondaryClass,
+	DashboardShell,
+	Field,
+	inputClass,
+	mutedTextClass,
+} from "@/components/shells";
+import { sessionQueryOptions } from "@/integrations/better-auth/session-query";
+import { authClient } from "@/lib/auth-client";
+import * as m from "@/paraglide/messages";
+import {
+	beginTwoFactorEnable,
+	confirmPasswordChange,
+	disableTwoFactor,
+	getSecurityOverview,
+	removePasskey,
+	requestPasswordOtp,
+	requestReauthCode,
+	revokeOtherSessions,
+} from "@/server/account-security";
+import { accountSecurityErrorMessage } from "@/utils/auth-errors";
+
+/** One key for the page: profile, security, passkeys and sessions load together. */
+const SECURITY_OVERVIEW_KEY = ["security-overview"] as const;
+
+const overviewQuery = {
+	queryKey: SECURITY_OVERVIEW_KEY,
+	queryFn: () => getSecurityOverview(),
+};
+
+export const Route = createFileRoute("/dashboard/account")({
+	component: AccountPage,
+	// Every panel on the page reads this one payload, so there is nothing to
+	// render before it resolves.
+	loader: ({ context }) => context.queryClient.ensureQueryData(overviewQuery),
+});
+
+function AccountPage() {
+	// `/dashboard` narrowed `session` to signed-in for this whole subtree.
+	const { session } = Route.useRouteContext();
+	const qc = useQueryClient();
+	const router = useRouter();
+	const overview = useQuery(overviewQuery);
+
+	const sessionLocale =
+		(session.user as { locale?: string | null }).locale ?? "en";
+	const [name, setName] = useState(session.user.name);
+	const [locale, setLocale] = useState(sessionLocale);
+	const [message, setMessage] = useState<string | null>(null);
+	const [otp, setOtp] = useState("");
+	const [newPassword, setNewPassword] = useState("");
+	const [totpUri, setTotpUri] = useState<string | null>(null);
+	const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
+	const [factorCode, setFactorCode] = useState("");
+
+	const invalidate = () => {
+		void qc.invalidateQueries({ queryKey: SECURITY_OVERVIEW_KEY });
+		void qc
+			.invalidateQueries({ queryKey: sessionQueryOptions.queryKey })
+			.then(() => router.invalidate());
+	};
+
+	async function saveProfile(e: React.FormEvent) {
+		e.preventDefault();
+		setMessage(null);
+		const { error } = await authClient.updateUser({ name, locale });
+		setMessage(
+			error
+				? (error.message ?? m.account_update_failed())
+				: m.account_profile_saved(),
+		);
+		invalidate();
+	}
+
+	const requestOtp = useMutation({
+		mutationFn: () => requestPasswordOtp(),
+		onSuccess: (r) => {
+			setMessage(
+				r.ok
+					? m.account_otp_sent({ seconds: r.retryAfterSeconds })
+					: accountSecurityErrorMessage(r.code),
+			);
+		},
+	});
+
+	const changePw = useMutation({
+		mutationFn: () => confirmPasswordChange({ data: { otp, newPassword } }),
+		onSuccess: (r) => {
+			setMessage(
+				r.ok
+					? m.account_password_updated()
+					: accountSecurityErrorMessage(r.code),
+			);
+			if (r.ok) {
+				setOtp("");
+				setNewPassword("");
+			}
+			invalidate();
+		},
+	});
+
+	const reauthFor2fa = useMutation({
+		mutationFn: () => requestReauthCode(),
+		onSuccess: (r) => {
+			setMessage(
+				r.ok ? m.account_reauth_emailed() : accountSecurityErrorMessage(r.code),
+			);
+		},
+	});
+
+	const enable2fa = useMutation({
+		mutationFn: () => beginTwoFactorEnable({ data: { otp } }),
+		onSuccess: (r) => {
+			if (r.ok) {
+				setTotpUri(r.totpURI);
+				setBackupCodes(r.backupCodes);
+				setMessage(m.account_2fa_enroll_hint());
+			} else setMessage(accountSecurityErrorMessage(r.code));
+			invalidate();
+		},
+	});
+
+	const disable2fa = useMutation({
+		mutationFn: () =>
+			disableTwoFactor({ data: { code: factorCode, backupCode: false } }),
+		onSuccess: (r) => {
+			setMessage(
+				r.ok ? m.account_2fa_disabled() : accountSecurityErrorMessage(r.code),
+			);
+			invalidate();
+		},
+	});
+
+	const revokeOthers = useMutation({
+		mutationFn: () => revokeOtherSessions(),
+		onSuccess: (r) => {
+			setMessage(
+				r.ok ? m.account_sessions_revoked() : m.account_err_unauthorized(),
+			);
+			invalidate();
+		},
+	});
+
+	const dropPasskey = useMutation({
+		mutationFn: (passkeyId: string) => removePasskey({ data: { passkeyId } }),
+		onSuccess: (r) => {
+			setMessage(
+				r.ok
+					? m.account_passkey_removed()
+					: accountSecurityErrorMessage(r.code),
+			);
+			invalidate();
+		},
+	});
+
+	const o = overview.data;
+
+	useEffect(() => {
+		if (o?.locale) setLocale(o.locale);
+	}, [o?.locale]);
+
+	return (
+		<DashboardShell title={m.account_title()}>
+			{message ? (
+				<p className="mb-4 text-sm text-foreground">{message}</p>
+			) : null}
+
+			<Tabs.Root defaultValue="profile">
+				<Tabs.List className="ui-tabs-list">
+					<Tabs.Tab className="ui-tabs-tab" value="profile">
+						{m.account_tab_profile()}
+					</Tabs.Tab>
+					<Tabs.Tab className="ui-tabs-tab" value="security">
+						{m.account_tab_security()}
+					</Tabs.Tab>
+					<Tabs.Tab className="ui-tabs-tab" value="sessions">
+						{m.account_tab_sessions()}
+					</Tabs.Tab>
+				</Tabs.List>
+
+				<Tabs.Panel className="ui-tabs-panel" value="profile">
+					<form onSubmit={saveProfile} className="max-w-md">
+						<Field label={m.field_display_name()}>
+							<input
+								className={inputClass}
+								value={name}
+								onChange={(ev) => setName(ev.target.value)}
+							/>
+						</Field>
+						<Field label={m.field_locale()}>
+							<Select.Root
+								value={locale}
+								onValueChange={(v) => {
+									if (typeof v === "string") setLocale(v);
+								}}
+							>
+								<Select.Trigger className="ui-select-trigger">
+									<Select.Value>
+										{(value: string | null) =>
+											value === "de" ? m.locale_de() : m.locale_en()
+										}
+									</Select.Value>
+									<Select.Icon className="ui-select-icon">
+										<span aria-hidden>▾</span>
+									</Select.Icon>
+								</Select.Trigger>
+								<Select.Portal>
+									<Select.Positioner sideOffset={4} className="ui-positioner">
+										<Select.Popup className="ui-select-popup">
+											<Select.Item className="ui-select-item" value="en">
+												<Select.ItemText>{m.locale_en()}</Select.ItemText>
+											</Select.Item>
+											<Select.Item className="ui-select-item" value="de">
+												<Select.ItemText>{m.locale_de()}</Select.ItemText>
+											</Select.Item>
+										</Select.Popup>
+									</Select.Positioner>
+								</Select.Portal>
+							</Select.Root>
+						</Field>
+						<button type="submit" className={`${buttonClass} max-w-xs`}>
+							{m.account_save_profile()}
+						</button>
+					</form>
+				</Tabs.Panel>
+
+				<Tabs.Panel className="ui-tabs-panel" value="security">
+					<section className="mb-8">
+						{overview.isLoading ? (
+							<p className={mutedTextClass}>{m.common_loading()}</p>
+						) : o ? (
+							<ul className="list-inside list-disc text-sm text-foreground">
+								<li>
+									{m.account_email_label()}: {o.email} (
+									{o.emailVerified
+										? m.account_verified()
+										: m.account_unverified()}
+									)
+								</li>
+								<li>
+									{m.account_password_label()}:{" "}
+									{o.hasPassword
+										? m.account_password_set()
+										: m.account_password_none()}
+								</li>
+								<li>
+									{m.account_github_label()}:{" "}
+									{o.githubLinked
+										? m.account_github_linked()
+										: m.account_github_not_linked()}
+								</li>
+								<li>
+									{m.account_2fa_label()}:{" "}
+									{o.twoFactorEnabled ? m.account_on() : m.account_off()}
+								</li>
+								<li>
+									{m.account_passkeys_label()}: {o.passkeys.length}
+								</li>
+							</ul>
+						) : null}
+					</section>
+
+					<section className="mb-8 max-w-md">
+						<h2 className="mb-3 text-lg font-medium">
+							{m.account_change_password_title()}
+						</h2>
+						<button
+							type="button"
+							className={`${buttonClass} mb-3 max-w-xs`}
+							disabled={requestOtp.isPending}
+							onClick={() => requestOtp.mutate()}
+						>
+							{m.account_send_otp()}
+						</button>
+						<form
+							onSubmit={(e) => {
+								e.preventDefault();
+								changePw.mutate();
+							}}
+						>
+							<Field label={m.account_field_otp()}>
+								<input
+									className={inputClass}
+									value={otp}
+									onChange={(e) => setOtp(e.target.value)}
+								/>
+							</Field>
+							<Field label={m.account_field_new_password()}>
+								<input
+									className={inputClass}
+									type="password"
+									value={newPassword}
+									onChange={(e) => setNewPassword(e.target.value)}
+								/>
+							</Field>
+							<button type="submit" className={`${buttonClass} max-w-xs`}>
+								{m.account_update_password()}
+							</button>
+						</form>
+					</section>
+
+					<section className="mb-8 max-w-md">
+						<h2 className="mb-3 text-lg font-medium">
+							{m.account_section_two_factor()}
+						</h2>
+						{!o?.twoFactorEnabled ? (
+							<>
+								<button
+									type="button"
+									className={`${buttonClass} mb-2 max-w-xs`}
+									onClick={() => reauthFor2fa.mutate()}
+								>
+									{m.account_email_enrollment_code()}
+								</button>
+								<form
+									onSubmit={(e) => {
+										e.preventDefault();
+										enable2fa.mutate();
+									}}
+								>
+									<Field label={m.account_field_enrollment_otp()}>
+										<input
+											className={inputClass}
+											value={otp}
+											onChange={(e) => setOtp(e.target.value)}
+										/>
+									</Field>
+									<button type="submit" className={`${buttonClass} max-w-xs`}>
+										{m.account_begin_2fa()}
+									</button>
+								</form>
+								{totpUri ? (
+									<p className="mt-2 break-all font-mono text-xs">{totpUri}</p>
+								) : null}
+								{backupCodes ? (
+									<pre className="mt-2 text-xs">{backupCodes.join("\n")}</pre>
+								) : null}
+							</>
+						) : (
+							<form
+								onSubmit={(e) => {
+									e.preventDefault();
+									disable2fa.mutate();
+								}}
+							>
+								<Field label={m.account_field_totp_disable()}>
+									<input
+										className={inputClass}
+										value={factorCode}
+										onChange={(e) => setFactorCode(e.target.value)}
+									/>
+								</Field>
+								<button type="submit" className={`${buttonClass} max-w-xs`}>
+									{m.account_disable_2fa()}
+								</button>
+							</form>
+						)}
+					</section>
+
+					<section className="mb-8">
+						<h2 className="mb-3 text-lg font-medium">
+							{m.account_section_passkeys()}
+						</h2>
+						{o?.passkeys.length ? (
+							<ul className="space-y-2 text-sm">
+								{o.passkeys.map((pk) => (
+									<li key={pk.id} className="flex items-center gap-3">
+										<span>
+											{pk.name ?? pk.id}
+											{pk.createdAt ? ` · ${pk.createdAt}` : ""}
+										</span>
+										<button
+											type="button"
+											className={`${buttonClass} w-auto px-2 py-1 text-xs`}
+											onClick={() => dropPasskey.mutate(pk.id)}
+										>
+											{m.account_remove()}
+										</button>
+									</li>
+								))}
+							</ul>
+						) : (
+							<p className={mutedTextClass}>{m.account_no_passkeys()}</p>
+						)}
+						<p className="mt-2 text-xs text-muted-foreground">
+							{m.account_passkey_hint()}
+						</p>
+					</section>
+				</Tabs.Panel>
+
+				<Tabs.Panel className="ui-tabs-panel" value="sessions">
+					<button
+						type="button"
+						className={`${buttonClass} mb-3 max-w-xs`}
+						onClick={() => revokeOthers.mutate()}
+					>
+						{m.account_revoke_other_sessions()}
+					</button>
+					{overview.data?.sessions ? (
+						<ul className="space-y-1 text-xs text-muted-foreground">
+							{overview.data.sessions.map((s) => (
+								<li key={s.id}>
+									{s.isCurrent ? `${m.account_session_current()} · ` : ""}
+									{s.createdAt}
+									{s.ipAddress ? ` · ${s.ipAddress}` : ""}
+								</li>
+							))}
+						</ul>
+					) : null}
+					<button
+						type="button"
+						className={`${buttonSecondaryClass} mt-6 w-full max-w-xs`}
+						onClick={async () => {
+							await authClient.signOut();
+							window.location.href = "/sign-in";
+						}}
+					>
+						{m.action_sign_out()}
+					</button>
+				</Tabs.Panel>
+			</Tabs.Root>
+		</DashboardShell>
+	);
+}