mostly working

2026-01-07 17:53:21 -05:00
parent 5b0f6dba0f
commit 6a934880f9
13 changed files with 772 additions and 188 deletions
--- a/src/components/CountdownCircleTimer.tsx
+++ b/src/components/CountdownCircleTimer.tsx
@@ -5,7 +5,6 @@ interface CountdownCircleTimerProps {
  initialRemainingTime?: number;
  size: number;
  strokeWidth: number;
-  colors: string;
  children: (props: { remainingTime: number }) => any;
  onComplete?: () => void;
  isPlaying?: boolean;
@@ -106,7 +105,7 @@ const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
          cy={props.size / 2}
          r={radius}
          fill="none"
-          stroke={props.colors}
+          stroke={`var(--color-blue)`}
          stroke-width={props.strokeWidth}
          stroke-dasharray={`${circumference}`}
          stroke-dashoffset={`${strokeDashoffset()}`}
--- a/src/components/DeletionForm.tsx
+++ b/src/components/DeletionForm.tsx
@@ -143,7 +143,6 @@ export default function DeletionForm() {
                  initialRemainingTime={countDown()}
                  size={48}
                  strokeWidth={6}
-                  colors="#60a5fa"
                >
                  {renderTime}
                </CountdownCircleTimer>
--- a/src/config.ts
+++ b/src/config.ts
@@ -130,7 +130,7 @@ export const PASSWORD_RESET_CONFIG = {
 // ============================================================

 export const COOLDOWN_TIMERS = {
-  EMAIL_LOGIN_LINK_MS: 2 * 60 * 1000,
+  EMAIL_LOGIN_LINK_MS: 30 * 1000,
  EMAIL_LOGIN_LINK_COOKIE_MAX_AGE: 2 * 60,
  PASSWORD_RESET_REQUEST_MS: 5 * 60 * 1000,
  PASSWORD_RESET_REQUEST_COOKIE_MAX_AGE: 5 * 60,
@@ -185,7 +185,7 @@ export const TYPEWRITER_CONFIG = {
 // ============================================================

 export const COUNTDOWN_CONFIG = {
-  EMAIL_LOGIN_LINK_DURATION_S: 120,
+  EMAIL_LOGIN_LINK_DURATION_S: 30,
  PASSWORD_RESET_DURATION_S: 300,
  CONTACT_FORM_DURATION_S: 60,
  PASSWORD_RESET_SUCCESS_DURATION_S: 5,
--- a/src/routes/api/auth/email-login-callback.ts
+++ b/src/routes/api/auth/email-login-callback.ts
@@ -1,6 +1,7 @@
 import type { APIEvent } from "@solidjs/start/server";
 import { appRouter } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/utils";
+import { getResponseHeaders } from "vinxi/http";

 export async function GET(event: APIEvent) {
  const url = new URL(event.request.url);
@@ -8,45 +9,108 @@ export async function GET(event: APIEvent) {
  const token = url.searchParams.get("token");
  const rememberMeParam = url.searchParams.get("rememberMe");

+  console.log("[Email Login Callback] Request received:", {
+    email,
+    hasToken: !!token,
+    tokenLength: token?.length,
+    rememberMeParam
+  });
+
  // Parse rememberMe parameter
  const rememberMe = rememberMeParam === "true";

  if (!email || !token) {
+    console.error("[Email Login Callback] Missing required parameters:", {
+      hasEmail: !!email,
+      hasToken: !!token
+    });
    return new Response(null, {
      status: 302,
-      headers: { Location: "/login?error=missing_params" },
+      headers: { Location: "/login?error=missing_params" }
    });
  }

  try {
+    console.log("[Email Login Callback] Creating tRPC caller...");
    // Create tRPC caller to invoke the emailLogin procedure
    const ctx = await createTRPCContext(event);
    const caller = appRouter.createCaller(ctx);

+    console.log("[Email Login Callback] Calling emailLogin procedure...");
    // Call the email login handler
    const result = await caller.auth.emailLogin({
      email,
      token,
-      rememberMe,
+      rememberMe
    });

+    console.log("[Email Login Callback] Login result:", result);
+
    if (result.success) {
+      console.log(
+        "[Email Login Callback] Login successful, redirecting to:",
+        result.redirectTo
+      );
+
+      // Get the response headers that were set by the session (includes Set-Cookie)
+      const responseHeaders = getResponseHeaders(event.nativeEvent);
+      console.log(
+        "[Email Login Callback] Response headers from event:",
+        Object.keys(responseHeaders)
+      );
+
+      // Create redirect response with the session cookie
+      const redirectUrl = result.redirectTo || "/account";
+      const headers = new Headers({
+        Location: redirectUrl
+      });
+
+      // Copy Set-Cookie headers from the session response
+      if (responseHeaders["set-cookie"]) {
+        const cookies = Array.isArray(responseHeaders["set-cookie"])
+          ? responseHeaders["set-cookie"]
+          : [responseHeaders["set-cookie"]];
+
+        console.log("[Email Login Callback] Found cookies:", cookies.length);
+        cookies.forEach((cookie) => {
+          headers.append("Set-Cookie", cookie);
+          console.log(
+            "[Email Login Callback] Adding cookie:",
+            cookie.substring(0, 50) + "..."
+          );
+        });
+      } else {
+        console.error("[Email Login Callback] NO SET-COOKIE HEADER FOUND!");
+        console.error("[Email Login Callback] All headers:", responseHeaders);
+      }
+
      return new Response(null, {
        status: 302,
-        headers: { Location: result.redirectTo || "/account" },
+        headers
      });
    } else {
+      console.error(
+        "[Email Login Callback] Login failed (result.success=false)"
+      );
      return new Response(null, {
        status: 302,
-        headers: { Location: "/login?error=auth_failed" },
+        headers: { Location: "/login?error=auth_failed" }
      });
    }
  } catch (error) {
-    console.error("Email login callback error:", error);
+    console.error("[Email Login Callback] Error caught:", error);

    // Check if it's a token expiration error
-    const errorMessage = error instanceof Error ? error.message : "server_error";
-    const isTokenError = errorMessage.includes("expired") || errorMessage.includes("invalid");
+    const errorMessage =
+      error instanceof Error ? error.message : "server_error";
+    const isTokenError =
+      errorMessage.includes("expired") || errorMessage.includes("invalid");
+
+    console.error("[Email Login Callback] Error details:", {
+      errorMessage,
+      isTokenError,
+      errorType: error instanceof Error ? error.constructor.name : typeof error
+    });

    return new Response(null, {
      status: 302,
@@ -54,7 +118,7 @@ export async function GET(event: APIEvent) {
        Location: isTokenError
          ? "/login?error=link_expired"
          : "/login?error=server_error"
-      },
+      }
    });
  }
 }
--- a/src/routes/contact.tsx
+++ b/src/routes/contact.tsx
@@ -419,7 +419,6 @@ export default function ContactPage() {
                      initialRemainingTime={remainingTime()}
                      size={48}
                      strokeWidth={6}
-                      colors={"#60a5fa"}
                      onComplete={() => setRemainingTime(0)}
                    >
                      {renderTime}
--- a/src/routes/login/index.tsx
+++ b/src/routes/login/index.tsx
@@ -1,24 +1,31 @@
-import { createSignal, createEffect, onCleanup, Show } from "solid-js";
+import { createSignal, createEffect, onCleanup, onMount, Show } from "solid-js";
 import {
  A,
  useNavigate,
  useSearchParams,
  redirect,
-  query
+  query,
+  createAsync
 } from "@solidjs/router";
 import { PageHead } from "~/components/PageHead";
 import { revalidateAuth } from "~/lib/auth-query";
-import { getEvent } from "vinxi/http";
+import { getEvent, getCookie } from "vinxi/http";
 import GoogleLogo from "~/components/icons/GoogleLogo";
 import GitHub from "~/components/icons/GitHub";
 import CountdownCircleTimer from "~/components/CountdownCircleTimer";
 import { isValidEmail, validatePassword } from "~/lib/validation";
 import { getClientCookie } from "~/lib/cookies.client";
 import { env } from "~/env/client";
-import { VALIDATION_CONFIG, COUNTDOWN_CONFIG } from "~/config";
+import {
+  VALIDATION_CONFIG,
+  COUNTDOWN_CONFIG,
+  COOLDOWN_TIMERS,
+  AUTH_CONFIG
+} from "~/config";
 import Input from "~/components/ui/Input";
 import PasswordInput from "~/components/ui/PasswordInput";
 import { Button } from "~/components/ui/Button";
+import { useCountdown } from "~/lib/useCountdown";

 const checkAuth = query(async () => {
  "use server";
@@ -33,10 +40,36 @@ const checkAuth = query(async () => {
  return { isAuthenticated };
 }, "loginAuthCheck");

+const getLoginData = query(async () => {
+  "use server";
+  const emailLinkExp = getCookie("emailLoginLinkRequested");
+  let remainingTime = 0;
+
+  if (emailLinkExp) {
+    const expires = new Date(emailLinkExp);
+    remainingTime = Math.max(0, (expires.getTime() - Date.now()) / 1000);
+  }
+
+  return { remainingTime };
+}, "login-data");
+
 export const route = {
  load: () => checkAuth()
 };

+// Helper to convert expiry string to human-readable format
+function expiryToHuman(expiry: string): string {
+  const value = parseInt(expiry);
+  if (expiry.endsWith("m")) {
+    return value === 1 ? "1 minute" : `${value} minutes`;
+  } else if (expiry.endsWith("h")) {
+    return value === 1 ? "1 hour" : `${value} hours`;
+  } else if (expiry.endsWith("d")) {
+    return value === 1 ? "1 day" : `${value} days`;
+  }
+  return expiry;
+}
+
 export default function LoginPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
@@ -44,55 +77,59 @@ export default function LoginPage() {
  const register = () => searchParams.mode === "register";
  const usePassword = () => searchParams.auth === "password";

+  // Load server data using createAsync
+  const loginData = createAsync(() => getLoginData(), {
+    deferStream: true
+  });
+
  const [error, setError] = createSignal("");
  const [loading, setLoading] = createSignal(false);
-  const [countDown, setCountDown] = createSignal(0);
  const [emailSent, setEmailSent] = createSignal(false);
+  const [loginCode, setLoginCode] = createSignal("");
+  const [codeError, setCodeError] = createSignal("");
+  const [codeLoading, setCodeLoading] = createSignal(false);
  const [showPasswordError, setShowPasswordError] = createSignal(false);
  const [showPasswordSuccess, setShowPasswordSuccess] = createSignal(false);
  const [passwordsMatch, setPasswordsMatch] = createSignal(false);
  const [password, setPassword] = createSignal("");
  const [passwordConf, setPasswordConf] = createSignal("");
+  const [jsEnabled, setJsEnabled] = createSignal(false);

  let emailRef: HTMLInputElement | undefined;
  let passwordRef: HTMLInputElement | undefined;
  let passwordConfRef: HTMLInputElement | undefined;
  let rememberMeRef: HTMLInputElement | undefined;
-  let timerInterval: number | undefined;

  const googleClientId = env.VITE_GOOGLE_CLIENT_ID;
  const githubClientId = env.VITE_GITHUB_CLIENT_ID;
  const domain = env.VITE_DOMAIN || "https://www.freno.me";

-  const calcRemainder = (timer: string) => {
-    const expires = new Date(timer);
-    const remaining = expires.getTime() - Date.now();
-    const remainingInSeconds = remaining / 1000;
+  const { remainingTime, startCountdown, setRemainingTime } = useCountdown();

-    if (remainingInSeconds <= 0) {
-      setCountDown(0);
-      if (timerInterval) {
-        clearInterval(timerInterval);
-      }
-    } else {
-      setCountDown(remainingInSeconds);
-    }
-  };
+  onMount(() => {
+    setJsEnabled(true);
+  });

  createEffect(() => {
-    const timer = getClientCookie("emailLoginLinkRequested");
-    if (timer) {
-      timerInterval = setInterval(
-        () => calcRemainder(timer),
-        1000
-      ) as unknown as number;
+    // Try server data first (more accurate)
+    const serverData = loginData();
+    if (serverData?.remainingTime && serverData.remainingTime > 0) {
+      const expirationTime = new Date(
+        Date.now() + serverData.remainingTime * 1000
+      );
+      startCountdown(expirationTime);
+      return;
    }

-    onCleanup(() => {
-      if (timerInterval) {
-        clearInterval(timerInterval);
+    // Fall back to client cookie if server data not available yet
+    const timer = getClientCookie("emailLoginLinkRequested");
+    if (timer) {
+      try {
+        startCountdown(timer);
+      } catch (e) {
+        console.error("Failed to start countdown from cookie:", e);
      }
-    });
+    }
  });

  createEffect(() => {
@@ -255,16 +292,12 @@ export default function LoginPage() {

        if (response.ok && result.result?.data?.success) {
          setEmailSent(true);
-          const timer = getClientCookie("emailLoginLinkRequested");
-          if (timer) {
-            if (timerInterval) {
-              clearInterval(timerInterval);
-            }
-            timerInterval = setInterval(
-              () => calcRemainder(timer),
-              1000
-            ) as unknown as number;
-          }
+
+          // Set countdown directly - cookie might not be readable immediately
+          const expirationTime = new Date(
+            Date.now() + COOLDOWN_TIMERS.EMAIL_LOGIN_LINK_MS
+          );
+          startCountdown(expirationTime);
        } else {
          const errorMsg =
            result.error?.message ||
@@ -282,6 +315,16 @@ export default function LoginPage() {
                ? "Please wait before requesting another email link"
                : errorMsg
            );
+
+            // Start the countdown timer when rate limited
+            const timer = getClientCookie("emailLoginLinkRequested");
+            if (timer) {
+              try {
+                startCountdown(timer);
+              } catch (e) {
+                console.error("Failed to start countdown from cookie:", e);
+              }
+            }
          } else {
            setError(errorMsg);
          }
@@ -296,9 +339,10 @@ export default function LoginPage() {
  };

  const renderTime = ({ remainingTime }: { remainingTime: number }) => {
+    const time = isNaN(remainingTime) ? 0 : Math.max(0, remainingTime);
    return (
      <div class="timer">
-        <div class="value">{remainingTime.toFixed(0)}</div>
+        <div class="value">{time.toFixed(0)}</div>
      </div>
    );
  };
@@ -318,6 +362,47 @@ export default function LoginPage() {
    checkForMatch(password(), target.value);
  };

+  const handleCodeSubmit = async (e: Event) => {
+    e.preventDefault();
+    setCodeLoading(true);
+    setCodeError("");
+
+    if (!emailRef || !loginCode() || loginCode().length !== 6) {
+      setCodeError("Please enter a valid 6-digit code");
+      setCodeLoading(false);
+      return;
+    }
+
+    const email = emailRef.value;
+    const rememberMe = rememberMeRef?.checked || false;
+
+    try {
+      const response = await fetch("/api/trpc/auth.emailCodeLogin", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, code: loginCode(), rememberMe })
+      });
+
+      const result = await response.json();
+
+      if (response.ok && result.result?.data?.success) {
+        revalidateAuth();
+        navigate("/account", { replace: true });
+      } else {
+        const errorMsg =
+          result.error?.message ||
+          result.result?.data?.message ||
+          "Invalid code";
+        setCodeError(errorMsg);
+      }
+    } catch (err: any) {
+      console.error("Code login error:", err);
+      setCodeError(err.message || "An error occurred");
+    } finally {
+      setCodeLoading(false);
+    }
+  };
+
  return (
    <>
      <PageHead
@@ -470,7 +555,11 @@ export default function LoginPage() {

            <div class="flex justify-center py-4">
              <Show
-                when={!register() && !usePassword() && countDown() > 0}
+                when={
+                  !register() &&
+                  !usePassword() &&
+                  (remainingTime() > 0 || (loginData()?.remainingTime ?? 0) > 0)
+                }
                fallback={
                  <Button type="submit" loading={loading()} class="w-36">
                    {register()
@@ -481,15 +570,25 @@ export default function LoginPage() {
                  </Button>
                }
              >
-                <CountdownCircleTimer
-                  duration={COUNTDOWN_CONFIG.EMAIL_LOGIN_LINK_DURATION_S}
-                  initialRemainingTime={countDown()}
-                  size={48}
-                  strokeWidth={6}
-                  colors="var(--color-blue)"
+                <Show
+                  when={jsEnabled()}
+                  fallback={
+                    <div class="flex items-center justify-center text-sm text-zinc-400">
+                      Please wait {Math.ceil(loginData()?.remainingTime ?? 0)}s
+                      before requesting another link
+                    </div>
+                  }
                >
-                  {renderTime}
-                </CountdownCircleTimer>
+                  <CountdownCircleTimer
+                    duration={COUNTDOWN_CONFIG.EMAIL_LOGIN_LINK_DURATION_S}
+                    initialRemainingTime={remainingTime()}
+                    size={48}
+                    strokeWidth={6}
+                    onComplete={() => setRemainingTime(0)}
+                  >
+                    {renderTime}
+                  </CountdownCircleTimer>
+                </Show>
              </Show>

              <Show when={!register() && !usePassword()}>
@@ -531,6 +630,53 @@ export default function LoginPage() {
            <Show when={emailSent()}>Email Sent!</Show>
          </div>

+          {/* Code Input Section */}
+          <Show when={emailSent() && !register() && !usePassword()}>
+            <div class="bg-surface0 text-text mx-auto mt-6 w-full max-w-md rounded-lg border p-6">
+              <h3 class="mb-2 text-center text-lg font-semibold">
+                Enter Your Code
+              </h3>
+              <p class="text-surface2 mb-2 text-center text-sm">
+                Check your email for a 6-digit code
+              </p>
+              <p class="text-surface2 mb-4 text-center text-xs italic">
+                Code expires in{" "}
+                {expiryToHuman(AUTH_CONFIG.EMAIL_LOGIN_LINK_EXPIRY)}
+              </p>
+
+              <form onSubmit={handleCodeSubmit} class="flex flex-col gap-4">
+                <div>
+                  <input
+                    type="text"
+                    value={loginCode()}
+                    onInput={(e) =>
+                      setLoginCode(
+                        e.currentTarget.value.replace(/\D/g, "").slice(0, 6)
+                      )
+                    }
+                    placeholder="000000"
+                    maxLength={6}
+                    class="text-blue mx-auto block w-48 rounded-lg border border-zinc-300 bg-white px-4 py-3 text-center text-2xl font-bold tracking-widest dark:border-zinc-600 dark:bg-zinc-900"
+                    autocomplete="off"
+                  />
+                </div>
+
+                <Show when={codeError()}>
+                  <div class="text-red text-center text-sm">{codeError()}</div>
+                </Show>
+
+                <Button
+                  type="submit"
+                  loading={codeLoading()}
+                  disabled={loginCode().length !== 6}
+                  class="mx-auto w-full"
+                >
+                  Verify Code
+                </Button>
+              </form>
+            </div>
+          </Show>
+
          <div class="rule-around text-center">Or</div>

          <div class="my-2 flex justify-center">
--- a/src/routes/login/password-reset.tsx
+++ b/src/routes/login/password-reset.tsx
@@ -238,7 +238,6 @@ export default function PasswordResetPage() {
                  duration={COUNTDOWN_CONFIG.PASSWORD_RESET_SUCCESS_DURATION_S}
                  size={200}
                  strokeWidth={12}
-                  colors="var(--color-blue)"
                  onComplete={() => false}
                >
                  {({ remainingTime }) => renderTime(remainingTime)}
--- a/src/routes/login/request-password-reset.tsx
+++ b/src/routes/login/request-password-reset.tsx
@@ -137,7 +137,6 @@ export default function RequestPasswordResetPage() {
                initialRemainingTime={remainingTime()}
                size={48}
                strokeWidth={6}
-                colors="#60a5fa"
                onComplete={() => false}
              >
                {renderTime}
--- a/src/server/api/routers/auth.ts
+++ b/src/server/api/routers/auth.ts
@@ -56,6 +56,11 @@ import {
 import { checkAuthStatus } from "~/server/auth";
 import { v4 as uuidV4 } from "uuid";
 import { jwtVerify, SignJWT } from "jose";
+import {
+  generateLoginLinkEmail,
+  generatePasswordResetEmail,
+  generateEmailVerificationEmail
+} from "~/server/email-templates";

 /**
 * Safely extract H3Event from Context
@@ -552,25 +557,42 @@ export const authRouter = createTRPCRouter({
      })
    )
    .mutation(async ({ input, ctx }) => {
-      const { email, token, rememberMe } = input;
+      const { email, token } = input;

      try {
+        console.log("[Email Login] Attempting login for:", email);
+
        const secret = new TextEncoder().encode(env.JWT_SECRET_KEY);
        const { payload } = await jwtVerify(token, secret);

+        console.log("[Email Login] JWT verified successfully. Payload:", {
+          email: payload.email,
+          rememberMe: payload.rememberMe,
+          exp: payload.exp
+        });
+
        if (payload.email !== email) {
+          console.error("[Email Login] Email mismatch:", {
+            payloadEmail: payload.email,
+            inputEmail: email
+          });
          throw new TRPCError({
            code: "UNAUTHORIZED",
            message: "Email mismatch"
          });
        }

+        // Use rememberMe from JWT payload (source of truth)
+        const rememberMe = (payload.rememberMe as boolean) || false;
+        console.log("[Email Login] Using rememberMe from JWT:", rememberMe);
+
        const conn = ConnectionFactory();
        const query = `SELECT * FROM User WHERE email = ?`;
        const params = [email];
        const res = await conn.execute({ sql: query, args: params });

        if (!res.rows[0]) {
+          console.error("[Email Login] User not found for email:", email);
          throw new TRPCError({
            code: "NOT_FOUND",
            message: "User not found"
@@ -580,14 +602,18 @@ export const authRouter = createTRPCRouter({
        const userId = (res.rows[0] as unknown as User).id;
        const isAdmin = userId === env.ADMIN_ID;

+        console.log("[Email Login] User found:", { userId, isAdmin });
+
        // Create session with Vinxi (handles DB + encrypted cookie)
        const clientIP = getClientIP(getH3Event(ctx));
        const userAgent = getUserAgent(getH3Event(ctx));
+
+        console.log("[Email Login] Creating auth session...");
        await createAuthSession(
          getH3Event(ctx),
          userId,
          isAdmin,
-          rememberMe || false,
+          rememberMe,
          clientIP,
          userAgent
        );
@@ -595,11 +621,13 @@ export const authRouter = createTRPCRouter({
        // Set CSRF token for authenticated session
        setCSRFToken(getH3Event(ctx));

+        console.log("[Email Login] Session created successfully");
+
        // Log successful email link login
        await logAuditEvent({
          userId,
          eventType: "auth.login.success",
-          eventData: { method: "email_link", rememberMe: rememberMe || false },
+          eventData: { method: "email_link", rememberMe },
          ipAddress: clientIP,
          userAgent,
          success: true
@@ -610,6 +638,8 @@ export const authRouter = createTRPCRouter({
          redirectTo: "/account"
        };
      } catch (error) {
+        console.error("[Email Login] Error during login:", error);
+
        // Log failed email link login
        const { ipAddress, userAgent } = getAuditContext(getH3Event(ctx));
        await logAuditEvent({
@@ -617,7 +647,163 @@ export const authRouter = createTRPCRouter({
          eventData: {
            method: "email_link",
            email: input.email,
-            reason: error instanceof TRPCError ? error.message : "unknown"
+            reason:
+              error instanceof TRPCError
+                ? error.message
+                : error instanceof Error
+                  ? error.message
+                  : "unknown"
+          },
+          ipAddress,
+          userAgent,
+          success: false
+        });
+
+        if (error instanceof TRPCError) {
+          throw error;
+        }
+        throw new TRPCError({
+          code: "UNAUTHORIZED",
+          message: "Authentication failed"
+        });
+      }
+    }),
+
+  emailCodeLogin: publicProcedure
+    .input(
+      z.object({
+        email: z.string().email(),
+        code: z.string().length(6),
+        rememberMe: z.boolean().optional()
+      })
+    )
+    .mutation(async ({ input, ctx }) => {
+      const { email, code, rememberMe } = input;
+
+      try {
+        console.log(
+          "[Email Code Login] Attempting login for:",
+          email,
+          "with code:",
+          code
+        );
+
+        const conn = ConnectionFactory();
+        const res = await conn.execute({
+          sql: "SELECT * FROM User WHERE email = ?",
+          args: [email]
+        });
+
+        if (!res.rows[0]) {
+          throw new TRPCError({
+            code: "NOT_FOUND",
+            message: "User not found"
+          });
+        }
+
+        // Check if there's a valid JWT token with this code
+        // We need to find the token that was generated for this email
+        // Since we can't store tokens in DB efficiently, we'll verify against the cookie
+        const requested = getCookie(getH3Event(ctx), "emailLoginLinkRequested");
+        if (!requested) {
+          throw new TRPCError({
+            code: "UNAUTHORIZED",
+            message: "No login request found. Please request a new code."
+          });
+        }
+
+        // Get the token from cookie (we'll store it when sending email)
+        const storedToken = getCookie(getH3Event(ctx), "emailLoginToken");
+        if (!storedToken) {
+          throw new TRPCError({
+            code: "UNAUTHORIZED",
+            message: "No login token found. Please request a new code."
+          });
+        }
+
+        // Verify the JWT and check the code
+        const secret = new TextEncoder().encode(env.JWT_SECRET_KEY);
+        let payload;
+        try {
+          const result = await jwtVerify(storedToken, secret);
+          payload = result.payload;
+        } catch (jwtError) {
+          throw new TRPCError({
+            code: "UNAUTHORIZED",
+            message: "Code expired. Please request a new one."
+          });
+        }
+
+        if (payload.email !== email) {
+          throw new TRPCError({
+            code: "UNAUTHORIZED",
+            message: "Email mismatch"
+          });
+        }
+
+        if (payload.code !== code) {
+          throw new TRPCError({
+            code: "UNAUTHORIZED",
+            message: "Invalid code"
+          });
+        }
+
+        const userId = (res.rows[0] as unknown as User).id;
+        const isAdmin = userId === env.ADMIN_ID;
+
+        // Use rememberMe from JWT if not provided in input
+        const shouldRemember =
+          rememberMe ?? (payload.rememberMe as boolean) ?? false;
+
+        console.log("[Email Code Login] Code verified, creating session");
+
+        // Create session
+        const clientIP = getClientIP(getH3Event(ctx));
+        const userAgent = getUserAgent(getH3Event(ctx));
+        await createAuthSession(
+          getH3Event(ctx),
+          userId,
+          isAdmin,
+          shouldRemember,
+          clientIP,
+          userAgent
+        );
+
+        // Set CSRF token
+        setCSRFToken(getH3Event(ctx));
+
+        console.log("[Email Code Login] Session created successfully");
+
+        // Log successful code login
+        await logAuditEvent({
+          userId,
+          eventType: "auth.login.success",
+          eventData: { method: "email_code", rememberMe: shouldRemember },
+          ipAddress: clientIP,
+          userAgent,
+          success: true
+        });
+
+        return {
+          success: true,
+          redirectTo: "/account"
+        };
+      } catch (error) {
+        console.error("[Email Code Login] Error during login:", error);
+
+        // Log failed code login
+        const { ipAddress, userAgent } = getAuditContext(getH3Event(ctx));
+        await logAuditEvent({
+          eventType: "auth.login.failed",
+          eventData: {
+            method: "email_code",
+            email: input.email,
+            reason:
+              error instanceof TRPCError
+                ? error.message
+                : error instanceof Error
+                  ? error.message
+                  : "unknown"
          },
          ipAddress,
          userAgent,
@@ -627,7 +813,6 @@ export const authRouter = createTRPCRouter({
        if (error instanceof TRPCError) {
          throw error;
        }
-        console.error("Email login failed:", error);
        throw new TRPCError({
          code: "UNAUTHORIZED",
          message: "Authentication failed"
@@ -995,53 +1180,29 @@ export const authRouter = createTRPCRouter({
          });
        }

+        // Generate 6-digit code
+        const loginCode = Math.floor(
+          100000 + Math.random() * 900000
+        ).toString();
+
        const secret = new TextEncoder().encode(env.JWT_SECRET_KEY);
        const token = await new SignJWT({
          email,
-          rememberMe: rememberMe ?? false
+          rememberMe: rememberMe ?? false,
+          code: loginCode
        })
          .setProtectedHeader({ alg: "HS256" })
          .setExpirationTime(AUTH_CONFIG.EMAIL_LOGIN_LINK_EXPIRY)
          .sign(secret);

        const domain = env.VITE_DOMAIN || "https://freno.me";
-        const htmlContent = `<html>
-<head>
-    <style>
-        .center {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-        }
-        .button {
-            display: inline-block;
-            padding: 10px 20px;
-            text-align: center;
-            text-decoration: none;
-            color: #ffffff;
-            background-color: #007BFF;
-            border-radius: 6px;
-            transition: background-color 0.3s;
-        }
-        .button:hover {
-            background-color: #0056b3;
-        }
-    </style>
-</head>
-<body>
-    <div class="center">
-        <p>Click the button below to log in</p>
-    </div>
-    <br/>
-    <div class="center">
-        <a href="${domain}/api/auth/email-login-callback?email=${email}&token=${token}&rememberMe=${rememberMe}" class="button">Log In</a>
-    </div>
-    <div class="center">
-        <p>You can ignore this if you did not request this email, someone may have requested it in error</p>
-    </div>
-</body>
-</html>`;
+        const loginUrl = `${domain}/api/auth/email-login-callback?email=${email}&token=${token}&rememberMe=${rememberMe}`;
+
+        const htmlContent = generateLoginLinkEmail({
+          email,
+          loginUrl,
+          loginCode
+        });

        await sendEmail(email, "freno.me login link", htmlContent);

@@ -1056,6 +1217,15 @@ export const authRouter = createTRPCRouter({
          }
        );

+        // Store the token in a cookie so it can be verified with the code later
+        setCookie(getH3Event(ctx), "emailLoginToken", token, {
+          maxAge: COOLDOWN_TIMERS.EMAIL_LOGIN_LINK_COOKIE_MAX_AGE,
+          httpOnly: true,
+          secure: env.NODE_ENV === "production",
+          sameSite: "strict",
+          path: "/"
+        });
+
        return { success: true, message: "email sent" };
      } catch (error) {
        if (error instanceof TRPCError) {
@@ -1120,46 +1290,9 @@ export const authRouter = createTRPCRouter({
        const { token } = await createPasswordResetToken(user.id);

        const domain = env.VITE_DOMAIN || "https://freno.me";
-        const htmlContent = `<html>
-<head>
-    <style>
-        .center {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-        }
-        .button {
-            display: inline-block;
-            padding: 10px 20px;
-            text-align: center;
-            text-decoration: none;
-            color: #ffffff;
-            background-color: #007BFF;
-            border-radius: 6px;
-            transition: background-color 0.3s;
-        }
-        .button:hover {
-            background-color: #0056b3;
-        }
-    </style>
-</head>
-<body>
-    <div class="center">
-        <p>Click the button below to reset password</p>
-    </div>
-    <br/>
-    <div class="center">
-        <a href="${domain}/login/password-reset?token=${token}" class="button">Reset Password</a>
-    </div>
-    <div class="center">
-        <p>This link will expire in 1 hour and can only be used once.</p>
-    </div>
-    <div class="center">
-        <p>You can ignore this if you did not request this email, someone may have requested it in error</p>
-    </div>
-</body>
-</html>`;
+        const resetUrl = `${domain}/login/password-reset?token=${token}`;
+
+        const htmlContent = generatePasswordResetEmail({ resetUrl });

        await sendEmail(email, "password reset", htmlContent);

@@ -1377,40 +1510,9 @@ export const authRouter = createTRPCRouter({
          .sign(secret);

        const domain = env.VITE_DOMAIN || "https://freno.me";
-        const htmlContent = `<html>
-<head>
-    <style>
-        .center {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-        }
-        .button {
-            display: inline-block;
-            padding: 10px 20px;
-            text-align: center;
-            text-decoration: none;
-            color: #ffffff;
-            background-color: #007BFF;
-            border-radius: 6px;
-            transition: background-color 0.3s;
-        }
-        .button:hover {
-            background-color: #0056b3;
-        }
-    </style>
-</head>
-<body>
-    <div class="center">
-        <p>Click the button below to verify email</p>
-    </div>
-    <br/>
-    <div class="center">
-        <a href="${domain}/api/auth/email-verification-callback?email=${email}&token=${token}" class="button">Verify Email</a>
-    </div>
-</body>
-</html>`;
+        const verificationUrl = `${domain}/api/auth/email-verification-callback?email=${email}&token=${token}`;
+
+        const htmlContent = generateEmailVerificationEmail({ verificationUrl });

        await sendEmail(email, "freno.me email verification", htmlContent);

--- a/src/server/email-templates/email-verification.html
+++ b/src/server/email-templates/email-verification.html
@@ -0,0 +1,45 @@
+<html>
+  <head>
+    <style>
+      .center {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        flex-direction: column;
+      }
+      .button {
+        display: inline-block;
+        padding: 10px 20px;
+        text-align: center;
+        text-decoration: none;
+        color: #ffffff;
+        background-color: #007bff;
+        border-radius: 6px;
+        transition: background-color 0.3s;
+        margin: 10px 0;
+      }
+      .button:hover {
+        background-color: #0056b3;
+      }
+      .expiry {
+        color: #666;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="center">
+      <h2>Verify Your Email</h2>
+      <p>Click the button below to verify your email address:</p>
+      <a href="{{VERIFICATION_URL}}" class="button">Verify Email</a>
+      <p class="expiry">This link will expire in {{EXPIRY_TIME}}.</p>
+    </div>
+
+    <div class="center" style="margin-top: 30px">
+      <p style="color: #666; font-size: 12px">
+        You can ignore this if you did not request this email
+      </p>
+    </div>
+  </body>
+</html>
--- a/src/server/email-templates/index.ts
+++ b/src/server/email-templates/index.ts
@@ -0,0 +1,117 @@
+import { readFileSync } from "fs";
+import { join } from "path";
+import { AUTH_CONFIG } from "~/config";
+
+/**
+ * Convert expiry string to human-readable format
+ * @param expiry - Expiry string like "15m", "1h", "7d"
+ * @returns Human-readable string like "15 minutes", "1 hour", "7 days"
+ */
+export function expiryToHuman(expiry: string): string {
+  const value = parseInt(expiry);
+  if (expiry.endsWith("m")) {
+    return value === 1 ? "1 minute" : `${value} minutes`;
+  } else if (expiry.endsWith("h")) {
+    return value === 1 ? "1 hour" : `${value} hours`;
+  } else if (expiry.endsWith("d")) {
+    return value === 1 ? "1 day" : `${value} days`;
+  }
+  return expiry;
+}
+
+/**
+ * Load email template from file
+ * @param templateName - Name of the template file (without .html extension)
+ * @returns Template content as string
+ */
+function loadTemplate(templateName: string): string {
+  try {
+    const templatePath = join(
+      process.cwd(),
+      "src",
+      "server",
+      "email-templates",
+      `${templateName}.html`
+    );
+    return readFileSync(templatePath, "utf-8");
+  } catch (error) {
+    console.error(`Failed to load email template: ${templateName}`, error);
+    throw new Error(`Email template not found: ${templateName}`);
+  }
+}
+
+/**
+ * Replace placeholders in template with actual values
+ * @param template - Template string with {{PLACEHOLDER}} markers
+ * @param vars - Object with placeholder values
+ * @returns Processed template string
+ */
+function processTemplate(
+  template: string,
+  vars: Record<string, string>
+): string {
+  let processed = template;
+  for (const [key, value] of Object.entries(vars)) {
+    const placeholder = `{{${key}}}`;
+    processed = processed.replaceAll(placeholder, value);
+  }
+  return processed;
+}
+
+export interface LoginLinkEmailParams {
+  email: string;
+  loginUrl: string;
+  loginCode: string;
+}
+
+/**
+ * Generate login link email HTML
+ */
+export function generateLoginLinkEmail(params: LoginLinkEmailParams): string {
+  const template = loadTemplate("login-link");
+  const expiryTime = expiryToHuman(AUTH_CONFIG.EMAIL_LOGIN_LINK_EXPIRY);
+
+  return processTemplate(template, {
+    LOGIN_URL: params.loginUrl,
+    LOGIN_CODE: params.loginCode,
+    EXPIRY_TIME: expiryTime
+  });
+}
+
+export interface PasswordResetEmailParams {
+  resetUrl: string;
+}
+
+/**
+ * Generate password reset email HTML
+ */
+export function generatePasswordResetEmail(
+  params: PasswordResetEmailParams
+): string {
+  const template = loadTemplate("password-reset");
+  const expiryTime = "1 hour"; // Password reset is hardcoded to 1 hour
+
+  return processTemplate(template, {
+    RESET_URL: params.resetUrl,
+    EXPIRY_TIME: expiryTime
+  });
+}
+
+export interface EmailVerificationParams {
+  verificationUrl: string;
+}
+
+/**
+ * Generate email verification email HTML
+ */
+export function generateEmailVerificationEmail(
+  params: EmailVerificationParams
+): string {
+  const template = loadTemplate("email-verification");
+  const expiryTime = expiryToHuman(AUTH_CONFIG.EMAIL_VERIFICATION_LINK_EXPIRY);
+
+  return processTemplate(template, {
+    VERIFICATION_URL: params.verificationUrl,
+    EXPIRY_TIME: expiryTime
+  });
+}
--- a/src/server/email-templates/login-link.html
+++ b/src/server/email-templates/login-link.html
@@ -0,0 +1,67 @@
+<html>
+  <head>
+    <style>
+      .center {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        flex-direction: column;
+      }
+      .button {
+        display: inline-block;
+        padding: 10px 20px;
+        text-align: center;
+        text-decoration: none;
+        color: #ffffff;
+        background-color: #007bff;
+        border-radius: 6px;
+        transition: background-color 0.3s;
+        margin: 10px 0;
+      }
+      .button:hover {
+        background-color: #0056b3;
+      }
+      .code {
+        font-size: 32px;
+        font-weight: bold;
+        letter-spacing: 8px;
+        color: #007bff;
+        margin: 20px 0;
+        font-family: monospace;
+      }
+      .divider {
+        margin: 30px 0;
+        color: #666;
+      }
+      .expiry {
+        color: #666;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="center">
+      <h2>Login to freno.me</h2>
+      <p>Click the button below to log in automatically:</p>
+      <a href="{{LOGIN_URL}}" class="button">Log In</a>
+      <p class="expiry">Link expires in {{EXPIRY_TIME}}</p>
+    </div>
+
+    <div class="center divider">
+      <p>── OR ──</p>
+    </div>
+
+    <div class="center">
+      <p>Enter this code on the login page:</p>
+      <div class="code">{{LOGIN_CODE}}</div>
+      <p class="expiry">Code expires in {{EXPIRY_TIME}}</p>
+    </div>
+
+    <div class="center" style="margin-top: 30px">
+      <p style="color: #666; font-size: 12px">
+        You can ignore this if you did not request this email
+      </p>
+    </div>
+  </body>
+</html>
--- a/src/server/email-templates/password-reset.html
+++ b/src/server/email-templates/password-reset.html
@@ -0,0 +1,48 @@
+<html>
+  <head>
+    <style>
+      .center {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        flex-direction: column;
+      }
+      .button {
+        display: inline-block;
+        padding: 10px 20px;
+        text-align: center;
+        text-decoration: none;
+        color: #ffffff;
+        background-color: #007bff;
+        border-radius: 6px;
+        transition: background-color 0.3s;
+        margin: 10px 0;
+      }
+      .button:hover {
+        background-color: #0056b3;
+      }
+      .expiry {
+        color: #666;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="center">
+      <h2>Reset Your Password</h2>
+      <p>Click the button below to reset your password:</p>
+      <a href="{{RESET_URL}}" class="button">Reset Password</a>
+      <p class="expiry">
+        This link will expire in {{EXPIRY_TIME}} and can only be used once.
+      </p>
+    </div>
+
+    <div class="center" style="margin-top: 30px">
+      <p style="color: #666; font-size: 12px">
+        You can ignore this if you did not request this email, someone may have
+        requested it in error
+      </p>
+    </div>
+  </body>
+</html>