Fix access token not persisting on hard reload

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: 1,
+    secure: true,
+    sameSite: "strict",
+  });
 }
 
 export function clearTokens(): void {
   memoryAccessToken = null;
-  memoryRefreshToken = null;
+  Cookies.remove("memoryRefreshToken");
 }
 
 // ─── Auth operations ─────────────────────────────────────────────
@@ -58,23 +69,50 @@ export async function signup(
   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;
-
+  const memoryRefreshToken  = Cookies.get("memoryRefreshToken");
+  if (!memoryRefreshToken || isTokenExpired(memoryRefreshToken)) {
+    clearTokens();
+    return null;
+  }
   try {
     const data = await apiFetch<AuthData>("/auth/token/refresh/", {
       method: "POST",
       body: { refresh: memoryRefreshToken },
     });
     memoryAccessToken = data.token.access;
+    if (data.token.refresh) {
+      Cookies.set("memoryRefreshToken", data.token.refresh);
+    }
     return memoryAccessToken;
   } catch {
     clearTokens();
     return null;
   }
+}
+
+/**
+ * Check if the stored token is expired or not
+ */
+function isTokenExpired(token: string): boolean {
+  try {
+    const payload = JSON.parse(atob(token.split('.')[1]));
+    return payload.exp * 1000 < Date.now();
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * 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 && !isTokenExpired(token)) return token;
+  return await refreshAccessToken();
 }

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;

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

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",

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

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",

frontend/package.json

@@ -12,13 +12,15 @@
     "@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"
   },
   "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",