trails/apps/journal/app/routes/auth.verify.tsx
Ullrich Schäfer be5766fa50
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>
2026-03-29 10:09:06 +02:00

39 lines
1.3 KiB
TypeScript

import { redirect, data } from "react-router";
import type { Route } from "./+types/auth.verify";
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);
return redirect("/?add-passkey=1", { headers: { "Set-Cookie": cookie } });
} catch (e) {
return data({ error: (e as Error).message }, { status: 400 });
}
}
export default function VerifyPage() {
return (
<div className="mx-auto max-w-md px-4 py-16 text-center">
<p className="text-red-600">Invalid or expired magic link.</p>
<a href="/auth/login" className="mt-4 inline-block text-blue-600 hover:underline">
Request a new one
</a>
</div>
);
}