@usequark/quark-create-app 1.25.16 → 1.27.0

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

@@ -0,0 +1,159 @@
+"use client";
+
+import { clearCsrfToken, getCsrfToken } from "@usequark/quark-core/csrf-client";
+import {
+	Button,
+	ErrorBanner,
+	Input,
+	Label,
+	QuarkLogo,
+} from "@usequark/quark-ui";
+import Link from "next/link";
+import { useState } from "react";
+
+/**
+ * The forgot-password form.
+ *
+ * The POST answers identically whether or not the address exists (see the
+ * route's enumeration note), so the client surface shows exactly one outcome:
+ * "if that address has an account, a link is on its way." A success state and a
+ * network-failure state, and deliberately nothing in between.
+ */
+export default function ForgotPasswordPageClient() {
+	const [email, setEmail] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState("");
+	const [sent, setSent] = useState(false);
+
+	async function handleSubmit(e) {
+		e.preventDefault();
+		setError("");
+		setLoading(true);
+
+		try {
+			// Same pre-authentication CSRF handshake as the register page: fetch a
+			// token from GET /api/csrf and send it alongside the matching cookie.
+			let res = await postForgotPassword(await getCsrfToken());
+
+			// A 401 usually means the server rotated the csrf_token cookie out
+			// from under the cached token. Retry once with a fresh pair; a second
+			// failure is a real failure and falls through to the banner.
+			if (res.status === 401) {
+				clearCsrfToken();
+				res = await postForgotPassword(await getCsrfToken());
+			}
+
+			if (!res.ok && res.status !== 429) {
+				const body = await res.json().catch(() => ({}));
+				setError(body.message || "Something went wrong. Try again.");
+				setLoading(false);
+				return;
+			}
+
+			setSent(true);
+			setLoading(false);
+		} catch {
+			setError("Could not reach the server. Try again.");
+			setLoading(false);
+		}
+	}
+
+	async function postForgotPassword(csrfToken) {
+		return await fetch("/api/auth/forgot-password", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRF-Token": csrfToken,
+			},
+			body: JSON.stringify({ email: email.trim() }),
+		});
+	}
+
+	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>
+
+					<ErrorBanner message={error} />
+
+					{sent ? (
+						<>
+							<p
+								role="status"
+								className="text-sm text-text-muted leading-relaxed mb-8"
+							>
+								If that email address has an account, a reset link is on its
+								way. Check your inbox — the link expires after one hour.
+							</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>
+						</>
+					) : (
+						<form onSubmit={handleSubmit} className="space-y-5">
+							<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>
+
+							<Button
+								type="submit"
+								variant="primary"
+								className="w-full mt-2"
+								disabled={loading}
+							>
+								{loading ? "Sending…" : "Send reset link →"}
+							</Button>
+
+							<Link
+								href="/auth/signin"
+								className="block text-center text-xs text-text-muted hover:text-text transition-opacity duration-200 linear uppercase tracking-widest"
+							>
+								← Back to sign in
+							</Link>
+						</form>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -1,58 +1,9 @@
-import { QuarkLogo } from "@usequark/quark-ui";
-import Link from "next/link";
+import ForgotPasswordPageClient from "./ForgotPasswordPageClient";
 
 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>
-	);
+	return <ForgotPasswordPageClient />;
 }

package/templates/base-project/apps/web/src/app/auth/reset-password/ResetPasswordPageClient.js

@@ -0,0 +1,280 @@
+"use client";
+
+import { clearCsrfToken, getCsrfToken } from "@usequark/quark-core/csrf-client";
+import {
+	Button,
+	ErrorBanner,
+	Label,
+	PasswordInput,
+	QuarkLogo,
+} from "@usequark/quark-ui";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+
+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;
+}
+
+function validatePassword(value) {
+	if (getPasswordStrength(value) < 3) {
+		return "Must be 8+ characters with uppercase, lowercase, and a number.";
+	}
+	return "";
+}
+
+export default function ResetPasswordPageClient() {
+	return (
+		<Suspense>
+			<ResetPasswordForm />
+		</Suspense>
+	);
+}
+
+function ResetPasswordForm() {
+	const searchParams = useSearchParams();
+	const token = searchParams.get("token") || "";
+
+	// `invalid` means the link is unusable (missing, expired, consumed).
+	// `error` means the validity check itself failed and the form stays down
+	// rather than letting a user type a new password into a form that might not
+	// work.
+	const [linkState, setLinkState] = useState("checking");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [passwordError, setPasswordError] = useState("");
+	const [error, setError] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [done, setDone] = useState(false);
+	const strength = getPasswordStrength(password);
+
+	useEffect(() => {
+		let cancelled = false;
+
+		void (async () => {
+			try {
+				const res = await fetch(
+					`/api/auth/reset-password?token=${encodeURIComponent(token)}`,
+				);
+				if (!cancelled) {
+					setLinkState(res.ok ? "ready" : "invalid");
+				}
+			} catch {
+				if (!cancelled) setLinkState("error");
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [token]);
+
+	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);
+
+		try {
+			let res = await postReset(await getCsrfToken());
+
+			if (res.status === 401) {
+				clearCsrfToken();
+				res = await postReset(await getCsrfToken());
+			}
+
+			if (!res.ok) {
+				const body = await res.json().catch(() => ({}));
+				setError(body.message || "Reset failed. Try again.");
+				setLoading(false);
+				return;
+			}
+
+			setDone(true);
+			setLoading(false);
+		} catch {
+			setError("Could not reach the server. Try again.");
+			setLoading(false);
+		}
+	}
+
+	async function postReset(csrfToken) {
+		return await fetch("/api/auth/reset-password", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRF-Token": csrfToken,
+			},
+			body: JSON.stringify({ token, password }),
+		});
+	}
+
+	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">
+					Choose a new password.
+				</h2>
+				<p className="text-sm text-text-muted leading-relaxed">
+					Once set, every existing session is signed out — including any session
+					the old password was signed in from.
+				</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">
+							Reset password
+						</h1>
+					</div>
+
+					<ErrorBanner message={error} />
+
+					{linkState === "checking" ? (
+						<p className="text-sm text-text-muted leading-relaxed mb-8">
+							Checking your link…
+						</p>
+					) : null}
+
+					{linkState === "invalid" || linkState === "error" ? (
+						<>
+							<p className="text-sm text-text-muted leading-relaxed mb-8">
+								This reset link is invalid or has expired. Request a new one
+								from the forgot-password page.
+							</p>
+							<Link
+								href="/auth/forgot-password"
+								className="text-xs text-primary hover:opacity-75 transition-opacity duration-200 linear uppercase tracking-widest"
+							>
+								Request a new link
+							</Link>
+						</>
+					) : null}
+
+					{linkState === "ready" && !done ? (
+						<form onSubmit={handleSubmit} className="space-y-5">
+							<div className="space-y-2">
+								<Label htmlFor="password">New 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>
+								)}
+							</div>
+
+							<div className="space-y-2">
+								<Label htmlFor="confirm-password">Confirm new 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 ? "Resetting…" : "Set new password →"}
+							</Button>
+						</form>
+					) : null}
+
+					{done ? (
+						<>
+							<p
+								role="status"
+								className="text-sm text-text-muted leading-relaxed mb-8"
+							>
+								Your password has been updated. All previous sessions have been
+								signed out.
+							</p>
+							<Link
+								href="/auth/signin"
+								className="text-xs text-primary hover:opacity-75 transition-opacity duration-200 linear uppercase tracking-widest"
+							>
+								Sign in with your new password →
+							</Link>
+						</>
+					) : null}
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,9 @@
+import ResetPasswordPageClient from "./ResetPasswordPageClient";
+
+export const metadata = {
+	title: "Reset Password",
+};
+
+export default function ResetPasswordPage() {
+	return <ResetPasswordPageClient />;
+}

package/templates/base-project/apps/web/src/app/auth/signin/SignInPageClient.js

@@ -37,6 +37,7 @@ function SignInForm({ allowSignup }) {
 	const searchParams = useSearchParams();
 	const callbackUrl = searchParams.get("callbackUrl") || "/";
 	const errorCode = searchParams.get("error");
+	const verified = searchParams.get("verified");
 
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
@@ -46,6 +47,18 @@ function SignInForm({ allowSignup }) {
 	const [error, setError] = useState(
 		errorCode ? (ERROR_MESSAGES[errorCode] ?? ERROR_MESSAGES.Default) : "",
 	);
+	// `/api/auth/verify-email` redirects here with ?verified=1|invalid|error.
+	// A notice is the difference between "why can I sign in now?" and "did my
+	// email even work?" for a user arriving from their mailbox.
+	const [notice] = useState(
+		verified === "1"
+			? "Your email address is verified. You can sign in."
+			: verified === "invalid"
+				? "That verification link is invalid or has expired."
+				: verified === "error"
+					? "Verification failed. Try again from the link in your email."
+					: "",
+	);
 
 	useEffect(() => {
 		let cancelled = false;
@@ -131,6 +144,15 @@ function SignInForm({ allowSignup }) {
 
 					<ErrorBanner message={error} />
 
+					{notice ? (
+						<div
+							role="status"
+							className="border border-success/40 bg-success-muted px-4 py-3 text-sm text-success mb-8"
+						>
+							{notice}
+						</div>
+					) : null}
+
 					<form onSubmit={handleSubmit} className="space-y-5">
 						<div className="space-y-2">
 							<Label htmlFor="email">Email</Label>

package/templates/base-project/apps/web/src/lib/auth-email-verification.js

@@ -0,0 +1,5 @@
+import { loadConfig } from "@usequark/quark-config";
+
+export function isEmailVerificationRequired() {
+	return loadConfig().auth.requireEmailVerification;
+}

package/templates/base-project/apps/web/src/lib/auth.js

@@ -7,6 +7,7 @@ import NextAuth from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
 import GithubProvider from "next-auth/providers/github";
 import GoogleProvider from "next-auth/providers/google";
+import { isEmailVerificationRequired } from "./auth-email-verification";
 import { isEmailVerified } from "./email-verified";
 
 const logger = createLogger({ name: "auth" });
@@ -65,8 +66,10 @@ const providers = [
 				return null;
 			}
 
+			let existingUser;
+
 			try {
-				const existingUser = await userQueries.findByEmail(credentials.email);
+				existingUser = await userQueries.findByEmail(credentials.email);
 
 				if (!existingUser?.password) {
 					return null;
@@ -80,14 +83,6 @@ const providers = [
 				if (!isValid) {
 					return null;
 				}
-
-				return {
-					id: existingUser.id,
-					email: existingUser.email,
-					name: existingUser.name,
-					image: existingUser.image,
-					role: existingUser.role,
-				};
 			} catch (err) {
 				// Re-throw if the database is unreachable so Auth.js surfaces a server error
 				// rather than "Invalid credentials", which misleads both user and developer.
@@ -109,6 +104,29 @@ const providers = [
 				});
 				return null;
 			}
+
+			// Deliberately after the try/catch above. The verification refusal is a
+			// decision, not a failure: leaving it outside means the fail-closed
+			// handler cannot turn it into a bare `null` that Auth.js would report as
+			// "Invalid credentials". It throws the same `OAUTH_EMAIL_NOT_VERIFIED`
+			// error the OAuth path does, so the operator sees one reason, with one
+			// code, whichever provider the sign-in came through — and, as there, a
+			// missing or unset `emailVerified` reads as unverified.
+			if (isEmailVerificationRequired() && !existingUser.emailVerified) {
+				throw new AppError(
+					"Credentials sign-in refused: the email address is not verified",
+					401,
+					"OAUTH_EMAIL_NOT_VERIFIED",
+				);
+			}
+
+			return {
+				id: existingUser.id,
+				email: existingUser.email,
+				name: existingUser.name,
+				image: existingUser.image,
+				role: existingUser.role,
+			};
 		},
 	}),
 ];
@@ -142,7 +160,10 @@ if (process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET) {
 			// why in the one place an operator can read it, and lands in the same
 			// catch: no session, no user row, redirect back to the sign-in page.
 			profile: (profile) => {
-				if (!isEmailVerified(profile.email_verified)) {
+				if (
+					isEmailVerificationRequired() &&
+					!isEmailVerified(profile.email_verified)
+				) {
 					throw new AppError(
 						"Google sign-in refused: the account's email address is not verified",
 						401,