feat: implement auth state management with RouteGuards

frontend/src/pages/Activate.tsx

@@ -1,7 +1,7 @@
 import { CheckCircleIcon, XCircleIcon } from "@phosphor-icons/react";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { preAuthApiClient } from "../api/apiClient";
+import { publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import { endpoints, replacePathParams } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
@@ -26,7 +26,7 @@ export default function Activate() {
           uidb64,
           token,
         });
-        await preAuthApiClient.get(url);
+        await publicApi.get(url);
         setStatus("success");
       } catch (err) {
         console.error("Activation error:", err);

frontend/src/pages/Drawer.tsx

@@ -1,21 +1,28 @@
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { useAuth } from "../store/useAuth";
+import { useAuth } from "../hooks/useAuth";
 
 export default function Drawer() {
-  const { user, isAuthenticated } = useAuth();
-  const navigate = useNavigate();
-
-  // Redirect to login if not authenticated
-  useEffect(() => {
-    if (!isAuthenticated) {
-      navigate("/login");
-    }
-  }, [isAuthenticated, navigate]);
+  const { user, logout } = useAuth();
 
   if (!user) return null;
 
   return (
-    <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom"></div>
+    <div className="glass-card w-full max-w-sm p-8 text-center flex flex-col gap-6 fade-zoom">
+      <div className="space-y-2">
+        <h1 className="font-display text-2xl font-bold text-primary">
+          Your Drawer
+        </h1>
+        <p className="text-sm opacity-70">Welcome back, {user.full_name}</p>
+      </div>
+
+      <div className="divider opacity-10" />
+
+      <button
+        type="button"
+        onClick={logout}
+        className="btn btn-link btn-xs opacity-40 hover:opacity-100 no-underline transition-all"
+      >
+        Sign Out
+      </button>
+    </div>
   );
 }

frontend/src/pages/Editor.tsx

@@ -1,3 +1,4 @@
+import { LockIcon, TrayIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 import ComposeCanvas from "../components/ui/ComposeCanvas";
 import DateDisplay from "../components/ui/DateDisplay";
@@ -30,9 +31,30 @@ export default function Editor() {
 
         <div
           id="writer-toolbar"
-          className="flex items-center justify-center mb-4 min-h-12 bg-white/5 rounded-sm border border-white/5 font-display text-sm tracking-widest text-secondary-content"
+          className="flex items-center justify-between mb-8 h-14 bg-base-100/50 backdrop-blur-md rounded-full border border-base-content/5 px-6"
         >
-          Toolbar Placeholder
+          <div className="flex gap-4">Toolbar Placeholder</div>
+
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm text-[10px] tracking-[0.2em] uppercase font-bold text-base-content/60 hover:text-base-content"
+              title="Keep in your private drawer"
+            >
+              <TrayIcon size={18} weight="bold" />
+              <span className="hidden md:inline">Keep</span>
+            </button>
+
+            <div className="w-px h-4 bg-base-content/10 mx-2" />
+
+            <button
+              type="button"
+              className="btn btn-primary btn-sm rounded-full px-6 text-[10px] tracking-[0.3em] uppercase font-black"
+            >
+              <LockIcon size={14} weight="fill" className="mr-1" />
+              Seal
+            </button>
+          </div>
         </div>
         <ComposeCanvas />
       </div>

frontend/src/pages/Login.tsx

@@ -4,13 +4,15 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { z } from "zod";
+import { api, publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
+import { endpoints } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
-import { useAuth } from "../store/useAuth";
+import { useAuth } from "../hooks/useAuth";
 
 const loginSchema = z.object({
-  email: z.email("Please enter a valid email"),
+  email: z.string().email("Please enter a valid email"),
   password: z.string().min(1, "Password is required"),
 });
 
@@ -20,7 +22,7 @@ export default function Login() {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
   const [apiError, setApiError] = useState<string | null>(null);
-  const login = useAuth((state) => state.login);
+  const { login } = useAuth();
 
   const {
     register,
@@ -34,7 +36,18 @@ export default function Login() {
     setIsLoading(true);
     setApiError(null);
     try {
-      await login(data);
+      // 1. Authenticate
+      const { data: authData } = await publicApi.post(endpoints.LOGIN, data);
+
+      // 2. Fetch User Profile with the fresh token
+      // We pass the header explicitly to avoid any race conditions with interceptors
+      const { data: userData } = await api.get(endpoints.ME, {
+        headers: { Authorization: `Bearer ${authData.access}` },
+      });
+
+      // 3. Update store using the hook method
+      await login(authData.access, userData);
+
       navigate(ROUTES.DRAWER);
     } catch (err) {
       console.error("Login error:", err);
@@ -49,59 +62,61 @@ export default function Login() {
     }
   };
 
-  <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-    <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
-      <h1 className="card-title font-display text-2xl font-bold justify-center text-primary tracking-tight">
-        Sign in to <Logo />
-      </h1>
+  return (
+    <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
+      <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
+        <h1 className="card-title font-display text-2xl font-bold justify-center text-primary tracking-tight">
+          Sign in to <Logo />
+        </h1>
 
-      {apiError && (
-        <div className="alert alert-error text-xs py-2 rounded-md">
-          <span>{apiError}</span>
+        {apiError && (
+          <div className="alert alert-error text-xs py-2 rounded-md">
+            <span>{apiError}</span>
+          </div>
+        )}
+
+        <FormField
+          label="Email"
+          type="email"
+          placeholder="you@email.com"
+          registration={register("email")}
+          error={errors.email?.message}
+        />
+
+        <FormField
+          label="Password"
+          type="password"
+          placeholder="••••••••"
+          registration={register("password")}
+          error={errors.password?.message}
+        />
+
+        <div className="card-actions mt-4">
+          <button
+            type="submit"
+            disabled={isLoading}
+            aria-label="Sign In"
+            className="btn btn-primary w-full shadow-lg"
+          >
+            {isLoading ? (
+              <span className="loading loading-spinner loading-sm" />
+            ) : (
+              "Sign In"
+            )}
+          </button>
         </div>
-      )}
 
-      <FormField
-        label="Email"
-        type="email"
-        placeholder="you@email.com"
-        registration={register("email")}
-        error={errors.email?.message}
-      />
-
-      <FormField
-        label="Password"
-        type="password"
-        placeholder="••••••••"
-        registration={register("password")}
-        error={errors.password?.message}
-      />
-
-      <div className="card-actions mt-4">
-        <button
-          type="submit"
-          disabled={isLoading}
-          aria-label="Sign In"
-          className="btn btn-primary w-full shadow-lg"
-        >
-          {isLoading ? (
-            <span className="loading loading-spinner loading-sm" />
-          ) : (
-            "Sign In"
-          )}
-        </button>
-      </div>
-
-      <div className="text-center text-sm font-medium text-base-content/70">
-        Don't have an account?{" "}
-        <button
-          type="button"
-          onClick={() => navigate(ROUTES.ONBOARD)}
-          className="link link-primary no-underline hover:underline font-bold"
-        >
-          Register
-        </button>
-      </div>
-    </form>
-  </div>;
+        <div className="text-center text-sm font-medium text-base-content/70">
+          Don't have an account?{" "}
+          <button
+            type="button"
+            onClick={() => navigate(ROUTES.ONBOARD)}
+            className="link link-primary no-underline hover:underline font-bold"
+          >
+            Register
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 }

frontend/src/pages/Register.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { z } from "zod";
-import { preAuthApiClient } from "../api/apiClient";
+import { publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
 import { endpoints } from "../config/endpoints";
@@ -42,7 +42,7 @@ export default function Register() {
     setIsLoading(true);
     setApiError(null);
     try {
-      await preAuthApiClient.post(endpoints.REGISTER, {
+      await publicApi.post(endpoints.REGISTER, {
         full_name: data.full_name,
         email: data.email,
         password: data.password,