mostly working

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()}`}

src/components/DeletionForm.tsx

@@ -143,7 +143,6 @@ export default function DeletionForm() {
                   initialRemainingTime={countDown()}
                   size={48}
                   strokeWidth={6}
-                  colors="#60a5fa"
                 >
                   {renderTime}
                 </CountdownCircleTimer>

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,

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) {
-      return new Response(null, {
+      console.log(
-        status: 302,
+        "[Email Login Callback] Login successful, redirecting to:",
-        headers: { Location: result.redirectTo || "/account" },
+        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: "/login?error=auth_failed" },
+        headers
+      });
+    } else {
+      console.error(
+        "[Email Login Callback] Login failed (result.success=false)"
+      );
+      return new Response(null, {
+        status: 302,
+        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 errorMessage =
-    const isTokenError = errorMessage.includes("expired") || errorMessage.includes("invalid");
+      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"
-      },
+      }
     });
   }
 }

src/routes/contact.tsx

@@ -419,7 +419,6 @@ export default function ContactPage() {
                       initialRemainingTime={remainingTime()}
                       size={48}
                       strokeWidth={6}
-                      colors={"#60a5fa"}
                       onComplete={() => setRemainingTime(0)}
                     >
                       {renderTime}

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 { remainingTime, startCountdown, setRemainingTime } = useCountdown();
-    const expires = new Date(timer);
-    const remaining = expires.getTime() - Date.now();
-    const remainingInSeconds = remaining / 1000;
 
-    if (remainingInSeconds <= 0) {
+  onMount(() => {
-      setCountDown(0);
+    setJsEnabled(true);
-      if (timerInterval) {
+  });
-        clearInterval(timerInterval);
-      }
-    } else {
-      setCountDown(remainingInSeconds);
-    }
-  };
 
   createEffect(() => {
-    const timer = getClientCookie("emailLoginLinkRequested");
+    // Try server data first (more accurate)
-    if (timer) {
+    const serverData = loginData();
-      timerInterval = setInterval(
+    if (serverData?.remainingTime && serverData.remainingTime > 0) {
-        () => calcRemainder(timer),
+      const expirationTime = new Date(
-        1000
+        Date.now() + serverData.remainingTime * 1000
-      ) as unknown as number;
+      );
+      startCountdown(expirationTime);
+      return;
     }
 
-    onCleanup(() => {
+    // Fall back to client cookie if server data not available yet
-      if (timerInterval) {
+    const timer = getClientCookie("emailLoginLinkRequested");
-        clearInterval(timerInterval);
+    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) {
+          // Set countdown directly - cookie might not be readable immediately
-            if (timerInterval) {
+          const expirationTime = new Date(
-              clearInterval(timerInterval);
+            Date.now() + COOLDOWN_TIMERS.EMAIL_LOGIN_LINK_MS
-            }
+          );
-            timerInterval = setInterval(
+          startCountdown(expirationTime);
-              () => calcRemainder(timer),
-              1000
-            ) as unknown as number;
-          }
         } 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()
@@ -480,17 +569,27 @@ export default function LoginPage() {
                         : "Get Link"}
                   </Button>
                 }
+              >
+                <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>
+                  }
                 >
                   <CountdownCircleTimer
                     duration={COUNTDOWN_CONFIG.EMAIL_LOGIN_LINK_DURATION_S}
-                  initialRemainingTime={countDown()}
+                    initialRemainingTime={remainingTime()}
                     size={48}
                     strokeWidth={6}
-                  colors="var(--color-blue)"
+                    onComplete={() => setRemainingTime(0)}
                   >
                     {renderTime}
                   </CountdownCircleTimer>
                 </Show>
+              </Show>
 
               <Show when={!register() && !usePassword()}>
                 <A
@@ -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">

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)}

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}

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>
+        const loginUrl = `${domain}/api/auth/email-login-callback?email=${email}&token=${token}&rememberMe=${rememberMe}`;
-<head>
+
-    <style>
+        const htmlContent = generateLoginLinkEmail({
-        .center {
+          email,
-            display: flex;
+          loginUrl,
-            justify-content: center;
+          loginCode
-            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>`;
 
         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>
+        const resetUrl = `${domain}/login/password-reset?token=${token}`;
-<head>
+
-    <style>
+        const htmlContent = generatePasswordResetEmail({ resetUrl });
-        .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>`;
 
         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>
+        const verificationUrl = `${domain}/api/auth/email-verification-callback?email=${email}&token=${token}`;
-<head>
+
-    <style>
+        const htmlContent = generateEmailVerificationEmail({ verificationUrl });
-        .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>`;
 
         await sendEmail(email, "freno.me email verification", htmlContent);
 

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>

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
+  });
+}

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>

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>