From 73818767466a03f345804fcc297f18f1e151bf82 Mon Sep 17 00:00:00 2001
From: hhhjin <kkp7125@gmail.com>
Date: Sun, 12 Apr 2026 16:36:33 +0900
Subject: [PATCH] test: add authenticated upload e2e flow

---
 .gitignore                                    |   1 +
 .../upload-form/components/UploadView.tsx     |   6 +-
 client/routes/index.tsx                       |  11 +
 e2e/auth.setup.ts                             |  32 +++
 e2e/auth.shared.ts                            |   1 +
 e2e/authenticated-upload.spec.ts              |  49 +++++
 e2e/home.shared.ts                            |   8 +
 e2e/public-upload.spec.ts                     |   4 +
 playwright.config.ts                          |  18 +-
 server/index.ts                               |   2 +
 server/lib/test-auth.ts                       |   1 +
 server/routes/test-auth.route.ts              | 204 ++++++++++++++++++
 vite.config.ts                                |  36 ++--
 13 files changed, 353 insertions(+), 20 deletions(-)
 create mode 100644 e2e/auth.setup.ts
 create mode 100644 e2e/auth.shared.ts
 create mode 100644 e2e/authenticated-upload.spec.ts
 create mode 100644 e2e/home.shared.ts
 create mode 100644 server/lib/test-auth.ts
 create mode 100644 server/routes/test-auth.route.ts

diff --git a/.gitignore b/.gitignore
index 8ca8bbf..73a1cc0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -172,6 +172,7 @@ dist
 .output
 playwright-report/
 test-results/
+e2e/.auth/
 
 .DS_Store
 
diff --git a/client/features/upload-form/components/UploadView.tsx b/client/features/upload-form/components/UploadView.tsx
index 015394d..4bc92bd 100644
--- a/client/features/upload-form/components/UploadView.tsx
+++ b/client/features/upload-form/components/UploadView.tsx
@@ -74,6 +74,10 @@ export function UploadView({
 	const selectedOverflowTheme = OVERFLOW_THEME_OPTIONS.find(
 		(option) => option.value === selectedTheme,
 	);
+	const requiresTurnstile =
+		import.meta.env.PROD &&
+		import.meta.env.VITE_PUBLIC_E2E !== "1" &&
+		!isAuthenticated;
 
 	useEffect(() => {
 		if (isPermanent) {
@@ -437,7 +441,7 @@ export function UploadView({
 						!selectedFile ||
 						isUploading ||
 						!!uploadError ||
-						(import.meta.env.PROD && !turnstileToken)
+						(requiresTurnstile && !turnstileToken)
 					}
 					onClick={onUpload}
 				>
diff --git a/client/routes/index.tsx b/client/routes/index.tsx
index 6b42ddc..e9676b4 100644
--- a/client/routes/index.tsx
+++ b/client/routes/index.tsx
@@ -95,6 +95,7 @@ export const Route = createFileRoute("/")({
 
 function Home() {
 	const { t, i18n } = useTranslation();
+	const [isHomeReady, setIsHomeReady] = useState(false);
 	const [expirationDays, setExpirationDays] = useState(30);
 	const [selectedTheme, setSelectedTheme] = useState<ThemeId>("default");
 	const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
@@ -110,6 +111,10 @@ function Home() {
 
 	const { data: session } = authClient.useSession();
 
+	useEffect(() => {
+		setIsHomeReady(true);
+	}, []);
+
 	useEffect(() => {
 		setExpirationDays((prev) => {
 			// Logged in: default to Permanent (-1) if user hasn't changed it yet.
@@ -237,6 +242,12 @@ function Home() {
 
 	return (
 		<>
+			<div
+				data-testid="home-ready"
+				data-ready={isHomeReady ? "true" : "false"}
+				className="hidden"
+				aria-hidden="true"
+			/>
 			{/* Main Container - Conditional Styles for Split View */}
 			<div
 				className={cn(
diff --git a/e2e/auth.setup.ts b/e2e/auth.setup.ts
new file mode 100644
index 0000000..12b0998
--- /dev/null
+++ b/e2e/auth.setup.ts
@@ -0,0 +1,32 @@
+import { mkdir } from "node:fs/promises";
+import { dirname } from "node:path";
+import { expect, test as setup } from "@playwright/test";
+import { AUTH_FILE } from "./auth.shared";
+
+const E2E_AUTH_SECRET = "mdto-e2e-auth-secret";
+
+setup("bootstrap authenticated session", async ({ page }) => {
+	await mkdir(dirname(AUTH_FILE), { recursive: true });
+
+	const response = await page.request.post("/api/test/login", {
+		headers: {
+			"x-e2e-auth-secret": E2E_AUTH_SECRET,
+		},
+		data: {
+			name: "playwright-user",
+			email: "playwright-user@example.com",
+		},
+	});
+
+	expect(response.ok()).toBeTruthy();
+	const sessionResponse = await page.request.get("/api/test/session", {
+		headers: {
+			"x-e2e-auth-secret": E2E_AUTH_SECRET,
+		},
+	});
+	expect(sessionResponse.ok()).toBeTruthy();
+	const session = await sessionResponse.json();
+	expect(session.user.name).toBe("playwright-user");
+
+	await page.context().storageState({ path: AUTH_FILE });
+});
diff --git a/e2e/auth.shared.ts b/e2e/auth.shared.ts
new file mode 100644
index 0000000..bcd5040
--- /dev/null
+++ b/e2e/auth.shared.ts
@@ -0,0 +1 @@
+export const AUTH_FILE = "e2e/.auth/user.json";
diff --git a/e2e/authenticated-upload.spec.ts b/e2e/authenticated-upload.spec.ts
new file mode 100644
index 0000000..684e44a
--- /dev/null
+++ b/e2e/authenticated-upload.spec.ts
@@ -0,0 +1,49 @@
+import { fileURLToPath } from "node:url";
+import { expect, test } from "@playwright/test";
+import { AUTH_FILE } from "./auth.shared";
+import { waitForHomeReady } from "./home.shared";
+
+const fixturePath = fileURLToPath(
+	new URL("./fixtures/sample.md", import.meta.url),
+);
+
+test.use({ storageState: AUTH_FILE });
+
+test.beforeEach(async ({ page }) => {
+	await page.addInitScript(() => {
+		window.localStorage.setItem("mdto.lang", "en");
+	});
+});
+
+test("authenticated upload creates a managed page for the logged-in user", async ({
+	page,
+}) => {
+	await page.goto("/");
+	await waitForHomeReady(page);
+
+	await expect(page.getByText("playwright-user")).toBeVisible();
+
+	await page.getByTestId("upload-file-input").setInputFiles(fixturePath);
+	await expect(page.getByText("sample.md")).toBeVisible();
+
+	await page.getByTestId("upload-create-button").click();
+
+	const successUrlInput = page.getByTestId("success-url-input");
+	await expect(successUrlInput).toBeVisible();
+
+	const successUrl = await successUrlInput.inputValue();
+	const url = new URL(successUrl);
+
+	expect(url.origin).toBe(new URL(page.url()).origin);
+	expect(url.pathname).toMatch(/^\/playwright-user\/[A-Za-z0-9_-]{4}$/);
+
+	await expect(page.getByTestId("success-open-link")).toHaveAttribute(
+		"href",
+		successUrl,
+	);
+
+	await page.goto(successUrl);
+	await expect(
+		page.getByRole("heading", { level: 1, name: "Sample Title" }),
+	).toBeVisible();
+});
diff --git a/e2e/home.shared.ts b/e2e/home.shared.ts
new file mode 100644
index 0000000..1678f6c
--- /dev/null
+++ b/e2e/home.shared.ts
@@ -0,0 +1,8 @@
+import { expect, type Page } from "@playwright/test";
+
+export async function waitForHomeReady(page: Page) {
+	await expect(page.getByTestId("home-ready")).toHaveAttribute(
+		"data-ready",
+		"true",
+	);
+}
diff --git a/e2e/public-upload.spec.ts b/e2e/public-upload.spec.ts
index 6935d5c..2b4c12e 100644
--- a/e2e/public-upload.spec.ts
+++ b/e2e/public-upload.spec.ts
@@ -1,5 +1,6 @@
 import { fileURLToPath } from "node:url";
 import { expect, type Page, test } from "@playwright/test";
+import { waitForHomeReady } from "./home.shared";
 
 const fixturePath = fileURLToPath(
 	new URL("./fixtures/sample.md", import.meta.url),
@@ -44,6 +45,7 @@ test("home smoke shows upload controls in the initial state", async ({
 	page,
 }) => {
 	await page.goto("/");
+	await waitForHomeReady(page);
 
 	await expect(page.getByTestId("upload-file-input")).toBeAttached();
 	await expect(page.getByTestId("upload-preview-button")).toBeDisabled();
@@ -54,6 +56,7 @@ test("preview opens and closes for an uploaded markdown file", async ({
 	page,
 }) => {
 	await page.goto("/");
+	await waitForHomeReady(page);
 	await attachMarkdownFile(page);
 
 	await page.getByTestId("upload-preview-button").click();
@@ -75,6 +78,7 @@ test("anonymous upload creates a public page and exposes the raw markdown", asyn
 	page,
 }) => {
 	await page.goto("/");
+	await waitForHomeReady(page);
 	await attachMarkdownFile(page);
 	await page.getByRole("button", { name: "GitHub" }).click();
 
diff --git a/playwright.config.ts b/playwright.config.ts
index 639d888..168d12b 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,9 +1,11 @@
 import { defineConfig } from "@playwright/test";
 
 const baseURL = "http://127.0.0.1:4173";
-const workerCommand = process.env.CI
-	? "pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var ENV:dev --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret"
-	: "VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var ENV:dev --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret";
+const clientCommand =
+	"VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' VITE_PUBLIC_E2E=1 pnpm build && pnpm exec vite preview --host 127.0.0.1 --port 4173 --strictPort";
+const workerBaseCommand =
+	"pnpm exec wrangler d1 migrations apply mdto --local && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var ENV:dev --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret --var ENABLE_E2E_AUTH:1 --var E2E_AUTH_SECRET:mdto-e2e-auth-secret";
+const workerCommand = workerBaseCommand;
 
 export default defineConfig({
 	testDir: "./e2e",
@@ -18,11 +20,18 @@ export default defineConfig({
 		screenshot: "only-on-failure",
 	},
 	projects: [
+		{
+			name: "setup",
+			testMatch: /auth\.setup\.ts/,
+		},
 		{
 			name: "chromium",
+			dependencies: ["setup"],
+			testIgnore: /auth\.setup\.ts/,
 			use: {
 				browserName: "chromium",
 				headless: true,
+				storageState: undefined,
 				viewport: {
 					width: 1280,
 					height: 900,
@@ -32,8 +41,7 @@ export default defineConfig({
 	],
 	webServer: [
 		{
-			command:
-				"pnpm generate:themes && vite --host 127.0.0.1 --port 4173 --strictPort",
+			command: clientCommand,
 			url: baseURL,
 			reuseExistingServer: !process.env.CI,
 			timeout: 120_000,
diff --git a/server/index.ts b/server/index.ts
index cd8682e..0ca7861 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -6,6 +6,7 @@ import { sendDiscordAlert } from "./lib/discord";
 import { authRouter } from "./routes/auth.route";
 import { dashboardRouter } from "./routes/dashboard.route";
 import { pageApiRouter } from "./routes/page-api.route";
+import { testAuthRouter } from "./routes/test-auth.route";
 import { viewRouter } from "./routes/view.route";
 import { createContext } from "./trpc/context";
 import { appRouter } from "./trpc/router";
@@ -14,6 +15,7 @@ import { isDev } from "./utils/env";
 const app = new Hono<{ Bindings: Env }>();
 
 app.route("/api/auth", authRouter);
+app.route("/api/test", testAuthRouter);
 app.route("/api/v1/pages", pageApiRouter);
 app.all("/api/trpc/*", async (c) => {
 	return await fetchRequestHandler({
diff --git a/server/lib/test-auth.ts b/server/lib/test-auth.ts
new file mode 100644
index 0000000..1fb3af6
--- /dev/null
+++ b/server/lib/test-auth.ts
@@ -0,0 +1 @@
+export const E2E_USER_COOKIE_NAME = "mdto_e2e_user";
diff --git a/server/routes/test-auth.route.ts b/server/routes/test-auth.route.ts
new file mode 100644
index 0000000..5e6d8ae
--- /dev/null
+++ b/server/routes/test-auth.route.ts
@@ -0,0 +1,204 @@
+import { db } from "@server/db/client";
+import * as schema from "@server/db/schema";
+import { eq, or } from "drizzle-orm";
+import { Hono } from "hono";
+import { getSignedCookie, setCookie, setSignedCookie } from "hono/cookie";
+import { auth } from "../lib/auth";
+import { E2E_USER_COOKIE_NAME } from "../lib/test-auth";
+
+const TEST_LOGIN_PATH = "/login";
+
+type TestAuthApp = {
+	Bindings: Env;
+};
+
+type TestAuthEnv = Env & {
+	ENABLE_E2E_AUTH?: string;
+	E2E_AUTH_SECRET?: string;
+};
+
+type LoginPayload = {
+	name?: string;
+	email?: string;
+};
+
+export const testAuthRouter = new Hono<TestAuthApp>();
+
+function readTestAuthEnv(env: Env): TestAuthEnv {
+	return env as TestAuthEnv;
+}
+
+function ensureTestAuthAccess(request: Request, env: Env) {
+	const testEnv = readTestAuthEnv(env);
+	if (testEnv.ENABLE_E2E_AUTH !== "1") {
+		return new Response("Not found", { status: 404 });
+	}
+
+	const expectedSecret = testEnv.E2E_AUTH_SECRET;
+	const providedSecret = request.headers.get("x-e2e-auth-secret");
+	if (!expectedSecret || providedSecret !== expectedSecret) {
+		return new Response("Unauthorized", { status: 401 });
+	}
+
+	return null;
+}
+
+function createUserId(name: string) {
+	return `e2e_${name}`;
+}
+
+function normalizeLoginPayload(input: LoginPayload) {
+	const name = input.name?.trim().toLowerCase() || "e2e-tester";
+	const email = input.email?.trim().toLowerCase() || `${name}@example.com`;
+
+	if (!name || !email) {
+		throw new Error("Name and email are required");
+	}
+
+	return { name, email };
+}
+
+testAuthRouter.post(TEST_LOGIN_PATH, async (c) => {
+	const accessError = ensureTestAuthAccess(c.req.raw, c.env);
+	if (accessError) return accessError;
+
+	let payload: LoginPayload;
+	try {
+		payload = await c.req.json<LoginPayload>();
+	} catch {
+		return c.json({ message: "Invalid JSON body" }, 400);
+	}
+
+	let login: ReturnType<typeof normalizeLoginPayload>;
+	try {
+		login = normalizeLoginPayload(payload);
+	} catch (error) {
+		return c.json(
+			{
+				message: error instanceof Error ? error.message : "Invalid payload",
+			},
+			400,
+		);
+	}
+
+	const now = new Date();
+	const userId = createUserId(login.name);
+	const authContext = await auth.$context;
+	const authCookies = authContext.authCookies;
+
+	await authContext.internalAdapter.deleteSessions(userId);
+
+	await db
+		.delete(schema.user)
+		.where(
+			or(
+				eq(schema.user.id, userId),
+				eq(schema.user.name, login.name),
+				eq(schema.user.email, login.email),
+			),
+		);
+
+	await db.insert(schema.user).values({
+		id: userId,
+		name: login.name,
+		email: login.email,
+		emailVerified: true,
+		image: null,
+		isDashboardPublic: false,
+		createdAt: now,
+		updatedAt: now,
+	});
+
+	const session = await authContext.internalAdapter.createSession(
+		userId,
+		false,
+		{
+			ipAddress: null,
+			userAgent: c.req.header("user-agent"),
+		},
+	);
+
+	// Clear any cached session cookie so the next getSession call rehydrates from the token.
+	setCookie(c, authCookies.sessionData.name, "", {
+		...authCookies.sessionData.attributes,
+		maxAge: 0,
+	});
+	await setSignedCookie(
+		c,
+		authCookies.sessionToken.name,
+		session.token,
+		c.env.BETTER_AUTH_SECRET,
+		{
+			...authCookies.sessionToken.attributes,
+			expires: session.expiresAt,
+		},
+	);
+	setCookie(
+		c,
+		E2E_USER_COOKIE_NAME,
+		JSON.stringify({
+			id: userId,
+			name: login.name,
+			email: login.email,
+		}),
+		{
+			path: "/",
+			sameSite: "Lax",
+			expires: session.expiresAt,
+		},
+	);
+
+	return c.json({
+		ok: true,
+		user: {
+			id: userId,
+			name: login.name,
+			email: login.email,
+		},
+		session: {
+			id: session.id,
+			expiresAt: session.expiresAt.toISOString(),
+		},
+	});
+});
+
+testAuthRouter.post("/logout", async (c) => {
+	const accessError = ensureTestAuthAccess(c.req.raw, c.env);
+	if (accessError) return accessError;
+
+	const authContext = await auth.$context;
+	const authCookies = authContext.authCookies;
+	const sessionToken = await getSignedCookie(
+		c,
+		c.env.BETTER_AUTH_SECRET,
+		authCookies.sessionToken.name,
+	);
+	if (sessionToken) {
+		await db
+			.delete(schema.session)
+			.where(eq(schema.session.token, sessionToken));
+	}
+
+	setCookie(c, authCookies.sessionData.name, "", {
+		...authCookies.sessionData.attributes,
+		maxAge: 0,
+	});
+	setCookie(c, authCookies.sessionToken.name, "", {
+		...authCookies.sessionToken.attributes,
+		maxAge: 0,
+	});
+	setCookie(c, E2E_USER_COOKIE_NAME, "", {
+		path: "/",
+		sameSite: "Lax",
+		maxAge: 0,
+	});
+
+	return c.json({ ok: true });
+});
+
+testAuthRouter.get("/session", async (c) => {
+	const accessError = ensureTestAuthAccess(c.req.raw, c.env);
+	if (accessError) return accessError;
+
+	return c.json(await auth.api.getSession(c.req.raw));
+});
diff --git a/vite.config.ts b/vite.config.ts
index c5f87bf..0ad4a5a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,21 @@ import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
 
+const proxy = {
+	"^/api/.*": {
+		target: "http://localhost:8787",
+		changeOrigin: true,
+	},
+	"^/(1|7|E|1E|e|1e)/[a-zA-Z0-9_-]{5}(\\.md)?$": {
+		target: "http://localhost:8787",
+		changeOrigin: true,
+	},
+	"^/[^/]+/[a-zA-Z0-9_-]{4}(\\.md)?$": {
+		target: "http://localhost:8787",
+		changeOrigin: true,
+	},
+};
+
 export default defineConfig({
 	publicDir: "./public",
 	plugins: [
@@ -17,6 +32,9 @@ export default defineConfig({
 		}),
 		react(),
 	],
+	optimizeDeps: {
+		entries: ["client/**/*.{ts,tsx}"],
+	},
 	resolve: {
 		alias: {
 			"@": resolve(__dirname, "./client"),
@@ -24,20 +42,10 @@ export default defineConfig({
 		},
 	},
 	server: {
-		proxy: {
-			"^/api/.*": {
-				target: "http://localhost:8787",
-				changeOrigin: true,
-			},
-			"^/(1|7|E|1E|e|1e)/[a-zA-Z0-9_-]{5}(\\.md)?$": {
-				target: "http://localhost:8787",
-				changeOrigin: true,
-			},
-			"^/[^/]+/[a-zA-Z0-9_-]{4}(\\.md)?$": {
-				target: "http://localhost:8787",
-				changeOrigin: true,
-			},
-		},
+		proxy,
+	},
+	preview: {
+		proxy,
 	},
 	ssr: {
 		noExternal: [