From a3b9c7225d842918220a505a6a082426cd2e10d5 Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <muhammadsadiqali84@gmail.com>
Date: Mon, 27 Jul 2026 20:52:06 +0500
Subject: [PATCH 1/9] Add login, signup, and backend health check pages with
 routing

---
 frontend/.env.example          |  0
 frontend/app/routes.ts         |  9 +++-
 frontend/app/routes/health.tsx | 48 +++++++++++++++++
 frontend/app/routes/login.tsx  | 85 ++++++++++++++++++++++++++++++
 frontend/app/routes/signup.tsx | 95 ++++++++++++++++++++++++++++++++++
 5 files changed, 235 insertions(+), 2 deletions(-)
 create mode 100644 frontend/.env.example
 create mode 100644 frontend/app/routes/health.tsx
 create mode 100644 frontend/app/routes/login.tsx
 create mode 100644 frontend/app/routes/signup.tsx

diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/app/routes.ts b/frontend/app/routes.ts
index 102b402..954e38b 100644
--- a/frontend/app/routes.ts
+++ b/frontend/app/routes.ts
@@ -1,3 +1,8 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+  index("routes/home.tsx"),
+  route("login", "routes/login.tsx"),
+  route("signup", "routes/signup.tsx"),
+  route("health", "routes/health.tsx"),
+] satisfies RouteConfig;
diff --git a/frontend/app/routes/health.tsx b/frontend/app/routes/health.tsx
new file mode 100644
index 0000000..e83a6e5
--- /dev/null
+++ b/frontend/app/routes/health.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+
+export default function Health() {
+  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
+  const [detail, setDetail] = useState<string>("");
+
+  useEffect(() => {
+    fetch("http://localhost:8000/healthcheck/")
+      .then(async (res) => {
+        const text = await res.text();
+        setDetail(text);
+        setStatus(res.ok ? "ok" : "error");
+      })
+      .catch((err) => {
+        setDetail(err.message);
+        setStatus("error");
+      });
+  }, []);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white px-4 dark:bg-gray-950">
+      <div className="w-full max-w-md rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <h1 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
+          Backend health check
+        </h1>
+        <p
+          className={
+            "mb-4 text-sm font-medium " +
+            (status === "ok"
+              ? "text-green-600 dark:text-green-400"
+              : status === "error"
+              ? "text-red-600 dark:text-red-400"
+              : "text-gray-500 dark:text-gray-400")
+          }
+        >
+          {status === "loading" && "Checking..."}
+          {status === "ok" && "✅ Backend is healthy"}
+          {status === "error" && "❌ Backend unreachable"}
+        </p>
+        {detail && (
+          <pre className="overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 p-3 text-left text-xs text-gray-600 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-400">
+            {detail}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/routes/login.tsx b/frontend/app/routes/login.tsx
new file mode 100644
index 0000000..5d0c481
--- /dev/null
+++ b/frontend/app/routes/login.tsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+
+export default function Login() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch("http://localhost:8000/auth/token/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => null);
+        throw new Error(data?.detail || `Login failed (${res.status})`);
+      }
+      const data = await res.json();
+      sessionStorage.setItem("access", data.access);
+      sessionStorage.setItem("refresh", data.refresh);
+      navigate("/");
+    } catch (err: any) {
+      setError(err.message || "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center bg-white px-4 dark:bg-gray-950">
+      <div className="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <h1 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
+          Log in
+        </h1>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Username
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
+            />
+          </div>
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
+            />
+          </div>
+          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
+          >
+            {loading ? "Logging in..." : "Log in"}
+          </button>
+        </form>
+        <p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+          Don't have an account?{" "}
+          <a href="/signup" className="font-semibold text-gray-900 hover:underline dark:text-gray-100">
+            Sign up
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/routes/signup.tsx b/frontend/app/routes/signup.tsx
new file mode 100644
index 0000000..0b05507
--- /dev/null
+++ b/frontend/app/routes/signup.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+
+export default function Signup() {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch("http://localhost:8000/auth/signup/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, email, password }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => null);
+        throw new Error(data?.detail || `Signup failed (${res.status})`);
+      }
+      navigate("/login");
+    } catch (err: any) {
+      setError(err.message || "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center bg-white px-4 dark:bg-gray-950">
+      <div className="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <h1 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
+          Sign up
+        </h1>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Username
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
+            />
+          </div>
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Email
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
+            />
+          </div>
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
+            />
+          </div>
+          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
+          >
+            {loading ? "Signing up..." : "Sign up"}
+          </button>
+        </form>
+        <p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+          Already have an account?{" "}
+          <a href="/login" className="font-semibold text-gray-900 hover:underline dark:text-gray-100">
+            Log in
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

From df634bacf2a72aeb9f83b016a9fd4351d67b3c28 Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <muhammadsadiqali84@gmail.com>
Date: Tue, 28 Jul 2026 20:20:09 +0500
Subject: [PATCH 2/9] Add login, signup, and health check pages with React
 Router patterns

- Add LoginForm, SignupForm, HealthCheck components
- Add CenteredPageLayout and TextField reusable UI
- Add lib/api.ts, auth.ts, config.ts, health.ts, types.ts
- Use clientAction for login/signup, clientLoader for health check
- Update routes to use React Router data APIs
---
 backend/apps/authentications/api/views.py     |  54 ++++++-
 frontend/.env.example                         |   1 +
 frontend/app/components/HealthCheck.tsx       |  40 +++++
 frontend/app/components/LoginForm.tsx         |  64 ++++++++
 frontend/app/components/SignupForm.tsx        |  71 +++++++++
 .../components/layout/CenteredPageLayout.tsx  |  26 ++++
 frontend/app/components/ui/TextField.tsx      |  54 +++++++
 frontend/app/lib/api.ts                       |  65 +++++++++
 frontend/app/lib/auth.ts                      |  56 +++++++
 frontend/app/lib/config.ts                    |  13 ++
 frontend/app/lib/health.ts                    |  22 +++
 frontend/app/lib/types.ts                     |  41 ++++++
 frontend/app/routes/health.tsx                |  73 ++++------
 frontend/app/routes/home.tsx                  |   2 +-
 frontend/app/routes/login.tsx                 | 123 ++++++----------
 frontend/app/routes/signup.tsx                | 137 ++++++------------
 16 files changed, 620 insertions(+), 222 deletions(-)
 create mode 100644 frontend/app/components/HealthCheck.tsx
 create mode 100644 frontend/app/components/LoginForm.tsx
 create mode 100644 frontend/app/components/SignupForm.tsx
 create mode 100644 frontend/app/components/layout/CenteredPageLayout.tsx
 create mode 100644 frontend/app/components/ui/TextField.tsx
 create mode 100644 frontend/app/lib/api.ts
 create mode 100644 frontend/app/lib/auth.ts
 create mode 100644 frontend/app/lib/config.ts
 create mode 100644 frontend/app/lib/health.ts
 create mode 100644 frontend/app/lib/types.ts

diff --git a/backend/apps/authentications/api/views.py b/backend/apps/authentications/api/views.py
index 4923907..4f63c72 100644
--- a/backend/apps/authentications/api/views.py
+++ b/backend/apps/authentications/api/views.py
@@ -57,27 +57,54 @@ def post(self, request):
         user.save(update_fields=["last_login"])
 
         user_serializer = UserLoginSerializer(user)
+        access_token = login_serializer.validated_data.get("access")
+        refresh_token = login_serializer.validated_data.get("refresh")
+        
         data = {
             "user": user_serializer.data,
-            "token": login_serializer.validated_data,
+            "token": {"access": access_token},
         }
-        return Response(
+        
+        response = Response(
             APIResponse.get_response(
                 data=data,
             )
         )
+        
+        # Set refresh token in HttpOnly cookie
+        if refresh_token:
+            response.set_cookie(
+                "refresh",
+                refresh_token,
+                httponly=True,
+                samesite="Lax",
+                # secure=True  # Ensure HTTPS in production
+            )
+            
+        return response
 
 
 class RefreshTokenAPIView(APIView):
     permission_classes = (AllowAny,)
 
-    @swagger_auto_schema(request_body=TokenRefreshSerializer)
     def post(self, request):
-        req_data = request.data
+        refresh_token = request.COOKIES.get("refresh")
+        if not refresh_token:
+            return Response(
+                APIResponse.get_response(
+                    message="No refresh token provided.",
+                ),
+                status=status.HTTP_401_UNAUTHORIZED,
+            )
+            
+        # Passing it to serializer as 'refresh'
+        req_data = request.data.copy()
+        req_data["refresh"] = refresh_token
+        
         serializer = TokenRefreshSerializer(data=req_data)
         serializer.is_valid(raise_exception=True)
         data = {
-            "token": serializer.validated_data,
+            "token": {"access": serializer.validated_data.get("access")},
         }
         return Response(
             APIResponse.get_response(
@@ -155,9 +182,11 @@ def post(self, request):
         user = serializer.save()
 
         refresh = RefreshToken.for_user(user)
+        access_token = str(refresh.access_token)
+        refresh_token = str(refresh)
+        
         tokens = {
-            "refresh": str(refresh),
-            "access": str(refresh.access_token),
+            "access": access_token,
         }
 
         user_serializer = UserLoginSerializer(user)
@@ -165,7 +194,16 @@ def post(self, request):
             "user": user_serializer.data,
             "token": tokens,
         }
-        return Response(
+        
+        response = Response(
             APIResponse.get_response(message="User created successfully.", data=data),
             status=status.HTTP_201_CREATED,
         )
+        
+        response.set_cookie(
+            "refresh",
+            refresh_token,
+            httponly=True,
+            samesite="Lax",
+        )
+        return response
diff --git a/frontend/.env.example b/frontend/.env.example
index e69de29..5934e2e 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8000
diff --git a/frontend/app/components/HealthCheck.tsx b/frontend/app/components/HealthCheck.tsx
new file mode 100644
index 0000000..1d28f6a
--- /dev/null
+++ b/frontend/app/components/HealthCheck.tsx
@@ -0,0 +1,40 @@
+/**
+ * HealthCheck — presentational component that displays backend health status.
+ *
+ * Receives data as props from the route's clientLoader.
+ * No useEffect, no useState, no fetch — just renders what it's given.
+ */
+
+import { CenteredPageLayout } from "~/components/layout/CenteredPageLayout";
+
+const statusStyles: Record<string, string> = {
+  ok: "text-green-600 dark:text-green-400",
+  error: "text-red-600 dark:text-red-400",
+};
+
+interface HealthCheckProps {
+  ok: boolean;
+  detail: string;
+}
+
+export function HealthCheck({ ok, detail }: HealthCheckProps) {
+  const status = ok ? "ok" : "error";
+
+  return (
+    <CenteredPageLayout maxWidth="max-w-md">
+      <h1 className="mb-4 text-center text-lg font-semibold text-gray-900 dark:text-gray-100">
+        Backend health check
+      </h1>
+
+      <p className={`mb-4 text-center text-sm font-medium ${statusStyles[status]}`}>
+        {ok ? "✅ Backend is healthy" : "❌ Backend unreachable"}
+      </p>
+
+      {detail && (
+        <pre className="overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 p-3 text-left text-xs text-gray-600 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-400">
+          {detail}
+        </pre>
+      )}
+    </CenteredPageLayout>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/components/LoginForm.tsx b/frontend/app/components/LoginForm.tsx
new file mode 100644
index 0000000..450e431
--- /dev/null
+++ b/frontend/app/components/LoginForm.tsx
@@ -0,0 +1,64 @@
+/**
+ * LoginForm — presentational component for the login page.
+ *
+ * All mutation logic lives in the route's clientAction.
+ * This component just renders the form UI and displays errors.
+ */
+
+import { Form, Link } from "react-router";
+import { CenteredPageLayout } from "~/components/layout/CenteredPageLayout";
+import { TextField } from "~/components/ui/TextField";
+
+interface LoginFormProps {
+  error?: string;
+  isSubmitting: boolean;
+}
+
+export function LoginForm({ error, isSubmitting }: LoginFormProps) {
+  return (
+    <CenteredPageLayout>
+      <h1 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        Log in
+      </h1>
+
+      <Form method="post" className="space-y-4">
+        <TextField
+          label="Email"
+          name="email"
+          type="email"
+          required
+          autoComplete="email"
+        />
+        <TextField
+          label="Password"
+          name="password"
+          type="password"
+          required
+          autoComplete="current-password"
+        />
+
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
+        >
+          {isSubmitting ? "Logging in…" : "Log in"}
+        </button>
+      </Form>
+
+      <p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+        Don&apos;t have an account?{" "}
+        <Link
+          to="/signup"
+          className="font-semibold text-gray-900 hover:underline dark:text-gray-100"
+        >
+          Sign up
+        </Link>
+      </p>
+    </CenteredPageLayout>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/components/SignupForm.tsx b/frontend/app/components/SignupForm.tsx
new file mode 100644
index 0000000..986bff3
--- /dev/null
+++ b/frontend/app/components/SignupForm.tsx
@@ -0,0 +1,71 @@
+/**
+ * SignupForm — presentational component for the signup page.
+ *
+ * All mutation logic lives in the route's clientAction.
+ * This component just renders the form UI and displays errors.
+ */
+
+import { Form, Link } from "react-router";
+import { CenteredPageLayout } from "~/components/layout/CenteredPageLayout";
+import { TextField } from "~/components/ui/TextField";
+
+interface SignupFormProps {
+  error?: string;
+  isSubmitting: boolean;
+}
+
+export function SignupForm({ error, isSubmitting }: SignupFormProps) {
+  return (
+    <CenteredPageLayout>
+      <h1 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        Sign up
+      </h1>
+
+      <Form method="post" className="space-y-4">
+        <TextField
+          label="Email"
+          name="email"
+          type="email"
+          required
+          autoComplete="email"
+        />
+        <TextField
+          label="Password"
+          name="password"
+          type="password"
+          required
+          autoComplete="new-password"
+        />
+        <TextField
+          label="Confirm password"
+          name="confirm_password"
+          type="password"
+          required
+          autoComplete="new-password"
+        />
+
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
+        >
+          {isSubmitting ? "Signing up…" : "Sign up"}
+        </button>
+      </Form>
+
+      <p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+        Already have an account?{" "}
+        <Link
+          to="/login"
+          className="font-semibold text-gray-900 hover:underline dark:text-gray-100"
+        >
+          Log in
+        </Link>
+      </p>
+    </CenteredPageLayout>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/components/layout/CenteredPageLayout.tsx b/frontend/app/components/layout/CenteredPageLayout.tsx
new file mode 100644
index 0000000..aa0cf1f
--- /dev/null
+++ b/frontend/app/components/layout/CenteredPageLayout.tsx
@@ -0,0 +1,26 @@
+/**
+ * Shared page layout — centered card on a full-height background.
+ *
+ * Used by login, signup, health, and any future standalone pages.
+ */
+
+interface CenteredPageLayoutProps {
+  children: React.ReactNode;
+  /** Tailwind max-width class, defaults to "max-w-sm" */
+  maxWidth?: string;
+}
+
+export function CenteredPageLayout({
+  children,
+  maxWidth = "max-w-sm",
+}: CenteredPageLayoutProps) {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center bg-white px-4 dark:bg-gray-950">
+      <div
+        className={`w-full ${maxWidth} rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-800 dark:bg-gray-900`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/components/ui/TextField.tsx b/frontend/app/components/ui/TextField.tsx
new file mode 100644
index 0000000..b9777be
--- /dev/null
+++ b/frontend/app/components/ui/TextField.tsx
@@ -0,0 +1,54 @@
+/**
+ * Reusable text input with proper accessibility.
+ *
+ * - Renders <label htmlFor> + <input id name> for a11y
+ * - Uses name + defaultValue (uncontrolled) so React Router <Form> can read via formData
+ * - Supports an optional error message
+ */
+
+interface TextFieldProps {
+  label: string;
+  name: string;
+  id?: string;
+  type?: React.HTMLInputTypeAttribute;
+  required?: boolean;
+  defaultValue?: string;
+  error?: string;
+  autoComplete?: string;
+}
+
+export function TextField({
+  label,
+  name,
+  id,
+  type = "text",
+  required = false,
+  defaultValue,
+  error,
+  autoComplete,
+}: TextFieldProps) {
+  const fieldId = id ?? name;
+
+  return (
+    <div>
+      <label
+        htmlFor={fieldId}
+        className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300"
+      >
+        {label}
+      </label>
+      <input
+        id={fieldId}
+        name={name}
+        type={type}
+        required={required}
+        defaultValue={defaultValue}
+        autoComplete={autoComplete}
+        className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
+      />
+      {error && (
+        <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/lib/api.ts b/frontend/app/lib/api.ts
new file mode 100644
index 0000000..56cc69a
--- /dev/null
+++ b/frontend/app/lib/api.ts
@@ -0,0 +1,65 @@
+/**
+ * Shared HTTP client — the only module that calls fetch().
+ *
+ * Every backend response follows the envelope:
+ *   { message, code, data, error }
+ *
+ * apiFetch() unwraps that envelope:
+ *   - On success → returns envelope.data (typed as T)
+ *   - On failure → throws an Error with the backend's message or first error string
+ */
+
+import { API_URL } from "./config";
+import { getAccessToken } from "./auth";
+import type { ApiEnvelope } from "./types";
+
+export interface ApiFetchOptions {
+  method?: string;
+  body?: unknown;
+  /** Attach Authorization: Bearer header when true */
+  auth?: boolean;
+}
+
+export class ApiError extends Error {
+  status: number;
+  errors: Record<string, unknown>;
+
+  constructor(message: string, status: number, errors: Record<string, unknown> = {}) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.errors = errors;
+  }
+}
+
+export async function apiFetch<T = Record<string, unknown>>(
+  path: string,
+  options: ApiFetchOptions = {}
+): Promise<T> {
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  if (options.auth) {
+    const token = getAccessToken();
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const res = await fetch(`${API_URL}${path}`, {
+    method: options.method ?? "GET",
+    headers,
+    credentials: "include",
+    body: options.body ? JSON.stringify(options.body) : undefined,
+  });
+
+  const json: ApiEnvelope<T> | null = await res.json().catch(() => null);
+
+  if (!res.ok) {
+    const message =
+      json?.message || `Request failed (${res.status})`;
+    throw new ApiError(message, res.status, json?.error ?? {});
+  }
+
+  // Unwrap the envelope — callers get data directly
+  return json!.data;
+}
\ No newline at end of file
diff --git a/frontend/app/lib/auth.ts b/frontend/app/lib/auth.ts
new file mode 100644
index 0000000..0953ccb
--- /dev/null
+++ b/frontend/app/lib/auth.ts
@@ -0,0 +1,56 @@
+/**
+ * Auth service — handles login, signup, and token management.
+ *
+ * Pattern:
+ * - Access token: Saved in-memory (JS variable). Safest route to prevent XSS sniffing.
+ * - Refresh token: Saved in HttpOnly cookie by backend. JS has no access to it.
+ */
+
+import { apiFetch } from "./api";
+import type { AuthData, AuthTokens } from "./types";
+
+// ─── Token storage (In-memory) ───────────────────────────────────
+
+let memoryAccessToken: string | null = null;
+
+export function getAccessToken(): string | null {
+  return memoryAccessToken;
+}
+
+export function storeTokens(tokens: AuthTokens): void {
+  memoryAccessToken = tokens.access;
+}
+
+export function clearTokens(): void {
+  memoryAccessToken = null;
+}
+
+// ─── Auth operations ─────────────────────────────────────────────
+
+/**
+ * Log in with email + password.
+ * Backend will automatically set an HttpOnly cookie for refresh token.
+ */
+export async function login(email: string, password: string): Promise<AuthTokens> {
+  const data = await apiFetch<AuthData>("/auth/token/", {
+    method: "POST",
+    body: { email, password },
+  });
+  return data.token;
+}
+
+/**
+ * Create a new account.
+ * Backend will automatically set an HttpOnly cookie for refresh token.
+ */
+export async function signup(
+  email: string,
+  password: string,
+  confirmPassword: string
+): Promise<AuthTokens> {
+  const data = await apiFetch<AuthData>("/auth/signup/", {
+    method: "POST",
+    body: { email, password, confirm_password: confirmPassword },
+  });
+  return data.token;
+}
\ No newline at end of file
diff --git a/frontend/app/lib/config.ts b/frontend/app/lib/config.ts
new file mode 100644
index 0000000..3e0245c
--- /dev/null
+++ b/frontend/app/lib/config.ts
@@ -0,0 +1,13 @@
+/**
+ * Centralised configuration — the only file that reads import.meta.env.
+ * Every other module imports typed constants from here.
+ */
+
+const raw = import.meta.env.VITE_API_URL;
+if (!raw) {
+  throw new Error(
+    "VITE_API_URL is not set. Copy .env.example → .env.local and fill it in."
+  );
+}
+
+export const API_URL: string = raw;
\ No newline at end of file
diff --git a/frontend/app/lib/health.ts b/frontend/app/lib/health.ts
new file mode 100644
index 0000000..d8022b1
--- /dev/null
+++ b/frontend/app/lib/health.ts
@@ -0,0 +1,22 @@
+/**
+ * Health service — checks backend availability.
+ *
+ * Note: The /healthcheck/ endpoint returns plain text, not the standard
+ * API envelope, so we use raw fetch here instead of apiFetch.
+ */
+
+import { API_URL } from "./config";
+import type { HealthResult } from "./types";
+
+export async function checkBackendHealth(): Promise<HealthResult> {
+  try {
+    const res = await fetch(`${API_URL}/healthcheck/`);
+    const text = await res.text();
+    return { ok: res.ok, detail: text };
+  } catch (err) {
+    return {
+      ok: false,
+      detail: err instanceof Error ? err.message : "Unknown error",
+    };
+  }
+}
diff --git a/frontend/app/lib/types.ts b/frontend/app/lib/types.ts
new file mode 100644
index 0000000..0205870
--- /dev/null
+++ b/frontend/app/lib/types.ts
@@ -0,0 +1,41 @@
+/**
+ * Shared TypeScript types matching the backend's APIResponse envelope.
+ *
+ * The backend always returns:
+ *   { message: string, code: number, data: T, error: Record<string, unknown> }
+ */
+
+// ---------- API envelope ----------
+
+export interface ApiEnvelope<T = Record<string, unknown>> {
+  message: string;
+  code: number;
+  data: T;
+  error: Record<string, unknown>;
+}
+
+// ---------- Auth ----------
+
+export interface AuthTokens {
+  access: string;
+}
+
+export interface UserInfo {
+  id: number;
+  name: string;
+  email: string;
+  is_staff: boolean;
+}
+
+/** Shape returned by both POST /auth/token/ and POST /auth/signup/ */
+export interface AuthData {
+  user: UserInfo;
+  token: AuthTokens;
+}
+
+// ---------- Health ----------
+
+export interface HealthResult {
+  ok: boolean;
+  detail: string;
+}
diff --git a/frontend/app/routes/health.tsx b/frontend/app/routes/health.tsx
index e83a6e5..253a47d 100644
--- a/frontend/app/routes/health.tsx
+++ b/frontend/app/routes/health.tsx
@@ -1,48 +1,31 @@
-import { useEffect, useState } from "react";
+/**
+ * /health route module
+ *
+ * - clientLoader: fetches health status before render (no loading flash)
+ * - meta: sets browser tab title
+ * - default export: renders HealthCheck with loader data
+ *
+ * Uses clientLoader because the health check runs from the user's browser.
+ */
 
-export default function Health() {
-  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
-  const [detail, setDetail] = useState<string>("");
+import { useLoaderData } from "react-router";
+import { checkBackendHealth } from "~/lib/health";
+import { HealthCheck } from "~/components/HealthCheck";
+import type { Route } from "./+types/health";
 
-  useEffect(() => {
-    fetch("http://localhost:8000/healthcheck/")
-      .then(async (res) => {
-        const text = await res.text();
-        setDetail(text);
-        setStatus(res.ok ? "ok" : "error");
-      })
-      .catch((err) => {
-        setDetail(err.message);
-        setStatus("error");
-      });
-  }, []);
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Health Check" },
+    { name: "description", content: "Backend health status" },
+  ];
+}
 
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4 dark:bg-gray-950">
-      <div className="w-full max-w-md rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm dark:border-gray-800 dark:bg-gray-900">
-        <h1 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
-          Backend health check
-        </h1>
-        <p
-          className={
-            "mb-4 text-sm font-medium " +
-            (status === "ok"
-              ? "text-green-600 dark:text-green-400"
-              : status === "error"
-              ? "text-red-600 dark:text-red-400"
-              : "text-gray-500 dark:text-gray-400")
-          }
-        >
-          {status === "loading" && "Checking..."}
-          {status === "ok" && "✅ Backend is healthy"}
-          {status === "error" && "❌ Backend unreachable"}
-        </p>
-        {detail && (
-          <pre className="overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 p-3 text-left text-xs text-gray-600 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-400">
-            {detail}
-          </pre>
-        )}
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
+export async function clientLoader({}: Route.ClientLoaderArgs) {
+  return await checkBackendHealth();
+}
+
+export default function HealthRoute() {
+  const data = useLoaderData<typeof clientLoader>();
+
+  return <HealthCheck ok={data.ok} detail={data.detail} />;
+}
diff --git a/frontend/app/routes/home.tsx b/frontend/app/routes/home.tsx
index 398e47c..cafa18e 100644
--- a/frontend/app/routes/home.tsx
+++ b/frontend/app/routes/home.tsx
@@ -10,4 +10,4 @@ export function meta({}: Route.MetaArgs) {
 
 export default function Home() {
   return <Welcome />;
-}
+}
\ No newline at end of file
diff --git a/frontend/app/routes/login.tsx b/frontend/app/routes/login.tsx
index 5d0c481..2b5c23b 100644
--- a/frontend/app/routes/login.tsx
+++ b/frontend/app/routes/login.tsx
@@ -1,85 +1,50 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
+/**
+ * /login route module
+ *
+ * - clientAction: handles form submission (email + password → auth service → redirect)
+ * - meta: sets browser tab title
+ * - default export: renders LoginForm with any action errors
+ *
+ * Uses clientAction (not server action) because storeTokens uses sessionStorage (browser-only).
+ */
 
-export default function Login() {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
+import { redirect, useActionData, useNavigation } from "react-router";
+import { login, storeTokens } from "~/lib/auth";
+import { LoginForm } from "~/components/LoginForm";
+import type { Route } from "./+types/login";
 
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setError(null);
-    setLoading(true);
-    try {
-      const res = await fetch("http://localhost:8000/auth/token/", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ username, password }),
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => null);
-        throw new Error(data?.detail || `Login failed (${res.status})`);
-      }
-      const data = await res.json();
-      sessionStorage.setItem("access", data.access);
-      sessionStorage.setItem("refresh", data.refresh);
-      navigate("/");
-    } catch (err: any) {
-      setError(err.message || "Something went wrong");
-    } finally {
-      setLoading(false);
-    }
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Log in" },
+    { name: "description", content: "Log in to your account" },
+  ];
+}
+
+export async function clientAction({ request }: Route.ClientActionArgs) {
+  const formData = await request.formData();
+  const email = formData.get("email") as string;
+  const password = formData.get("password") as string;
+
+  try {
+    const tokens = await login(email, password);
+    storeTokens(tokens);
+    return redirect("/");
+  } catch (err) {
+    return {
+      error: err instanceof Error ? err.message : "Something went wrong",
+    };
   }
+}
+
+export default function LoginRoute() {
+  const actionData = useActionData<typeof clientAction>();
+  const navigation = useNavigation();
+  const isSubmitting = navigation.state === "submitting";
 
   return (
-    <div className="flex min-h-screen w-full items-center justify-center bg-white px-4 dark:bg-gray-950">
-      <div className="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-800 dark:bg-gray-900">
-        <h1 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
-          Log in
-        </h1>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
-              Username
-            </label>
-            <input
-              type="text"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
-            />
-          </div>
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
-              Password
-            </label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
-            />
-          </div>
-          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
-          >
-            {loading ? "Logging in..." : "Log in"}
-          </button>
-        </form>
-        <p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
-          Don't have an account?{" "}
-          <a href="/signup" className="font-semibold text-gray-900 hover:underline dark:text-gray-100">
-            Sign up
-          </a>
-        </p>
-      </div>
-    </div>
+    <LoginForm
+      error={actionData && "error" in actionData ? actionData.error : undefined}
+      isSubmitting={isSubmitting}
+    />
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/routes/signup.tsx b/frontend/app/routes/signup.tsx
index 0b05507..cb22e90 100644
--- a/frontend/app/routes/signup.tsx
+++ b/frontend/app/routes/signup.tsx
@@ -1,95 +1,54 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
+/**
+ * /signup route module
+ *
+ * - clientAction: handles form submission (email + password + confirm → auth service → redirect)
+ * - meta: sets browser tab title
+ * - default export: renders SignupForm with any action errors
+ */
 
-export default function Signup() {
-  const [username, setUsername] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
+import { redirect, useActionData, useNavigation } from "react-router";
+import { signup, storeTokens } from "~/lib/auth";
+import { SignupForm } from "~/components/SignupForm";
+import type { Route } from "./+types/signup";
 
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setError(null);
-    setLoading(true);
-    try {
-      const res = await fetch("http://localhost:8000/auth/signup/", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ username, email, password }),
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => null);
-        throw new Error(data?.detail || `Signup failed (${res.status})`);
-      }
-      navigate("/login");
-    } catch (err: any) {
-      setError(err.message || "Something went wrong");
-    } finally {
-      setLoading(false);
-    }
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Sign up" },
+    { name: "description", content: "Create a new account" },
+  ];
+}
+
+export async function clientAction({ request }: Route.ClientActionArgs) {
+  const formData = await request.formData();
+  const email = formData.get("email") as string;
+  const password = formData.get("password") as string;
+  const confirmPassword = formData.get("confirm_password") as string;
+
+  // Client-side validation: passwords must match
+  if (password !== confirmPassword) {
+    return { error: "Passwords do not match." };
   }
 
+  try {
+    const tokens = await signup(email, password, confirmPassword);
+    storeTokens(tokens);
+    return redirect("/");
+  } catch (err) {
+    return {
+      error: err instanceof Error ? err.message : "Something went wrong",
+    };
+  }
+}
+
+export default function SignupRoute() {
+  const actionData = useActionData<typeof clientAction>();
+  const navigation = useNavigation();
+  const isSubmitting = navigation.state === "submitting";
+
   return (
-    <div className="flex min-h-screen w-full items-center justify-center bg-white px-4 dark:bg-gray-950">
-      <div className="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-800 dark:bg-gray-900">
-        <h1 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
-          Sign up
-        </h1>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
-              Username
-            </label>
-            <input
-              type="text"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
-            />
-          </div>
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
-              Email
-            </label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
-            />
-          </div>
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
-              Password
-            </label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
-            />
-          </div>
-          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
-          >
-            {loading ? "Signing up..." : "Sign up"}
-          </button>
-        </form>
-        <p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
-          Already have an account?{" "}
-          <a href="/login" className="font-semibold text-gray-900 hover:underline dark:text-gray-100">
-            Log in
-          </a>
-        </p>
-      </div>
-    </div>
+    <SignupForm
+      error={actionData && "error" in actionData ? actionData.error : undefined}
+      isSubmitting={isSubmitting}
+    />
   );
-}
\ No newline at end of file
+}

From ca4ec45527cf2061d9ea2a477854e913f7ccb1bc Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <muhammadsadiqali84@gmail.com>
Date: Wed, 29 Jul 2026 00:29:19 +0500
Subject: [PATCH 3/9] Changes made according to agents.md

---
 backend/apps/authentications/services.py | 48 ++++++++++++++++++++++++
 backend/core/views.py                    |  9 ++++-
 2 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 backend/apps/authentications/services.py

diff --git a/backend/apps/authentications/services.py b/backend/apps/authentications/services.py
new file mode 100644
index 0000000..0a89eff
--- /dev/null
+++ b/backend/apps/authentications/services.py
@@ -0,0 +1,48 @@
+from django.shortcuts import get_object_or_404
+from django.utils import timezone
+from rest_framework_simplejwt.tokens import RefreshToken
+
+from apps.users.models import User
+from utils import utils
+
+
+class AuthenticationService:
+    @staticmethod
+    def process_login(email: str):
+        """Updates last_login and returns the user object. Raises ValueError if not found."""
+        try:
+            user = User.objects.get(email=email)
+        except User.DoesNotExist:
+            raise ValueError("No user found with this email address.")
+        
+        user.last_login = timezone.now()
+        user.save(update_fields=["last_login"])
+        return user
+
+    @staticmethod
+    def process_signup(serializer):
+        """Saves user from serializer and generates tokens."""
+        user = serializer.save()
+        refresh = RefreshToken.for_user(user)
+        return user, str(refresh.access_token), str(refresh)
+
+    @staticmethod
+    def process_password_reset(token: str, new_password: str):
+        """Validates token and updates user password."""
+        data = utils.validate_token(token)
+        if not data:
+            raise ValueError("Invalid or expired token.")
+
+        user_id = data.get("user_id")
+        user = get_object_or_404(User, id=user_id)
+
+        user.set_password(new_password)
+        user.pwd_reset_required = False
+        user.save()
+
+    @staticmethod
+    def process_password_change(user: User, new_password: str):
+        """Updates an authenticated user's password."""
+        user.set_password(new_password)
+        user.pwd_reset_required = False
+        user.save()
diff --git a/backend/core/views.py b/backend/core/views.py
index 14a0985..dbe3947 100644
--- a/backend/core/views.py
+++ b/backend/core/views.py
@@ -5,7 +5,12 @@
 
 class HealthCheckAPI(APIView):
     permission_classes = (AllowAny,)
+    
+    """
+    HealthCheck endpoint is kept public (AllowAny) so that load balancers 
+    and uptime monitoring services can verify backend availability without authentication.
+    """
 
     def get(self, request):
-        status = {"status": "OK"}
-        return Response(status)
+        from utils.response.resp import APIResponse
+        return Response(APIResponse.get_response(data={"status": "OK"}))

From 29ede3185791e593925787d8bb028ebd383859bc Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <muhammadsadiqali84@gmail.com>
Date: Wed, 29 Jul 2026 00:32:54 +0500
Subject: [PATCH 4/9] Changes made according to agents.md

---
 backend/apps/authentications/api/views.py | 99 +++++++++++------------
 1 file changed, 49 insertions(+), 50 deletions(-)

diff --git a/backend/apps/authentications/api/views.py b/backend/apps/authentications/api/views.py
index 4f63c72..d679a26 100644
--- a/backend/apps/authentications/api/views.py
+++ b/backend/apps/authentications/api/views.py
@@ -1,13 +1,10 @@
 import logging
 
-from django.shortcuts import get_object_or_404
-from django.utils import timezone
 from drf_yasg.utils import swagger_auto_schema
 from rest_framework import status
 from rest_framework.permissions import AllowAny, IsAuthenticated
 from rest_framework.response import Response
 from rest_framework.views import APIView
-from rest_framework_simplejwt.tokens import RefreshToken
 
 from apps.authentications.api.serializers import (
     AuthenticationChangePasswordSerializer,
@@ -17,14 +14,18 @@
     TokenRefreshSerializer,
     UserLoginSerializer,
 )
-from apps.users.models import User
-from utils import utils
+from apps.authentications.services import AuthenticationService
 from utils.response.resp import APIResponse
 
 logger = logging.getLogger(__name__)
 
 
 class LoginAPIView(APIView):
+    """
+    AllowAny is used because a user is not authenticated yet at login,
+    this endpoint is the entry point to obtain a token.
+    """
+
     permission_classes = (AllowAny,)
 
     @swagger_auto_schema(request_body=LoginSerializer)
@@ -41,36 +42,31 @@ def post(self, request):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        email = login_serializer.validated_data["email"]
+
         try:
-            email = login_serializer.validated_data["email"]
-            user = User.objects.get(email=email)
-        except User.DoesNotExist:
+            user = AuthenticationService.authenticate_user(email)
+        except ValueError as e:
             return Response(
-                APIResponse.get_response(
-                    message="No user found with this email address.",
-                ),
+                APIResponse.get_response(message=str(e)),
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        # Update last login timestamp
-        user.last_login = timezone.now()
-        user.save(update_fields=["last_login"])
-
         user_serializer = UserLoginSerializer(user)
         access_token = login_serializer.validated_data.get("access")
         refresh_token = login_serializer.validated_data.get("refresh")
-        
+
         data = {
             "user": user_serializer.data,
             "token": {"access": access_token},
         }
-        
+
         response = Response(
             APIResponse.get_response(
                 data=data,
             )
         )
-        
+
         # Set refresh token in HttpOnly cookie
         if refresh_token:
             response.set_cookie(
@@ -80,11 +76,16 @@ def post(self, request):
                 samesite="Lax",
                 # secure=True  # Ensure HTTPS in production
             )
-            
+
         return response
 
 
 class RefreshTokenAPIView(APIView):
+    """
+    AllowAny is used because the refresh token itself (from the HttpOnly cookie)
+    is the credential here, not a session auth header.
+    """
+
     permission_classes = (AllowAny,)
 
     def post(self, request):
@@ -96,11 +97,11 @@ def post(self, request):
                 ),
                 status=status.HTTP_401_UNAUTHORIZED,
             )
-            
+
         # Passing it to serializer as 'refresh'
         req_data = request.data.copy()
         req_data["refresh"] = refresh_token
-        
+
         serializer = TokenRefreshSerializer(data=req_data)
         serializer.is_valid(raise_exception=True)
         data = {
@@ -114,39 +115,32 @@ def post(self, request):
 
 
 class ResetPasswordAPI(APIView):
-    permission_classes = (AllowAny,)
     """
-    Handles password reset using a token.
+    AllowAny is used because the user is not logged in when resetting
+    a forgotten password, the reset token itself is the credential.
     """
 
+    permission_classes = (AllowAny,)
+
     @swagger_auto_schema(request_body=PasswordResetSerializer)
     def post(self, request):
-        # Validate new password
         serializer = PasswordResetSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
 
         token = serializer.validated_data["token"]
+        new_password = serializer.validated_data["password"]
 
-        # Validate token and retrieve user ID
-        data = utils.validate_token(token)
-        if not data:
-            # TODO: generic exception raise
+        try:
+            AuthenticationService.reset_password(token, new_password)
+        except ValueError as e:
             return Response(
                 APIResponse.get_response(
-                    message="Invalid or expired token.",
-                    error={"token": "Invalid or expired token."},
+                    message=str(e),
+                    error={"token": str(e)},
                 ),
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        user_id = data.get("user_id")
-        user = get_object_or_404(User, id=user_id)
-
-        # Set new password and clear password reset requirement
-        user.set_password(serializer.validated_data["password"])
-        user.pwd_reset_required = False
-        user.save()
-
         return Response(
             APIResponse.get_response(
                 message="Password has been reset successfully.",
@@ -162,10 +156,11 @@ class ChangePasswordAPI(APIView):
     def post(self, request):
         serializer = AuthenticationChangePasswordSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
-        user = request.user
-        user.set_password(serializer.validated_data["new_password"])
-        user.pwd_reset_required = False
-        user.save()
+
+        AuthenticationService.change_password(
+            request.user, serializer.validated_data["new_password"]
+        )
+
         return Response(
             APIResponse.get_response(message="Password changed successfully."),
             status=status.HTTP_200_OK,
@@ -173,18 +168,22 @@ def post(self, request):
 
 
 class SignUpAPIView(APIView):
+    """
+    AllowAny is used because a new user has no account or token yet,
+    this endpoint is how an account gets created in the first place.
+    """
+
     permission_classes = (AllowAny,)
 
     @swagger_auto_schema(request_body=SignUpSerializer)
     def post(self, request):
         serializer = SignUpSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
-        user = serializer.save()
 
-        refresh = RefreshToken.for_user(user)
-        access_token = str(refresh.access_token)
-        refresh_token = str(refresh)
-        
+        user, access_token, refresh_token = AuthenticationService.register_user(
+            serializer
+        )
+
         tokens = {
             "access": access_token,
         }
@@ -194,16 +193,16 @@ def post(self, request):
             "user": user_serializer.data,
             "token": tokens,
         }
-        
+
         response = Response(
             APIResponse.get_response(message="User created successfully.", data=data),
             status=status.HTTP_201_CREATED,
         )
-        
+
         response.set_cookie(
             "refresh",
             refresh_token,
             httponly=True,
             samesite="Lax",
         )
-        return response
+        return response
\ No newline at end of file

From 013920f422b7fc23dda79d50ee58642186376451 Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <muhammadsadiqali84@gmail.com>
Date: Wed, 29 Jul 2026 16:12:31 +0500
Subject: [PATCH 5/9] Refactor HealthCheckAPI response and remove docstring

Removed docstring explaining public access for HealthCheckAPI and simplified response structure.
---
 backend/core/views.py | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/backend/core/views.py b/backend/core/views.py
index dbe3947..1e4e945 100644
--- a/backend/core/views.py
+++ b/backend/core/views.py
@@ -5,12 +5,8 @@
 
 class HealthCheckAPI(APIView):
     permission_classes = (AllowAny,)
-    
-    """
-    HealthCheck endpoint is kept public (AllowAny) so that load balancers 
-    and uptime monitoring services can verify backend availability without authentication.
-    """
 
+    
     def get(self, request):
-        from utils.response.resp import APIResponse
-        return Response(APIResponse.get_response(data={"status": "OK"}))
+        status = {"status": "OK"}
+        return Response(status)

From def72ebb692f5754094faa9ba2d27b01092c50d7 Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <muhammadsadiqali84@gmail.com>
Date: Wed, 29 Jul 2026 16:13:54 +0500
Subject: [PATCH 6/9] Refactor authentication views for direct user handling

Refactor authentication views to remove AuthenticationService calls and directly handle user authentication and password management. Update token handling and response structure for login and signup endpoints.
---
 backend/apps/authentications/api/views.py | 129 ++++++++--------------
 1 file changed, 46 insertions(+), 83 deletions(-)

diff --git a/backend/apps/authentications/api/views.py b/backend/apps/authentications/api/views.py
index d679a26..4923907 100644
--- a/backend/apps/authentications/api/views.py
+++ b/backend/apps/authentications/api/views.py
@@ -1,10 +1,13 @@
 import logging
 
+from django.shortcuts import get_object_or_404
+from django.utils import timezone
 from drf_yasg.utils import swagger_auto_schema
 from rest_framework import status
 from rest_framework.permissions import AllowAny, IsAuthenticated
 from rest_framework.response import Response
 from rest_framework.views import APIView
+from rest_framework_simplejwt.tokens import RefreshToken
 
 from apps.authentications.api.serializers import (
     AuthenticationChangePasswordSerializer,
@@ -14,18 +17,14 @@
     TokenRefreshSerializer,
     UserLoginSerializer,
 )
-from apps.authentications.services import AuthenticationService
+from apps.users.models import User
+from utils import utils
 from utils.response.resp import APIResponse
 
 logger = logging.getLogger(__name__)
 
 
 class LoginAPIView(APIView):
-    """
-    AllowAny is used because a user is not authenticated yet at login,
-    this endpoint is the entry point to obtain a token.
-    """
-
     permission_classes = (AllowAny,)
 
     @swagger_auto_schema(request_body=LoginSerializer)
@@ -42,70 +41,43 @@ def post(self, request):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        email = login_serializer.validated_data["email"]
-
         try:
-            user = AuthenticationService.authenticate_user(email)
-        except ValueError as e:
+            email = login_serializer.validated_data["email"]
+            user = User.objects.get(email=email)
+        except User.DoesNotExist:
             return Response(
-                APIResponse.get_response(message=str(e)),
+                APIResponse.get_response(
+                    message="No user found with this email address.",
+                ),
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        user_serializer = UserLoginSerializer(user)
-        access_token = login_serializer.validated_data.get("access")
-        refresh_token = login_serializer.validated_data.get("refresh")
+        # Update last login timestamp
+        user.last_login = timezone.now()
+        user.save(update_fields=["last_login"])
 
+        user_serializer = UserLoginSerializer(user)
         data = {
             "user": user_serializer.data,
-            "token": {"access": access_token},
+            "token": login_serializer.validated_data,
         }
-
-        response = Response(
+        return Response(
             APIResponse.get_response(
                 data=data,
             )
         )
 
-        # Set refresh token in HttpOnly cookie
-        if refresh_token:
-            response.set_cookie(
-                "refresh",
-                refresh_token,
-                httponly=True,
-                samesite="Lax",
-                # secure=True  # Ensure HTTPS in production
-            )
-
-        return response
-
 
 class RefreshTokenAPIView(APIView):
-    """
-    AllowAny is used because the refresh token itself (from the HttpOnly cookie)
-    is the credential here, not a session auth header.
-    """
-
     permission_classes = (AllowAny,)
 
+    @swagger_auto_schema(request_body=TokenRefreshSerializer)
     def post(self, request):
-        refresh_token = request.COOKIES.get("refresh")
-        if not refresh_token:
-            return Response(
-                APIResponse.get_response(
-                    message="No refresh token provided.",
-                ),
-                status=status.HTTP_401_UNAUTHORIZED,
-            )
-
-        # Passing it to serializer as 'refresh'
-        req_data = request.data.copy()
-        req_data["refresh"] = refresh_token
-
+        req_data = request.data
         serializer = TokenRefreshSerializer(data=req_data)
         serializer.is_valid(raise_exception=True)
         data = {
-            "token": {"access": serializer.validated_data.get("access")},
+            "token": serializer.validated_data,
         }
         return Response(
             APIResponse.get_response(
@@ -115,32 +87,39 @@ def post(self, request):
 
 
 class ResetPasswordAPI(APIView):
+    permission_classes = (AllowAny,)
     """
-    AllowAny is used because the user is not logged in when resetting
-    a forgotten password, the reset token itself is the credential.
+    Handles password reset using a token.
     """
 
-    permission_classes = (AllowAny,)
-
     @swagger_auto_schema(request_body=PasswordResetSerializer)
     def post(self, request):
+        # Validate new password
         serializer = PasswordResetSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
 
         token = serializer.validated_data["token"]
-        new_password = serializer.validated_data["password"]
 
-        try:
-            AuthenticationService.reset_password(token, new_password)
-        except ValueError as e:
+        # Validate token and retrieve user ID
+        data = utils.validate_token(token)
+        if not data:
+            # TODO: generic exception raise
             return Response(
                 APIResponse.get_response(
-                    message=str(e),
-                    error={"token": str(e)},
+                    message="Invalid or expired token.",
+                    error={"token": "Invalid or expired token."},
                 ),
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        user_id = data.get("user_id")
+        user = get_object_or_404(User, id=user_id)
+
+        # Set new password and clear password reset requirement
+        user.set_password(serializer.validated_data["password"])
+        user.pwd_reset_required = False
+        user.save()
+
         return Response(
             APIResponse.get_response(
                 message="Password has been reset successfully.",
@@ -156,11 +135,10 @@ class ChangePasswordAPI(APIView):
     def post(self, request):
         serializer = AuthenticationChangePasswordSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
-
-        AuthenticationService.change_password(
-            request.user, serializer.validated_data["new_password"]
-        )
-
+        user = request.user
+        user.set_password(serializer.validated_data["new_password"])
+        user.pwd_reset_required = False
+        user.save()
         return Response(
             APIResponse.get_response(message="Password changed successfully."),
             status=status.HTTP_200_OK,
@@ -168,24 +146,18 @@ def post(self, request):
 
 
 class SignUpAPIView(APIView):
-    """
-    AllowAny is used because a new user has no account or token yet,
-    this endpoint is how an account gets created in the first place.
-    """
-
     permission_classes = (AllowAny,)
 
     @swagger_auto_schema(request_body=SignUpSerializer)
     def post(self, request):
         serializer = SignUpSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
+        user = serializer.save()
 
-        user, access_token, refresh_token = AuthenticationService.register_user(
-            serializer
-        )
-
+        refresh = RefreshToken.for_user(user)
         tokens = {
-            "access": access_token,
+            "refresh": str(refresh),
+            "access": str(refresh.access_token),
         }
 
         user_serializer = UserLoginSerializer(user)
@@ -193,16 +165,7 @@ def post(self, request):
             "user": user_serializer.data,
             "token": tokens,
         }
-
-        response = Response(
+        return Response(
             APIResponse.get_response(message="User created successfully.", data=data),
             status=status.HTTP_201_CREATED,
         )
-
-        response.set_cookie(
-            "refresh",
-            refresh_token,
-            httponly=True,
-            samesite="Lax",
-        )
-        return response
\ No newline at end of file

From 1168e0ec472ece3c9437fbeb74366ee6212908cd Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <muhammadsadiqali84@gmail.com>
Date: Wed, 29 Jul 2026 20:02:29 +0500
Subject: [PATCH 7/9] Revert backend changes

---
 .../apps/authentications/api/serializers.py   |   2 +-
 backend/apps/authentications/api/views.py     | 131 +++++++-----------
 frontend/app/lib/api.ts                       |   7 +-
 frontend/app/lib/auth.ts                      |  24 ++++
 frontend/app/lib/types.ts                     |   1 +
 5 files changed, 78 insertions(+), 87 deletions(-)

diff --git a/backend/apps/authentications/api/serializers.py b/backend/apps/authentications/api/serializers.py
index 40c5867..d4080de 100644
--- a/backend/apps/authentications/api/serializers.py
+++ b/backend/apps/authentications/api/serializers.py
@@ -117,4 +117,4 @@ def validate(self, attrs):
             raise serializers.ValidationError(
                 {"confirm_password": "Passwords do not match."}
             )
-        return attrs
+        return attrs
\ No newline at end of file
diff --git a/backend/apps/authentications/api/views.py b/backend/apps/authentications/api/views.py
index d679a26..5bc029d 100644
--- a/backend/apps/authentications/api/views.py
+++ b/backend/apps/authentications/api/views.py
@@ -1,10 +1,13 @@
 import logging
 
+from django.shortcuts import get_object_or_404
+from django.utils import timezone
 from drf_yasg.utils import swagger_auto_schema
 from rest_framework import status
 from rest_framework.permissions import AllowAny, IsAuthenticated
 from rest_framework.response import Response
 from rest_framework.views import APIView
+from rest_framework_simplejwt.tokens import RefreshToken
 
 from apps.authentications.api.serializers import (
     AuthenticationChangePasswordSerializer,
@@ -14,18 +17,14 @@
     TokenRefreshSerializer,
     UserLoginSerializer,
 )
-from apps.authentications.services import AuthenticationService
+from apps.users.models import User
+from utils import utils
 from utils.response.resp import APIResponse
 
 logger = logging.getLogger(__name__)
 
 
 class LoginAPIView(APIView):
-    """
-    AllowAny is used because a user is not authenticated yet at login,
-    this endpoint is the entry point to obtain a token.
-    """
-
     permission_classes = (AllowAny,)
 
     @swagger_auto_schema(request_body=LoginSerializer)
@@ -42,70 +41,43 @@ def post(self, request):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        email = login_serializer.validated_data["email"]
-
         try:
-            user = AuthenticationService.authenticate_user(email)
-        except ValueError as e:
+            email = login_serializer.validated_data["email"]
+            user = User.objects.get(email=email)
+        except User.DoesNotExist:
             return Response(
-                APIResponse.get_response(message=str(e)),
+                APIResponse.get_response(
+                    message="No user found with this email address.",
+                ),
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        user_serializer = UserLoginSerializer(user)
-        access_token = login_serializer.validated_data.get("access")
-        refresh_token = login_serializer.validated_data.get("refresh")
+        # Update last login timestamp
+        user.last_login = timezone.now()
+        user.save(update_fields=["last_login"])
 
+        user_serializer = UserLoginSerializer(user)
         data = {
             "user": user_serializer.data,
-            "token": {"access": access_token},
+            "token": login_serializer.validated_data,
         }
-
-        response = Response(
+        return Response(
             APIResponse.get_response(
                 data=data,
             )
         )
 
-        # Set refresh token in HttpOnly cookie
-        if refresh_token:
-            response.set_cookie(
-                "refresh",
-                refresh_token,
-                httponly=True,
-                samesite="Lax",
-                # secure=True  # Ensure HTTPS in production
-            )
-
-        return response
-
 
 class RefreshTokenAPIView(APIView):
-    """
-    AllowAny is used because the refresh token itself (from the HttpOnly cookie)
-    is the credential here, not a session auth header.
-    """
-
     permission_classes = (AllowAny,)
 
+    @swagger_auto_schema(request_body=TokenRefreshSerializer)
     def post(self, request):
-        refresh_token = request.COOKIES.get("refresh")
-        if not refresh_token:
-            return Response(
-                APIResponse.get_response(
-                    message="No refresh token provided.",
-                ),
-                status=status.HTTP_401_UNAUTHORIZED,
-            )
-
-        # Passing it to serializer as 'refresh'
-        req_data = request.data.copy()
-        req_data["refresh"] = refresh_token
-
+        req_data = request.data
         serializer = TokenRefreshSerializer(data=req_data)
         serializer.is_valid(raise_exception=True)
         data = {
-            "token": {"access": serializer.validated_data.get("access")},
+            "token": serializer.validated_data,
         }
         return Response(
             APIResponse.get_response(
@@ -115,32 +87,39 @@ def post(self, request):
 
 
 class ResetPasswordAPI(APIView):
+    permission_classes = (AllowAny,)
     """
-    AllowAny is used because the user is not logged in when resetting
-    a forgotten password, the reset token itself is the credential.
+    Handles password reset using a token.
     """
 
-    permission_classes = (AllowAny,)
-
     @swagger_auto_schema(request_body=PasswordResetSerializer)
     def post(self, request):
+        # Validate new password
         serializer = PasswordResetSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
 
         token = serializer.validated_data["token"]
-        new_password = serializer.validated_data["password"]
 
-        try:
-            AuthenticationService.reset_password(token, new_password)
-        except ValueError as e:
+        # Validate token and retrieve user ID
+        data = utils.validate_token(token)
+        if not data:
+            # TODO: generic exception raise
             return Response(
                 APIResponse.get_response(
-                    message=str(e),
-                    error={"token": str(e)},
+                    message="Invalid or expired token.",
+                    error={"token": "Invalid or expired token."},
                 ),
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        user_id = data.get("user_id")
+        user = get_object_or_404(User, id=user_id)
+
+        # Set new password and clear password reset requirement
+        user.set_password(serializer.validated_data["password"])
+        user.pwd_reset_required = False
+        user.save()
+
         return Response(
             APIResponse.get_response(
                 message="Password has been reset successfully.",
@@ -156,11 +135,10 @@ class ChangePasswordAPI(APIView):
     def post(self, request):
         serializer = AuthenticationChangePasswordSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
-
-        AuthenticationService.change_password(
-            request.user, serializer.validated_data["new_password"]
-        )
-
+        user = request.user
+        user.set_password(serializer.validated_data["new_password"])
+        user.pwd_reset_required = False
+        user.save()
         return Response(
             APIResponse.get_response(message="Password changed successfully."),
             status=status.HTTP_200_OK,
@@ -168,24 +146,18 @@ def post(self, request):
 
 
 class SignUpAPIView(APIView):
-    """
-    AllowAny is used because a new user has no account or token yet,
-    this endpoint is how an account gets created in the first place.
-    """
-
     permission_classes = (AllowAny,)
 
     @swagger_auto_schema(request_body=SignUpSerializer)
     def post(self, request):
         serializer = SignUpSerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
+        user = serializer.save()
 
-        user, access_token, refresh_token = AuthenticationService.register_user(
-            serializer
-        )
-
+        refresh = RefreshToken.for_user(user)
         tokens = {
-            "access": access_token,
+            "refresh": str(refresh),
+            "access": str(refresh.access_token),
         }
 
         user_serializer = UserLoginSerializer(user)
@@ -193,16 +165,7 @@ def post(self, request):
             "user": user_serializer.data,
             "token": tokens,
         }
-
-        response = Response(
+        return Response(
             APIResponse.get_response(message="User created successfully.", data=data),
             status=status.HTTP_201_CREATED,
-        )
-
-        response.set_cookie(
-            "refresh",
-            refresh_token,
-            httponly=True,
-            samesite="Lax",
-        )
-        return response
\ No newline at end of file
+        )
\ No newline at end of file
diff --git a/frontend/app/lib/api.ts b/frontend/app/lib/api.ts
index 56cc69a..51db850 100644
--- a/frontend/app/lib/api.ts
+++ b/frontend/app/lib/api.ts
@@ -10,7 +10,7 @@
  */
 
 import { API_URL } from "./config";
-import { getAccessToken } from "./auth";
+import { getAccessToken, refreshAccessToken } from "./auth";
 import type { ApiEnvelope } from "./types";
 
 export interface ApiFetchOptions {
@@ -41,7 +41,10 @@ export async function apiFetch<T = Record<string, unknown>>(
   };
 
   if (options.auth) {
-    const token = getAccessToken();
+    let token = getAccessToken();
+    if (!token){
+      token = await refreshAccessToken();
+    }
     if (token) headers["Authorization"] = `Bearer ${token}`;
   }
 
diff --git a/frontend/app/lib/auth.ts b/frontend/app/lib/auth.ts
index 0953ccb..f0f3908 100644
--- a/frontend/app/lib/auth.ts
+++ b/frontend/app/lib/auth.ts
@@ -12,6 +12,7 @@ import type { AuthData, AuthTokens } from "./types";
 // ─── Token storage (In-memory) ───────────────────────────────────
 
 let memoryAccessToken: string | null = null;
+let memoryRefreshToken: string | null = null;
 
 export function getAccessToken(): string | null {
   return memoryAccessToken;
@@ -19,10 +20,12 @@ export function getAccessToken(): string | null {
 
 export function storeTokens(tokens: AuthTokens): void {
   memoryAccessToken = tokens.access;
+  memoryRefreshToken = tokens.refresh
 }
 
 export function clearTokens(): void {
   memoryAccessToken = null;
+  memoryRefreshToken = null;
 }
 
 // ─── Auth operations ─────────────────────────────────────────────
@@ -53,4 +56,25 @@ export async function signup(
     body: { email, password, confirm_password: confirmPassword },
   });
   return data.token;
+}
+
+
+/**
+ * Attempts to get a fresh access token using the stored refresh token.
+ * Used after a page reload wipes the in-memory access token.
+ */
+export async function refreshAccessToken(): Promise<string | null> {
+  if (!memoryRefreshToken) return null;
+
+  try {
+    const data = await apiFetch<AuthData>("/auth/token/refresh/", {
+      method: "POST",
+      body: { refresh: memoryRefreshToken },
+    });
+    memoryAccessToken = data.token.access;
+    return memoryAccessToken;
+  } catch {
+    clearTokens();
+    return null;
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/lib/types.ts b/frontend/app/lib/types.ts
index 0205870..0da2564 100644
--- a/frontend/app/lib/types.ts
+++ b/frontend/app/lib/types.ts
@@ -18,6 +18,7 @@ export interface ApiEnvelope<T = Record<string, unknown>> {
 
 export interface AuthTokens {
   access: string;
+  refresh: string
 }
 
 export interface UserInfo {

From 0cd82c715733aec4fd942f3f40c3a3d137f29552 Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <muhammadsadiqali84@gmail.com>
Date: Thu, 30 Jul 2026 15:07:50 +0500
Subject: [PATCH 8/9] Revert Backend Changes

---
 backend/apps/authentications/services.py | 48 ------------------------
 1 file changed, 48 deletions(-)
 delete mode 100644 backend/apps/authentications/services.py

diff --git a/backend/apps/authentications/services.py b/backend/apps/authentications/services.py
deleted file mode 100644
index 0a89eff..0000000
--- a/backend/apps/authentications/services.py
+++ /dev/null
@@ -1,48 +0,0 @@
-from django.shortcuts import get_object_or_404
-from django.utils import timezone
-from rest_framework_simplejwt.tokens import RefreshToken
-
-from apps.users.models import User
-from utils import utils
-
-
-class AuthenticationService:
-    @staticmethod
-    def process_login(email: str):
-        """Updates last_login and returns the user object. Raises ValueError if not found."""
-        try:
-            user = User.objects.get(email=email)
-        except User.DoesNotExist:
-            raise ValueError("No user found with this email address.")
-        
-        user.last_login = timezone.now()
-        user.save(update_fields=["last_login"])
-        return user
-
-    @staticmethod
-    def process_signup(serializer):
-        """Saves user from serializer and generates tokens."""
-        user = serializer.save()
-        refresh = RefreshToken.for_user(user)
-        return user, str(refresh.access_token), str(refresh)
-
-    @staticmethod
-    def process_password_reset(token: str, new_password: str):
-        """Validates token and updates user password."""
-        data = utils.validate_token(token)
-        if not data:
-            raise ValueError("Invalid or expired token.")
-
-        user_id = data.get("user_id")
-        user = get_object_or_404(User, id=user_id)
-
-        user.set_password(new_password)
-        user.pwd_reset_required = False
-        user.save()
-
-    @staticmethod
-    def process_password_change(user: User, new_password: str):
-        """Updates an authenticated user's password."""
-        user.set_password(new_password)
-        user.pwd_reset_required = False
-        user.save()

From bcf0a2c0f147b8199106b72ab95fb816b54acde1 Mon Sep 17 00:00:00 2001
From: Muhammad Sadiq Ali <ma10379@st.habib.edu.pk>
Date: Tue, 11 Aug 2026 15:11:26 +0500
Subject: [PATCH 9/9] Fix hard reload logging out user, add protected route for
 auth check

---
 frontend/app/lib/auth.ts                 | 36 +++++++++++++++++++-----
 frontend/app/routes.ts                   |  5 +++-
 frontend/app/routes/authenticated.tsx    | 14 +++++++++
 frontend/app/routes/login.tsx            |  4 +--
 frontend/app/routes/protected-layout.tsx | 21 ++++++++++++++
 frontend/app/routes/signup.tsx           |  2 +-
 frontend/package-lock.json               | 15 ++++++++++
 frontend/package.json                    |  2 ++
 8 files changed, 88 insertions(+), 11 deletions(-)
 create mode 100644 frontend/app/routes/authenticated.tsx
 create mode 100644 frontend/app/routes/protected-layout.tsx

diff --git a/frontend/app/lib/auth.ts b/frontend/app/lib/auth.ts
index f0f3908..25e7202 100644
--- a/frontend/app/lib/auth.ts
+++ b/frontend/app/lib/auth.ts
@@ -3,29 +3,40 @@
  *
  * Pattern:
  * - Access token: Saved in-memory (JS variable). Safest route to prevent XSS sniffing.
- * - Refresh token: Saved in HttpOnly cookie by backend. JS has no access to it.
+ * - Refresh token: Saved in Cookie by using js-cookie. JS has access to it.
  */
-
+import Cookies from "js-cookie";
 import { apiFetch } from "./api";
 import type { AuthData, AuthTokens } from "./types";
 
 // ─── Token storage (In-memory) ───────────────────────────────────
 
 let memoryAccessToken: string | null = null;
-let memoryRefreshToken: string | null = null;
 
 export function getAccessToken(): string | null {
   return memoryAccessToken;
 }
 
+export function getRefreshToken(): string | null {
+  const memoryRefreshToken = Cookies.get("memoryRefreshToken");
+  if (memoryRefreshToken){
+    return memoryRefreshToken;
+  }
+  return null;
+}
+
 export function storeTokens(tokens: AuthTokens): void {
   memoryAccessToken = tokens.access;
-  memoryRefreshToken = tokens.refresh
+  Cookies.set("memoryRefreshToken", tokens.refresh, {
+    expires: 7,
+    secure: true,
+    sameSite: "strict",
+  });
 }
 
 export function clearTokens(): void {
   memoryAccessToken = null;
-  memoryRefreshToken = null;
+  Cookies.remove("memoryRefreshToken");
 }
 
 // ─── Auth operations ─────────────────────────────────────────────
@@ -63,9 +74,10 @@ export async function signup(
  * Attempts to get a fresh access token using the stored refresh token.
  * Used after a page reload wipes the in-memory access token.
  */
-export async function refreshAccessToken(): Promise<string | null> {
-  if (!memoryRefreshToken) return null;
 
+export async function refreshAccessToken(): Promise<string | null> {
+  const memoryRefreshToken  = getRefreshToken();
+  if (!memoryRefreshToken ) return null;
   try {
     const data = await apiFetch<AuthData>("/auth/token/refresh/", {
       method: "POST",
@@ -77,4 +89,14 @@ export async function refreshAccessToken(): Promise<string | null> {
     clearTokens();
     return null;
   }
+}
+
+/**
+ * Returns a valid access token, trying memory first then refresh token.
+ * Used by route loaders to check auth status.
+ */
+export async function getValidAccessToken(): Promise<string | null> {
+  const token = getAccessToken();
+  if (token) return token;
+  return await refreshAccessToken();
 }
\ No newline at end of file
diff --git a/frontend/app/routes.ts b/frontend/app/routes.ts
index 954e38b..f66e06e 100644
--- a/frontend/app/routes.ts
+++ b/frontend/app/routes.ts
@@ -1,8 +1,11 @@
-import { type RouteConfig, index, route } from "@react-router/dev/routes";
+import { type RouteConfig, layout, index, route } from "@react-router/dev/routes";
 
 export default [
   index("routes/home.tsx"),
   route("login", "routes/login.tsx"),
   route("signup", "routes/signup.tsx"),
+  layout("routes/protected-layout.tsx", [
+    route("auth", "routes/authenticated.tsx"),
+  ]),
   route("health", "routes/health.tsx"),
 ] satisfies RouteConfig;
diff --git a/frontend/app/routes/authenticated.tsx b/frontend/app/routes/authenticated.tsx
new file mode 100644
index 0000000..9ee9b79
--- /dev/null
+++ b/frontend/app/routes/authenticated.tsx
@@ -0,0 +1,14 @@
+// Temporary cuthentication checking tab
+
+import type { Route } from "./+types/authenticated";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Authenticated" },
+    { name: "description", content: "User is authenticated" },
+  ];
+}
+
+export default function AuthenticatedRoute() {
+  return <p>You are authenticated.</p>;
+}
\ No newline at end of file
diff --git a/frontend/app/routes/login.tsx b/frontend/app/routes/login.tsx
index 2b5c23b..65bcd09 100644
--- a/frontend/app/routes/login.tsx
+++ b/frontend/app/routes/login.tsx
@@ -5,7 +5,7 @@
  * - meta: sets browser tab title
  * - default export: renders LoginForm with any action errors
  *
- * Uses clientAction (not server action) because storeTokens uses sessionStorage (browser-only).
+ * Uses clientAction (not server action) because storeTokens uses js-cookie (browser-only).
  */
 
 import { redirect, useActionData, useNavigation } from "react-router";
@@ -28,7 +28,7 @@ export async function clientAction({ request }: Route.ClientActionArgs) {
   try {
     const tokens = await login(email, password);
     storeTokens(tokens);
-    return redirect("/");
+    return redirect("/auth");
   } catch (err) {
     return {
       error: err instanceof Error ? err.message : "Something went wrong",
diff --git a/frontend/app/routes/protected-layout.tsx b/frontend/app/routes/protected-layout.tsx
new file mode 100644
index 0000000..965d7f2
--- /dev/null
+++ b/frontend/app/routes/protected-layout.tsx
@@ -0,0 +1,21 @@
+// routes/protected-layout.tsx
+import { Navigate, Outlet } from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
+import { getAccessToken, getValidAccessToken } from "~/lib/auth";
+
+export async function clientLoader({ request }: LoaderFunctionArgs) {
+  const token = await getValidAccessToken();
+  if (!token) {
+    throw new Response("Unauthorized", { status: 401 });
+  }
+
+  return { token };
+}
+
+export function ErrorBoundary() {
+  return <Navigate to="/login" replace />;
+}
+
+export default function ProtectedLayout() {
+  return <Outlet />;
+}
\ No newline at end of file
diff --git a/frontend/app/routes/signup.tsx b/frontend/app/routes/signup.tsx
index cb22e90..317080e 100644
--- a/frontend/app/routes/signup.tsx
+++ b/frontend/app/routes/signup.tsx
@@ -32,7 +32,7 @@ export async function clientAction({ request }: Route.ClientActionArgs) {
   try {
     const tokens = await signup(email, password, confirmPassword);
     storeTokens(tokens);
-    return redirect("/");
+    return redirect("/login");
   } catch (err) {
     return {
       error: err instanceof Error ? err.message : "Something went wrong",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f4bd158..c00f7c1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
         "@react-router/node": "^8",
         "@react-router/serve": "^8",
         "isbot": "^5.1.36",
+        "js-cookie": "^3.0.8",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
         "react-router": "^8"
@@ -16,6 +17,7 @@
       "devDependencies": {
         "@react-router/dev": "^8",
         "@tailwindcss/vite": "^4.2.2",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^22",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
@@ -1317,6 +1319,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "22.20.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.20.1.tgz",
@@ -2150,6 +2159,12 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0824000..ed9b83f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "@react-router/node": "^8",
     "@react-router/serve": "^8",
     "isbot": "^5.1.36",
+    "js-cookie": "^3.0.8",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router": "^8"
@@ -19,6 +20,7 @@
   "devDependencies": {
     "@react-router/dev": "^8",
     "@tailwindcss/vite": "^4.2.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",