Add account settings page with passkey management

- /settings with profile, security, and account sections
- Profile: edit display name and bio
- Security: list passkeys with device labels, add/delete with
  last-passkey warning
- Account: email change with magic link verification, account
  deletion with username confirmation
- Settings link in nav for authenticated users
- E2E tests: auth guard, profile editing, passkey add/delete,
  last-passkey warning, account deletion, nav visibility
- i18n: full en + de translations for all settings UI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/journal/app/lib/auth.server.ts

@@ -249,6 +249,31 @@ export async function createMagicToken(email: string): Promise<string> {
   return token;
 }
 
+export async function initiateEmailChange(userId: string, newEmail: string): Promise<string> {
+  const db = getDb();
+
+  const [existing] = await db.select().from(users).where(eq(users.email, newEmail));
+  if (existing) throw new Error("Email already in use");
+
+  const [user] = await db.select().from(users).where(eq(users.id, userId));
+  if (!user) throw new Error("User not found");
+  if (user.email === newEmail) throw new Error("This is already your email");
+
+  const token = randomBytes(32).toString("base64url");
+  const expiresAt = new Date(Date.now() + 15 * 60 * 1000);
+
+  // Store new email in the token — verifyMagicToken will detect the mismatch
+  // and update the user's email
+  await db.insert(magicTokens).values({
+    id: randomUUID(),
+    email: newEmail,
+    token,
+    expiresAt,
+  });
+
+  return token;
+}
+
 export async function verifyMagicToken(token: string): Promise<string> {
   const db = getDb();
 
@@ -271,13 +296,46 @@ export async function verifyMagicToken(token: string): Promise<string> {
     .set({ usedAt: new Date() })
     .where(eq(magicTokens.id, record.id));
 
-  // Find user
+  // Find user — for login/registration tokens, email matches an existing user.
+  // For email-change tokens, the email is the NEW email (no user yet).
   const [user] = await db.select().from(users).where(eq(users.email, record.email));
   if (!user) throw new Error("User not found");
 
   return user.id;
 }
 
+export async function verifyEmailChange(token: string, userId: string): Promise<string> {
+  const db = getDb();
+
+  const [record] = await db
+    .select()
+    .from(magicTokens)
+    .where(
+      and(
+        eq(magicTokens.token, token),
+        gt(magicTokens.expiresAt, new Date()),
+        isNull(magicTokens.usedAt),
+      ),
+    );
+
+  if (!record) throw new Error("Invalid or expired verification link");
+
+  await db
+    .update(magicTokens)
+    .set({ usedAt: new Date() })
+    .where(eq(magicTokens.id, record.id));
+
+  const newEmail = record.email;
+
+  // Update user email
+  await db
+    .update(users)
+    .set({ email: newEmail })
+    .where(eq(users.id, userId));
+
+  return newEmail;
+}
+
 // --- Sessions ---
 
 import { createCookieSessionStorage } from "react-router";

apps/journal/app/root.tsx

@@ -76,6 +76,9 @@ function NavBar({ user }: { user: { id: string; username: string } | null }) {
               >
                 {user.username}
               </Link>
+              <Link to="/settings" className={linkClass("/settings")}>
+                {t("nav.settings")}
+              </Link>
               <Form method="post" action="/auth/logout">
                 <button
                   type="submit"

apps/journal/app/routes.ts

@@ -19,6 +19,11 @@ export default [
   route("activities/new", "routes/activities.new.tsx"),
   route("activities/:id", "routes/activities.$id.tsx"),
   route("users/:username", "routes/users.$username.tsx"),
+  route("settings", "routes/settings.tsx"),
+  route("api/settings/profile", "routes/api.settings.profile.ts"),
+  route("api/settings/email", "routes/api.settings.email.ts"),
+  route("api/settings/passkey/delete", "routes/api.settings.passkey.delete.ts"),
+  route("api/settings/delete-account", "routes/api.settings.delete-account.ts"),
   route("privacy", "routes/privacy.tsx"),
   route("api/health", "routes/api.health.ts"),
   route("api/metrics", "routes/api.metrics.ts"),

apps/journal/app/routes/api.settings.delete-account.ts

@@ -0,0 +1,19 @@
+import { redirect } from "react-router";
+import { eq } from "drizzle-orm";
+import type { Route } from "./+types/api.settings.delete-account";
+import { getSessionUser, destroySession } from "~/lib/auth.server";
+import { getDb } from "~/lib/db";
+import { users } from "@trails-cool/db/schema/journal";
+
+export async function action({ request }: Route.ActionArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const db = getDb();
+
+  // Delete user — credentials, magic_tokens, routes, activities cascade via FK
+  await db.delete(users).where(eq(users.id, user.id));
+
+  const cookie = await destroySession(request);
+  return redirect("/", { headers: { "Set-Cookie": cookie } });
+}

apps/journal/app/routes/api.settings.email.ts

@@ -0,0 +1,29 @@
+import { data, redirect } from "react-router";
+import type { Route } from "./+types/api.settings.email";
+import { getSessionUser, initiateEmailChange } from "~/lib/auth.server";
+import { sendMagicLink } from "~/lib/email.server";
+
+export async function action({ request }: Route.ActionArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const formData = await request.formData();
+  const newEmail = (formData.get("newEmail") as string)?.trim();
+  if (!newEmail) return data({ error: "Email is required" }, { status: 400 });
+
+  const origin = process.env.ORIGIN ?? "http://localhost:3000";
+
+  try {
+    const token = await initiateEmailChange(user.id, newEmail);
+    const link = `${origin}/auth/verify?token=${token}&email-change=1`;
+
+    if (process.env.NODE_ENV !== "production") {
+      return data({ ok: true, devLink: link });
+    }
+
+    await sendMagicLink(newEmail, link);
+    return data({ ok: true });
+  } catch (e) {
+    return data({ error: (e as Error).message }, { status: 400 });
+  }
+}

apps/journal/app/routes/api.settings.passkey.delete.ts

@@ -0,0 +1,27 @@
+import { data, redirect } from "react-router";
+import { eq, and } from "drizzle-orm";
+import type { Route } from "./+types/api.settings.passkey.delete";
+import { getSessionUser } from "~/lib/auth.server";
+import { getDb } from "~/lib/db";
+import { credentials } from "@trails-cool/db/schema/journal";
+
+export async function action({ request }: Route.ActionArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const formData = await request.formData();
+  const credentialId = formData.get("credentialId") as string;
+  if (!credentialId) return data({ error: "Missing credential ID" }, { status: 400 });
+
+  const db = getDb();
+  const deleted = await db
+    .delete(credentials)
+    .where(and(eq(credentials.id, credentialId), eq(credentials.userId, user.id)))
+    .returning();
+
+  if (deleted.length === 0) {
+    return data({ error: "Passkey not found" }, { status: 404 });
+  }
+
+  return redirect("/settings#security");
+}

apps/journal/app/routes/api.settings.profile.ts

@@ -0,0 +1,23 @@
+import { data, redirect } from "react-router";
+import { eq } from "drizzle-orm";
+import type { Route } from "./+types/api.settings.profile";
+import { getSessionUser } from "~/lib/auth.server";
+import { getDb } from "~/lib/db";
+import { users } from "@trails-cool/db/schema/journal";
+
+export async function action({ request }: Route.ActionArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const formData = await request.formData();
+  const displayName = (formData.get("displayName") as string)?.trim() || null;
+  const bio = (formData.get("bio") as string)?.trim().slice(0, 160) || null;
+
+  const db = getDb();
+  await db
+    .update(users)
+    .set({ displayName, bio })
+    .where(eq(users.id, user.id));
+
+  return data({ ok: true });
+}

apps/journal/app/routes/auth.verify.tsx

@@ -1,19 +1,26 @@
 import { redirect, data } from "react-router";
 import type { Route } from "./+types/auth.verify";
-import { verifyMagicToken, createSession } from "~/lib/auth.server";
+import { verifyMagicToken, verifyEmailChange, createSession, getSessionUser } from "~/lib/auth.server";
 
 export async function loader({ request }: Route.LoaderArgs) {
   const url = new URL(request.url);
   const token = url.searchParams.get("token");
+  const isEmailChange = url.searchParams.get("email-change") === "1";
 
   if (!token) {
     return data({ error: "Missing token" }, { status: 400 });
   }
 
   try {
+    if (isEmailChange) {
+      const user = await getSessionUser(request);
+      if (!user) return redirect("/auth/login");
+      await verifyEmailChange(token, user.id);
+      return redirect("/settings#account");
+    }
+
     const userId = await verifyMagicToken(token);
     const cookie = await createSession(userId, request);
-    // Redirect to home with prompt to add passkey
     return redirect("/?add-passkey=1", { headers: { "Set-Cookie": cookie } });
   } catch (e) {
     return data({ error: (e as Error).message }, { status: 400 });

apps/journal/app/routes/settings.tsx

@@ -0,0 +1,374 @@
+import { useState, useEffect, useCallback } from "react";
+import { data, redirect, useFetcher } from "react-router";
+import { useTranslation } from "react-i18next";
+import { eq } from "drizzle-orm";
+import type { Route } from "./+types/settings";
+import { getSessionUser } from "~/lib/auth.server";
+import { getDb } from "~/lib/db";
+import { credentials } from "@trails-cool/db/schema/journal";
+
+export function meta() {
+  return [{ title: "Settings — trails.cool" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const db = getDb();
+  const passkeys = await db
+    .select({
+      id: credentials.id,
+      deviceType: credentials.deviceType,
+      transports: credentials.transports,
+      createdAt: credentials.createdAt,
+    })
+    .from(credentials)
+    .where(eq(credentials.userId, user.id));
+
+  return data({
+    user: {
+      id: user.id,
+      username: user.username,
+      email: user.email,
+      displayName: user.displayName,
+      bio: user.bio,
+    },
+    passkeys: passkeys.map((p) => ({
+      id: p.id,
+      deviceType: p.deviceType,
+      transports: p.transports as string[] | null,
+      createdAt: p.createdAt.toISOString(),
+    })),
+  });
+}
+
+function transportLabel(transports: string[] | null, t: (key: string) => string): string {
+  if (!transports || transports.length === 0) return t("settings.security.passkey");
+  if (transports.includes("internal")) return t("settings.security.thisDevice");
+  if (transports.includes("usb")) return t("settings.security.securityKey");
+  if (transports.includes("ble")) return t("settings.security.bluetooth");
+  if (transports.includes("hybrid")) return t("settings.security.phoneOrTablet");
+  return t("settings.security.passkey");
+}
+
+export default function Settings({ loaderData }: Route.ComponentProps) {
+  const { user, passkeys } = loaderData;
+  const { t } = useTranslation("journal");
+  const profileFetcher = useFetcher();
+  const emailFetcher = useFetcher();
+  const deleteFetcher = useFetcher();
+
+  const [displayName, setDisplayName] = useState(user.displayName ?? "");
+  const [bio, setBio] = useState(user.bio ?? "");
+  const [profileSaved, setProfileSaved] = useState(false);
+
+  const [newEmail, setNewEmail] = useState("");
+  const [showEmailForm, setShowEmailForm] = useState(false);
+  const [emailSent, setEmailSent] = useState(false);
+
+  const [supportsPasskey, setSupportsPasskey] = useState<boolean | null>(null);
+  const [addingPasskey, setAddingPasskey] = useState(false);
+  const [passkeyError, setPasskeyError] = useState<string | null>(null);
+
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const [deleteUsername, setDeleteUsername] = useState("");
+
+  useEffect(() => {
+    import("@simplewebauthn/browser").then(({ browserSupportsWebAuthn }) => {
+      setSupportsPasskey(browserSupportsWebAuthn());
+    });
+  }, []);
+
+  useEffect(() => {
+    if (profileFetcher.data && !profileFetcher.data.error) {
+      setProfileSaved(true);
+      const timer = setTimeout(() => setProfileSaved(false), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [profileFetcher.data]);
+
+  useEffect(() => {
+    if (emailFetcher.data && !emailFetcher.data.error) {
+      setEmailSent(true);
+    }
+  }, [emailFetcher.data]);
+
+  const handleAddPasskey = useCallback(async () => {
+    setAddingPasskey(true);
+    setPasskeyError(null);
+
+    try {
+      const startResp = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ step: "add-passkey", userId: user.id }),
+      });
+      const startData = await startResp.json();
+      if (startData.error) {
+        setPasskeyError(startData.error);
+        return;
+      }
+
+      const { startRegistration } = await import("@simplewebauthn/browser");
+      const webAuthnResp = await startRegistration(startData.options);
+
+      const finishResp = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          step: "finish-add-passkey",
+          userId: user.id,
+          response: webAuthnResp,
+          challenge: startData.options.challenge,
+        }),
+      });
+
+      const finishData = await finishResp.json();
+      if (finishData.error) {
+        setPasskeyError(finishData.error);
+      } else {
+        window.location.reload();
+      }
+    } catch (err) {
+      setPasskeyError((err as Error).message);
+    } finally {
+      setAddingPasskey(false);
+    }
+  }, [user.id]);
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8">
+      <h1 className="text-2xl font-bold text-gray-900">{t("settings.title")}</h1>
+
+      <nav className="mt-4 flex gap-4 border-b border-gray-200 pb-2">
+        <a href="#profile" className="text-sm font-medium text-blue-600 hover:text-blue-800">
+          {t("settings.profile.title")}
+        </a>
+        <a href="#security" className="text-sm font-medium text-blue-600 hover:text-blue-800">
+          {t("settings.security.title")}
+        </a>
+        <a href="#account" className="text-sm font-medium text-blue-600 hover:text-blue-800">
+          {t("settings.account.title")}
+        </a>
+      </nav>
+
+      {/* Profile Section */}
+      <section id="profile" className="mt-8">
+        <h2 className="text-lg font-semibold text-gray-900">{t("settings.profile.title")}</h2>
+        <profileFetcher.Form method="post" action="/api/settings/profile" className="mt-4 space-y-4">
+          <div>
+            <label htmlFor="displayName" className="block text-sm font-medium text-gray-700">
+              {t("settings.profile.displayName")}
+            </label>
+            <input
+              id="displayName"
+              name="displayName"
+              type="text"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              placeholder={user.username}
+              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+          </div>
+          <div>
+            <label htmlFor="bio" className="block text-sm font-medium text-gray-700">
+              {t("settings.profile.bio")}
+            </label>
+            <textarea
+              id="bio"
+              name="bio"
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              maxLength={160}
+              rows={3}
+              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+            <p className="mt-1 text-xs text-gray-500">{bio.length}/160</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="submit"
+              disabled={profileFetcher.state !== "idle"}
+              className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+            >
+              {profileFetcher.state !== "idle" ? t("common.loading") : t("common.save")}
+            </button>
+            {profileSaved && (
+              <p className="text-sm text-green-600">{t("settings.profile.saved")}</p>
+            )}
+            {profileFetcher.data?.error && (
+              <p className="text-sm text-red-600">{profileFetcher.data.error}</p>
+            )}
+          </div>
+        </profileFetcher.Form>
+      </section>
+
+      {/* Security Section */}
+      <section id="security" className="mt-12">
+        <h2 className="text-lg font-semibold text-gray-900">{t("settings.security.title")}</h2>
+        <p className="mt-1 text-sm text-gray-600">{t("settings.security.description")}</p>
+
+        <div className="mt-4 space-y-3">
+          {passkeys.map((passkey) => (
+            <div key={passkey.id} className="flex items-center justify-between rounded-md border border-gray-200 p-3">
+              <div>
+                <p className="text-sm font-medium text-gray-900">
+                  {transportLabel(passkey.transports, t)}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {t("settings.security.addedOn", {
+                    date: new Date(passkey.createdAt).toLocaleDateString(),
+                  })}
+                </p>
+              </div>
+              <deleteFetcher.Form
+                method="post"
+                action="/api/settings/passkey/delete"
+                onSubmit={(e) => {
+                  const isLast = passkeys.length === 1;
+                  const msg = isLast
+                    ? t("settings.security.deleteLastWarning")
+                    : t("settings.security.deleteConfirm");
+                  if (!confirm(msg)) e.preventDefault();
+                }}
+              >
+                <input type="hidden" name="credentialId" value={passkey.id} />
+                <button
+                  type="submit"
+                  className="text-sm text-red-600 hover:text-red-800"
+                >
+                  {t("common.delete")}
+                </button>
+              </deleteFetcher.Form>
+            </div>
+          ))}
+
+          {passkeys.length === 0 && (
+            <p className="text-sm text-gray-500">{t("settings.security.noPasskeys")}</p>
+          )}
+        </div>
+
+        {passkeyError && (
+          <p className="mt-2 text-sm text-red-600">{passkeyError}</p>
+        )}
+
+        {supportsPasskey === true && (
+          <button
+            onClick={handleAddPasskey}
+            disabled={addingPasskey}
+            className="mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            {addingPasskey ? t("settingUp") : t("settings.security.addPasskey")}
+          </button>
+        )}
+
+        {supportsPasskey === false && (
+          <p className="mt-4 text-sm text-amber-700">{t("auth.passkeyNotSupported")}</p>
+        )}
+      </section>
+
+      {/* Account Section */}
+      <section id="account" className="mt-12">
+        <h2 className="text-lg font-semibold text-gray-900">{t("settings.account.title")}</h2>
+
+        {/* Email */}
+        <div className="mt-4">
+          <label className="block text-sm font-medium text-gray-700">{t("auth.email")}</label>
+          <div className="mt-1 flex items-center gap-3">
+            <p className="text-sm text-gray-900">{user.email}</p>
+            {!showEmailForm && !emailSent && (
+              <button
+                onClick={() => setShowEmailForm(true)}
+                className="text-sm text-blue-600 hover:text-blue-800"
+              >
+                {t("settings.account.changeEmail")}
+              </button>
+            )}
+          </div>
+
+          {showEmailForm && !emailSent && (
+            <emailFetcher.Form method="post" action="/api/settings/email" className="mt-2 flex gap-2">
+              <input
+                name="newEmail"
+                type="email"
+                required
+                value={newEmail}
+                onChange={(e) => setNewEmail(e.target.value)}
+                placeholder={t("settings.account.newEmailPlaceholder")}
+                className="block flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              />
+              <button
+                type="submit"
+                disabled={emailFetcher.state !== "idle"}
+                className="rounded-md bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+              >
+                {t("settings.account.sendVerification")}
+              </button>
+              <button
+                type="button"
+                onClick={() => { setShowEmailForm(false); setNewEmail(""); }}
+                className="text-sm text-gray-500 hover:text-gray-700"
+              >
+                {t("common.cancel")}
+              </button>
+            </emailFetcher.Form>
+          )}
+
+          {emailFetcher.data?.error && (
+            <p className="mt-2 text-sm text-red-600">{emailFetcher.data.error}</p>
+          )}
+
+          {emailSent && (
+            <p className="mt-2 text-sm text-green-600">{t("settings.account.verificationSent")}</p>
+          )}
+        </div>
+
+        {/* Delete Account */}
+        <div className="mt-8 rounded-md border border-red-200 bg-red-50 p-4">
+          <h3 className="text-sm font-semibold text-red-800">{t("settings.account.dangerZone")}</h3>
+          <p className="mt-1 text-sm text-red-700">{t("settings.account.deleteDescription")}</p>
+
+          {!deleteConfirm ? (
+            <button
+              onClick={() => setDeleteConfirm(true)}
+              className="mt-3 rounded-md border border-red-300 bg-white px-4 py-2 text-sm text-red-700 hover:bg-red-50"
+            >
+              {t("settings.account.deleteAccount")}
+            </button>
+          ) : (
+            <div className="mt-3 space-y-2">
+              <p className="text-sm text-red-800">
+                {t("settings.account.deleteConfirmPrompt", { username: user.username })}
+              </p>
+              <input
+                type="text"
+                value={deleteUsername}
+                onChange={(e) => setDeleteUsername(e.target.value)}
+                placeholder={user.username}
+                className="block w-full rounded-md border border-red-300 px-3 py-2 text-sm"
+              />
+              <div className="flex gap-2">
+                <form method="post" action="/api/settings/delete-account">
+                  <button
+                    type="submit"
+                    disabled={deleteUsername !== user.username}
+                    className="rounded-md bg-red-600 px-4 py-2 text-sm text-white hover:bg-red-700 disabled:opacity-50"
+                  >
+                    {t("settings.account.confirmDelete")}
+                  </button>
+                </form>
+                <button
+                  onClick={() => { setDeleteConfirm(false); setDeleteUsername(""); }}
+                  className="text-sm text-gray-500 hover:text-gray-700"
+                >
+                  {t("common.cancel")}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}

e2e/settings.test.ts

@@ -0,0 +1,184 @@
+import { test, expect, type CDPSession, type Page } from "@playwright/test";
+
+async function setupVirtualAuthenticator(cdp: CDPSession) {
+  await cdp.send("WebAuthn.enable");
+  const { authenticatorId } = await cdp.send("WebAuthn.addVirtualAuthenticator", {
+    options: {
+      protocol: "ctap2",
+      transport: "internal",
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  });
+  return authenticatorId;
+}
+
+async function removeVirtualAuthenticator(cdp: CDPSession, authenticatorId: string) {
+  await cdp.send("WebAuthn.removeVirtualAuthenticator", { authenticatorId });
+  await cdp.send("WebAuthn.disable");
+}
+
+async function registerAndLogin(page: Page, cdp: CDPSession) {
+  const email = `settings-${Date.now()}@example.com`;
+  const username = `settingsuser${Date.now()}`;
+
+  await page.goto("/auth/register");
+  await page.getByLabel("Email").fill(email);
+  await page.getByLabel("Username").fill(username);
+  await page.getByRole("button", { name: /Register with Passkey/ }).click();
+  await expect(page).toHaveURL("/", { timeout: 10000 });
+
+  return { email, username };
+}
+
+test.describe("Account Settings", () => {
+  test("unauthenticated user is redirected to login", async ({ page }) => {
+    await page.goto("/settings");
+    await expect(page).toHaveURL(/\/auth\/login/, { timeout: 5000 });
+  });
+
+  test("settings page loads for authenticated user", async ({ page }) => {
+    const cdp = await page.context().newCDPSession(page);
+    const authenticatorId = await setupVirtualAuthenticator(cdp);
+    await registerAndLogin(page, cdp);
+
+    await page.goto("/settings");
+    await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+    await expect(page.getByText("Profile")).toBeVisible();
+    await expect(page.getByText("Security")).toBeVisible();
+    await expect(page.getByText("Account")).toBeVisible();
+
+    await removeVirtualAuthenticator(cdp, authenticatorId);
+  });
+
+  test("update display name and bio", async ({ page }) => {
+    const cdp = await page.context().newCDPSession(page);
+    const authenticatorId = await setupVirtualAuthenticator(cdp);
+    const { username } = await registerAndLogin(page, cdp);
+
+    await page.goto("/settings");
+
+    await page.getByLabel("Display Name").fill("Test Display Name");
+    await page.getByLabel("Bio").fill("I love hiking!");
+    await page.getByRole("button", { name: "Save" }).click();
+    await expect(page.getByText("Profile saved")).toBeVisible({ timeout: 5000 });
+
+    // Reload and verify persistence
+    await page.reload();
+    await expect(page.getByLabel("Display Name")).toHaveValue("Test Display Name");
+    await expect(page.getByLabel("Bio")).toHaveValue("I love hiking!");
+
+    // Verify public profile reflects changes
+    await page.goto(`/users/${username}`);
+    await expect(page.getByText("Test Display Name")).toBeVisible();
+
+    await removeVirtualAuthenticator(cdp, authenticatorId);
+  });
+
+  test("passkey list shows registered passkey", async ({ page }) => {
+    const cdp = await page.context().newCDPSession(page);
+    const authenticatorId = await setupVirtualAuthenticator(cdp);
+    await registerAndLogin(page, cdp);
+
+    await page.goto("/settings");
+    // Should show the passkey registered during registration
+    await expect(page.getByText("This device")).toBeVisible();
+    await expect(page.getByText(/Added/)).toBeVisible();
+
+    await removeVirtualAuthenticator(cdp, authenticatorId);
+  });
+
+  test("add and delete passkey from settings", async ({ page }) => {
+    const cdp = await page.context().newCDPSession(page);
+    const authenticatorId = await setupVirtualAuthenticator(cdp);
+    await registerAndLogin(page, cdp);
+
+    await page.goto("/settings");
+
+    // Should have 1 passkey from registration
+    const deleteButtons = page.getByRole("button", { name: "Delete" });
+    await expect(deleteButtons).toHaveCount(1);
+
+    // Add another passkey
+    await page.getByRole("button", { name: "Add Passkey" }).click();
+    await page.waitForTimeout(1000);
+
+    // After reload, should have 2 passkeys
+    await expect(deleteButtons).toHaveCount(2, { timeout: 5000 });
+
+    // Delete one
+    page.on("dialog", (dialog) => dialog.accept());
+    await deleteButtons.first().click();
+    await expect(page).toHaveURL(/\/settings/, { timeout: 5000 });
+    await expect(page.getByRole("button", { name: "Delete" })).toHaveCount(1);
+
+    await removeVirtualAuthenticator(cdp, authenticatorId);
+  });
+
+  test("delete last passkey shows warning", async ({ page }) => {
+    const cdp = await page.context().newCDPSession(page);
+    const authenticatorId = await setupVirtualAuthenticator(cdp);
+    await registerAndLogin(page, cdp);
+
+    await page.goto("/settings");
+
+    // Intercept the confirm dialog to check it contains the warning
+    let dialogMessage = "";
+    page.on("dialog", async (dialog) => {
+      dialogMessage = dialog.message();
+      await dialog.accept();
+    });
+
+    await page.getByRole("button", { name: "Delete" }).click();
+    expect(dialogMessage).toContain("only passkey");
+
+    // After deleting, should show "No passkeys registered"
+    await expect(page.getByText(/No passkeys registered/)).toBeVisible({ timeout: 5000 });
+
+    await removeVirtualAuthenticator(cdp, authenticatorId);
+  });
+
+  test("settings link visible in nav when logged in", async ({ page }) => {
+    const cdp = await page.context().newCDPSession(page);
+    const authenticatorId = await setupVirtualAuthenticator(cdp);
+    await registerAndLogin(page, cdp);
+
+    await expect(page.getByRole("navigation").getByRole("link", { name: "Settings" })).toBeVisible();
+
+    await removeVirtualAuthenticator(cdp, authenticatorId);
+  });
+
+  test("settings link not visible when logged out", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByRole("navigation").getByRole("link", { name: "Settings" })).not.toBeVisible();
+  });
+
+  test("account deletion requires correct username", async ({ page }) => {
+    const cdp = await page.context().newCDPSession(page);
+    const authenticatorId = await setupVirtualAuthenticator(cdp);
+    const { username } = await registerAndLogin(page, cdp);
+
+    await page.goto("/settings");
+
+    // Click delete account
+    await page.getByRole("button", { name: "Delete Account" }).click();
+
+    // Type wrong username — button should be disabled
+    await page.getByPlaceholder(username).fill("wrongname");
+    await expect(page.getByRole("button", { name: "Permanently Delete" })).toBeDisabled();
+
+    // Type correct username — button should be enabled
+    await page.getByPlaceholder(username).fill(username);
+    await expect(page.getByRole("button", { name: "Permanently Delete" })).toBeEnabled();
+
+    // Submit deletion
+    await page.getByRole("button", { name: "Permanently Delete" }).click();
+    await expect(page).toHaveURL("/", { timeout: 10000 });
+
+    // Session should be destroyed — nav should show login
+    await expect(page.getByRole("navigation").getByRole("link", { name: "Sign In" })).toBeVisible({ timeout: 5000 });
+
+    await removeVirtualAuthenticator(cdp, authenticatorId);
+  });
+});

packages/i18n/src/locales/de.ts

@@ -93,14 +93,6 @@ export default {
   journal: {
     title: "trails.cool",
     subtitle: "Dein Outdoor-Aktivitäten-Tagebuch",
-    nav: {
-      routes: "Routen",
-      activities: "Aktivitäten",
-      login: "Anmelden",
-      register: "Registrieren",
-      profile: "Profil",
-      logout: "Abmelden",
-    },
     welcome: "Willkommen,",
     addPasskeyPrompt: "Füge einen Passkey hinzu, um dich schneller auf diesem Gerät anzumelden.",
     addPasskey: "Passkey hinzufügen",
@@ -130,6 +122,50 @@ export default {
       linkToRoute: "Mit Route verknüpfen",
       createRouteFromActivity: "Route aus Aktivität erstellen",
     },
+    settings: {
+      title: "Einstellungen",
+      profile: {
+        title: "Profil",
+        displayName: "Anzeigename",
+        bio: "Bio",
+        saved: "Profil gespeichert.",
+      },
+      security: {
+        title: "Sicherheit",
+        description: "Verwalte deine Passkeys zum Anmelden.",
+        addPasskey: "Passkey hinzufügen",
+        passkey: "Passkey",
+        thisDevice: "Dieses Gerät",
+        securityKey: "Sicherheitsschlüssel",
+        bluetooth: "Bluetooth",
+        phoneOrTablet: "Telefon oder Tablet",
+        addedOn: "Hinzugefügt am {{date}}",
+        noPasskeys: "Keine Passkeys registriert. Du kannst dich per Magic Link anmelden.",
+        deleteConfirm: "Möchtest du diesen Passkey wirklich löschen?",
+        deleteLastWarning: "Dies ist dein einziger Passkey. Du musst Magic Links zum Anmelden verwenden. Trotzdem löschen?",
+      },
+      account: {
+        title: "Konto",
+        changeEmail: "Ändern",
+        newEmailPlaceholder: "Neue E-Mail-Adresse",
+        sendVerification: "Bestätigen",
+        verificationSent: "Bestätigungs-E-Mail gesendet. Prüfe deinen Posteingang.",
+        dangerZone: "Gefahrenzone",
+        deleteDescription: "Lösche dein Konto und alle zugehörigen Daten unwiderruflich.",
+        deleteAccount: "Konto löschen",
+        deleteConfirmPrompt: "Gib \"{{username}}\" ein, um die Löschung zu bestätigen:",
+        confirmDelete: "Endgültig löschen",
+      },
+    },
+    nav: {
+      routes: "Routen",
+      activities: "Aktivitäten",
+      login: "Anmelden",
+      register: "Registrieren",
+      profile: "Profil",
+      settings: "Einstellungen",
+      logout: "Abmelden",
+    },
     auth: {
       login: "Anmelden",
       register: "Registrieren",

packages/i18n/src/locales/en.ts

@@ -93,14 +93,6 @@ export default {
   journal: {
     title: "trails.cool",
     subtitle: "Your outdoor activity journal",
-    nav: {
-      routes: "Routes",
-      activities: "Activities",
-      login: "Sign In",
-      register: "Register",
-      profile: "Profile",
-      logout: "Log Out",
-    },
     welcome: "Welcome,",
     addPasskeyPrompt: "Add a passkey for faster sign-in on this device.",
     addPasskey: "Add Passkey",
@@ -130,6 +122,50 @@ export default {
       linkToRoute: "Link to Route",
       createRouteFromActivity: "Create Route from Activity",
     },
+    settings: {
+      title: "Settings",
+      profile: {
+        title: "Profile",
+        displayName: "Display Name",
+        bio: "Bio",
+        saved: "Profile saved.",
+      },
+      security: {
+        title: "Security",
+        description: "Manage your passkeys for signing in.",
+        addPasskey: "Add Passkey",
+        passkey: "Passkey",
+        thisDevice: "This device",
+        securityKey: "Security key",
+        bluetooth: "Bluetooth",
+        phoneOrTablet: "Phone or tablet",
+        addedOn: "Added {{date}}",
+        noPasskeys: "No passkeys registered. You can sign in with magic links.",
+        deleteConfirm: "Are you sure you want to delete this passkey?",
+        deleteLastWarning: "This is your only passkey. You will need to use magic links to sign in. Delete anyway?",
+      },
+      account: {
+        title: "Account",
+        changeEmail: "Change",
+        newEmailPlaceholder: "New email address",
+        sendVerification: "Verify",
+        verificationSent: "Verification email sent. Check your inbox.",
+        dangerZone: "Danger Zone",
+        deleteDescription: "Permanently delete your account and all associated data.",
+        deleteAccount: "Delete Account",
+        deleteConfirmPrompt: "Type \"{{username}}\" to confirm deletion:",
+        confirmDelete: "Permanently Delete",
+      },
+    },
+    nav: {
+      routes: "Routes",
+      activities: "Activities",
+      login: "Sign In",
+      register: "Register",
+      profile: "Profile",
+      settings: "Settings",
+      logout: "Log Out",
+    },
     auth: {
       login: "Sign In",
       register: "Register",