@usequark/quark-create-app 1.23.11

package/templates/base-project/apps/web/src/app/api/users/[id]/route.js

@@ -0,0 +1,54 @@
+import { validateBody, withCsrfProtection } from "@techstream/quark-core";
+import { user, userUpdateSchema } from "@techstream/quark-db";
+import { NextResponse } from "next/server";
+import { requireRole } from "@/lib/auth-middleware";
+import { handleError } from "../../error-handler";
+
+export async function GET(_request, { params }) {
+	try {
+		await requireRole("admin");
+		const { id } = await params;
+		const foundUser = await user.findById(id);
+		if (!foundUser) {
+			return NextResponse.json({ message: "User not found" }, { status: 404 });
+		}
+		return NextResponse.json(foundUser);
+	} catch (error) {
+		return handleError(error);
+	}
+}
+
+export const PATCH = withCsrfProtection(async (request, { params }) => {
+	try {
+		await requireRole("admin");
+		const { id } = await params;
+
+		const existingUser = await user.findById(id);
+		if (!existingUser) {
+			return NextResponse.json({ message: "User not found" }, { status: 404 });
+		}
+
+		const data = await validateBody(request, userUpdateSchema);
+		const updatedUser = await user.update(id, data);
+		return NextResponse.json(updatedUser);
+	} catch (error) {
+		return handleError(error);
+	}
+});
+
+export const DELETE = withCsrfProtection(async (_request, { params }) => {
+	try {
+		await requireRole("admin");
+		const { id } = await params;
+
+		const existingUser = await user.findById(id);
+		if (!existingUser) {
+			return NextResponse.json({ message: "User not found" }, { status: 404 });
+		}
+
+		await user.delete(id);
+		return NextResponse.json({ success: true });
+	} catch (error) {
+		return handleError(error);
+	}
+});

package/templates/base-project/apps/web/src/app/api/users/me/route.js

@@ -0,0 +1,67 @@
+import { validateBody, withCsrfProtection } from "@techstream/quark-core";
+import { user, userUpdateSchema } from "@techstream/quark-db";
+import { NextResponse } from "next/server";
+import { extractBearerPayload } from "../../../../lib/jwt";
+import { handleError } from "../../error-handler";
+
+/**
+ * Extract the authenticated user's ID from the Bearer token.
+ * Returns null and sends a 401 response if not authenticated.
+ */
+async function requireBearerUser(request) {
+	const payload = await extractBearerPayload(request);
+	if (!payload?.sub) {
+		return {
+			userId: null,
+			response: NextResponse.json(
+				{ message: "Authentication required" },
+				{ status: 401 },
+			),
+		};
+	}
+	return { userId: payload.sub, response: null };
+}
+
+/**
+ * GET /api/users/me
+ * Return the authenticated user's profile.
+ * Requires a valid Bearer JWT (mobile app auth).
+ */
+export async function GET(request) {
+	try {
+		const { userId, response } = await requireBearerUser(request);
+		if (response) return response;
+
+		const foundUser = await user.findById(userId);
+		if (!foundUser) {
+			return NextResponse.json({ message: "User not found" }, { status: 404 });
+		}
+
+		return NextResponse.json(foundUser);
+	} catch (error) {
+		return handleError(error);
+	}
+}
+
+/**
+ * PATCH /api/users/me
+ * Update the authenticated user's profile.
+ * Requires a valid Bearer JWT (mobile app auth).
+ */
+export const PATCH = withCsrfProtection(async (request) => {
+	try {
+		const { userId, response } = await requireBearerUser(request);
+		if (response) return response;
+
+		const existingUser = await user.findById(userId);
+		if (!existingUser) {
+			return NextResponse.json({ message: "User not found" }, { status: 404 });
+		}
+
+		const data = await validateBody(request, userUpdateSchema);
+		const updatedUser = await user.update(userId, data);
+		return NextResponse.json(updatedUser);
+	} catch (error) {
+		return handleError(error);
+	}
+});

package/templates/base-project/apps/web/src/app/api/users/route.js

@@ -0,0 +1,45 @@
+import {
+	parsePaginationQuery,
+	validateBody,
+	withCsrfProtection,
+} from "@techstream/quark-core";
+import { user, userCreateSchema } from "@techstream/quark-db";
+import { NextResponse } from "next/server";
+import { requireRole } from "@/lib/auth-middleware";
+import { handleError } from "../error-handler";
+
+export async function GET(request) {
+	try {
+		await requireRole("admin");
+		const { searchParams } = new URL(request.url);
+		const { skip, take, meta } = parsePaginationQuery(searchParams);
+		const [users, total] = await Promise.all([
+			user.findAll({ skip, take }),
+			user.count(),
+		]);
+		return NextResponse.json({ data: users, pagination: meta(total) });
+	} catch (error) {
+		return handleError(error);
+	}
+}
+
+export const POST = withCsrfProtection(async (request) => {
+	try {
+		await requireRole("admin");
+		const data = await validateBody(request, userCreateSchema);
+
+		// Check if email already exists
+		const existing = await user.findByEmail(data.email);
+		if (existing) {
+			return NextResponse.json(
+				{ message: "User with this email already exists" },
+				{ status: 409 },
+			);
+		}
+
+		const newUser = await user.create(data);
+		return NextResponse.json(newUser, { status: 201 });
+	} catch (error) {
+		return handleError(error);
+	}
+});

package/templates/base-project/apps/web/src/app/auth/error/page.js

@@ -0,0 +1,83 @@
+import { QuarkLogo } from "@techstream/quark-ui";
+import Link from "next/link";
+
+export const metadata = {
+	title: "Auth Error",
+};
+
+const ERROR_MESSAGES = {
+	Configuration: "There is a problem with the server configuration.",
+	AccessDenied: "Access denied. You do not have permission to sign in.",
+	Verification: "The verification link has expired or has already been used.",
+	CredentialsSignin: "Invalid email or password.",
+	OAuthAccountNotLinked:
+		"This email is already associated with another sign-in method.",
+	OAuthSignin: "Could not start the sign-in flow.",
+	OAuthCallback: "Authentication callback failed.",
+	Default: "An unexpected error occurred.",
+};
+
+export default async function AuthErrorPage({ searchParams }) {
+	const params = await searchParams;
+	const raw = params?.error;
+	// NextAuth sometimes passes the literal string "undefined" - normalise it.
+	const errorCode = !raw || raw === "undefined" ? "Default" : raw;
+	const message = ERROR_MESSAGES[errorCode] ?? ERROR_MESSAGES.Default;
+
+	return (
+		<div className="quark-auth-layout">
+			{/* Authority / branding panel */}
+			<div className="quark-auth-brand">
+				<Link href="/" aria-label="Go to home">
+					<QuarkLogo size={64} className="mb-8" />
+				</Link>
+				<p className="text-xs uppercase tracking-widest text-text-faint mb-3">
+					Authentication
+				</p>
+				<h2 className="text-3xl font-bold text-text leading-tight mb-4">
+					Something went wrong.
+				</h2>
+				<p className="text-sm text-text-muted leading-relaxed">
+					An error occurred during authentication.
+				</p>
+			</div>
+
+			{/* Form panel */}
+			<div className="quark-auth-form">
+				{/* Mobile-only logo */}
+				<div className="flex md:hidden mb-8">
+					<Link href="/" aria-label="Go to home">
+						<QuarkLogo size={44} />
+					</Link>
+				</div>
+
+				<div className="quark-auth-panel w-full max-w-sm">
+					<div className="mb-8">
+						<h1 className="text-2xl font-bold tracking-tight text-text">
+							Authentication error
+						</h1>
+						{errorCode !== "Default" && (
+							<p className="text-xs uppercase tracking-widest text-text-muted mt-2">
+								Error code: {errorCode}
+							</p>
+						)}
+					</div>
+
+					<div
+						role="alert"
+						className="border border-danger/40 bg-danger-muted px-4 py-3 text-sm text-danger mb-8"
+					>
+						{message}
+					</div>
+
+					<Link
+						href="/auth/signin"
+						className="text-xs text-text-muted hover:text-text transition-opacity duration-200 linear uppercase tracking-widest"
+					>
+						← Back to sign in
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+}

package/templates/base-project/apps/web/src/app/auth/forgot-password/page.js

@@ -0,0 +1,58 @@
+import { QuarkLogo } from "@techstream/quark-ui";
+import Link from "next/link";
+
+export const metadata = {
+	title: "Forgot Password",
+};
+
+export default function ForgotPasswordPage() {
+	return (
+		<div className="quark-auth-layout">
+			{/* Authority / branding panel */}
+			<div className="quark-auth-brand">
+				<Link href="/" aria-label="Go to home">
+					<QuarkLogo size={64} className="mb-8" />
+				</Link>
+				<p className="text-xs uppercase tracking-widest text-text-faint mb-3">
+					Account recovery
+				</p>
+				<h2 className="text-3xl font-bold text-text leading-tight mb-4">
+					Reset your password.
+				</h2>
+				<p className="text-sm text-text-muted leading-relaxed">
+					Enter your email and we will send you a link to recover access.
+				</p>
+			</div>
+
+			{/* Form panel */}
+			<div className="quark-auth-form">
+				{/* Mobile-only logo */}
+				<div className="flex md:hidden mb-8">
+					<Link href="/" aria-label="Go to home">
+						<QuarkLogo size={44} />
+					</Link>
+				</div>
+
+				<div className="quark-auth-panel w-full max-w-sm">
+					<div className="mb-8">
+						<h1 className="text-2xl font-bold tracking-tight text-text">
+							Forgot password
+						</h1>
+					</div>
+
+					<p className="text-sm text-text-muted leading-relaxed mb-8">
+						Password reset is not available. Please contact support for help
+						accessing your account.
+					</p>
+
+					<Link
+						href="/auth/signin"
+						className="text-xs text-text-muted hover:text-text transition-opacity duration-200 linear uppercase tracking-widest"
+					>
+						← Back to sign in
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+}

package/templates/base-project/apps/web/src/app/auth/provider-loading.js

@@ -0,0 +1,25 @@
+export const AUTH_PROVIDER_LOAD_ERROR =
+	"Third-party sign-in is temporarily unavailable.";
+
+export async function loadAuthProviders(fetchImpl = fetch) {
+	try {
+		const response = await fetchImpl("/api/auth/providers");
+
+		if (!response.ok) {
+			return {
+				providers: null,
+				error: AUTH_PROVIDER_LOAD_ERROR,
+			};
+		}
+
+		return {
+			providers: await response.json(),
+			error: "",
+		};
+	} catch {
+		return {
+			providers: null,
+			error: AUTH_PROVIDER_LOAD_ERROR,
+		};
+	}
+}

package/templates/base-project/apps/web/src/app/auth/register/RegisterPageClient.js

@@ -0,0 +1,340 @@
+"use client";
+
+import {
+	Button,
+	ErrorBanner,
+	Input,
+	Label,
+	PasswordInput,
+	QuarkLogo,
+} from "@techstream/quark-ui";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { signIn } from "next-auth/react";
+import { Suspense, useEffect, useState } from "react";
+import { loadAuthProviders } from "../provider-loading";
+
+const STRENGTH_LABELS = ["", "Weak", "Fair", "Good", "Strong"];
+const STRENGTH_COLORS = [
+	"",
+	"bg-danger",
+	"bg-warning",
+	"bg-primary",
+	"bg-success",
+];
+
+function getPasswordStrength(value) {
+	if (!value) return 0;
+	let score = 0;
+	if (value.length >= 8) score++;
+	if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score++;
+	if (/\d/.test(value)) score++;
+	if (/[^a-zA-Z0-9]/.test(value)) score++;
+	return score;
+}
+
+export default function RegisterPageClient() {
+	return (
+		<Suspense>
+			<RegisterForm />
+		</Suspense>
+	);
+}
+
+function RegisterForm() {
+	const searchParams = useSearchParams();
+	const callbackUrl = searchParams.get("callbackUrl") || "/";
+
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [passwordError, setPasswordError] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [providers, setProviders] = useState(null);
+	const [providerError, setProviderError] = useState("");
+	const [error, setError] = useState("");
+	const strength = getPasswordStrength(password);
+
+	useEffect(() => {
+		let cancelled = false;
+
+		void loadAuthProviders().then(({ providers: loadedProviders, error }) => {
+			if (cancelled) {
+				return;
+			}
+
+			setProviders(loadedProviders);
+			setProviderError(error);
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+
+	function validatePassword(value) {
+		if (getPasswordStrength(value) < 3) {
+			return "Must be 8+ characters with uppercase, lowercase, and a number.";
+		}
+		return "";
+	}
+
+	async function handleSubmit(e) {
+		e.preventDefault();
+		setError("");
+
+		const pwdErr = validatePassword(password);
+		if (pwdErr) {
+			setPasswordError(pwdErr);
+			return;
+		}
+
+		if (password !== confirmPassword) {
+			setPasswordError("Passwords do not match.");
+			return;
+		}
+
+		setPasswordError("");
+		setLoading(true);
+
+		const res = await fetch("/api/auth/register", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				email: email.trim(),
+				password,
+				name: name.trim() || undefined,
+			}),
+		});
+
+		if (!res.ok) {
+			const body = await res.json().catch(() => ({}));
+			setError(body.message || "Registration failed. Try again.");
+			setLoading(false);
+			return;
+		}
+
+		const result = await signIn("credentials", {
+			email: email.trim(),
+			password,
+			callbackUrl,
+			redirect: false,
+		});
+
+		if (result?.error) {
+			window.location.href = "/auth/signin";
+			return;
+		}
+
+		if (!result?.url) {
+			window.location.href = "/";
+			return;
+		}
+
+		window.location.href = result.url;
+	}
+
+	function handleOAuth(provider) {
+		signIn(provider, { callbackUrl });
+	}
+
+	return (
+		<div className="quark-auth-layout">
+			<div className="quark-auth-brand">
+				<Link href="/" aria-label="Go to home">
+					<QuarkLogo size={64} className="mb-8" />
+				</Link>
+				<p className="text-xs uppercase tracking-widest text-text-faint mb-3">
+					Get started
+				</p>
+				<h2 className="text-3xl font-bold text-text leading-tight mb-4">
+					Everything you need,
+					<br />
+					ready in seconds.
+				</h2>
+				<p className="text-sm text-text-muted leading-relaxed">
+					No credit card required. No setup complexity.
+				</p>
+			</div>
+
+			<div className="quark-auth-form">
+				<div className="flex md:hidden mb-8">
+					<Link href="/" aria-label="Go to home">
+						<QuarkLogo size={44} />
+					</Link>
+				</div>
+
+				<div className="quark-auth-panel w-full max-w-sm">
+					<div className="mb-8">
+						<h1 className="text-2xl font-bold tracking-tight text-text">
+							Create account
+						</h1>
+						<p className="text-xs uppercase tracking-widest text-text-muted mt-2">
+							Fill in the details below.
+						</p>
+					</div>
+
+					<ErrorBanner message={error} />
+
+					<form onSubmit={handleSubmit} className="space-y-5">
+						<div className="space-y-2">
+							<Label htmlFor="name">
+								Name{" "}
+								<span className="text-text-faint font-normal normal-case tracking-normal">
+									(optional)
+								</span>
+							</Label>
+							<Input
+								id="name"
+								type="text"
+								autoComplete="name"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+							/>
+						</div>
+
+						<div className="space-y-2">
+							<Label htmlFor="email">Email</Label>
+							<Input
+								id="email"
+								type="email"
+								autoComplete="email"
+								required
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+							/>
+						</div>
+
+						<div className="space-y-2">
+							<Label htmlFor="password">Password</Label>
+							<PasswordInput
+								id="password"
+								autoComplete="new-password"
+								required
+								value={password}
+								onChange={(e) => {
+									setPassword(e.target.value);
+									if (passwordError)
+										setPasswordError(validatePassword(e.target.value));
+								}}
+							/>
+							{password && (
+								<div className="space-y-1">
+									<div className="flex gap-0.5">
+										{[1, 2, 3, 4].map((seg) => (
+											<div
+												key={seg}
+												className={`h-0.5 flex-1 transition-colors duration-200 linear ${strength >= seg ? STRENGTH_COLORS[strength] : "bg-border"}`}
+											/>
+										))}
+									</div>
+									<p className="text-xs text-text-faint uppercase tracking-widest">
+										{STRENGTH_LABELS[strength]}
+									</p>
+								</div>
+							)}
+							<ul className="space-y-0.5">
+								{[
+									{
+										test: password.length >= 8,
+										label: "At least 8 characters",
+									},
+									{
+										test: /[a-z]/.test(password) && /[A-Z]/.test(password),
+										label: "Uppercase & lowercase",
+									},
+									{ test: /\d/.test(password), label: "One number" },
+								].map(({ test, label }) => (
+									<li
+										key={label}
+										className={`text-xs uppercase tracking-widest ${test ? "text-success" : "text-text-faint"}`}
+									>
+										{test ? "✓" : "·"} {label}
+									</li>
+								))}
+							</ul>
+						</div>
+
+						<div className="space-y-2">
+							<Label htmlFor="confirm-password">Confirm password</Label>
+							<PasswordInput
+								id="confirm-password"
+								autoComplete="new-password"
+								required
+								value={confirmPassword}
+								onChange={(e) => {
+									setConfirmPassword(e.target.value);
+									if (passwordError) setPasswordError("");
+								}}
+							/>
+							{passwordError ? (
+								<p className="text-xs text-danger uppercase tracking-widest">
+									{passwordError}
+								</p>
+							) : null}
+						</div>
+
+						<Button
+							type="submit"
+							variant="primary"
+							className="w-full mt-2"
+							disabled={loading}
+						>
+							{loading ? "Creating account…" : "Get started →"}
+						</Button>
+					</form>
+
+					{providerError ? (
+						<p className="mt-4 text-xs uppercase tracking-widest text-text-muted">
+							{providerError}
+						</p>
+					) : null}
+
+					{providers?.github || providers?.google ? (
+						<>
+							<div className="mt-6 flex items-center gap-3">
+								<hr className="flex-1 border-border" />
+								<span className="text-xs text-text-muted uppercase tracking-widest">
+									or
+								</span>
+								<hr className="flex-1 border-border" />
+							</div>
+
+							<div className="mt-4 flex flex-col gap-2">
+								{providers.github && (
+									<Button
+										variant="secondary"
+										className="w-full"
+										onClick={() => handleOAuth("github")}
+									>
+										Continue with GitHub
+									</Button>
+								)}
+								{providers.google && (
+									<Button
+										variant="secondary"
+										className="w-full"
+										onClick={() => handleOAuth("google")}
+									>
+										Continue with Google
+									</Button>
+								)}
+							</div>
+						</>
+					) : null}
+
+					<p className="mt-8 text-xs text-text-muted uppercase tracking-widest">
+						Already have an account?{" "}
+						<Link
+							href="/auth/signin"
+							className="text-primary hover:opacity-75 transition-opacity duration-200 linear"
+						>
+							Sign in
+						</Link>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}

package/templates/base-project/apps/web/src/app/auth/register/page.js

@@ -0,0 +1,17 @@
+import { redirect } from "next/navigation";
+
+import { isSignupEnabled } from "@/lib/auth-signup";
+
+import RegisterPageClient from "./RegisterPageClient";
+
+export const metadata = {
+	title: "Register",
+};
+
+export default function RegisterPage() {
+	if (!isSignupEnabled()) {
+		redirect("/auth/signin");
+	}
+
+	return <RegisterPageClient />;
+}