fix: resolve clearTokens reference error and update api utilities

backend/app/core/config.py

@@ -75,6 +75,7 @@ class Settings(BaseSettings):
     
     # Rate Limiting
     RATE_LIMIT_PER_MINUTE: int = 200
+    DISABLE_RATE_LIMIT: bool = False
     # Audit log retention in days (default: 90 days)
     AUDIT_LOG_RETENTION_DAYS: int = 90
     

backend/app/core/rate_limiter.py

@@ -74,6 +74,9 @@ def check_login_rate_limit(request: Request) -> None:
     Dependency for auth endpoints.
     Blocks after 5 failed/total login attempts in 5 minutes.
     """
+    if getattr(settings, "DISABLE_RATE_LIMIT", False):
+        return
+
     client_ip = _get_client_ip(request)
     if login_rate_limiter.is_rate_limited(client_ip):
         remaining_seconds = login_rate_limiter.window_seconds
@@ -92,6 +95,9 @@ def check_api_rate_limit(request: Request) -> None:
     Global API rate limiter dependency.
     Applied as a router-level dependency in main.py.
     """
+    if getattr(settings, "DISABLE_RATE_LIMIT", False):
+        return
+
     client_ip = _get_client_ip(request)
     if api_rate_limiter.is_rate_limited(client_ip):
         raise HTTPException(

docker-compose.yml

@@ -38,6 +38,7 @@ services:
       - UPLOAD_DIR=/workspace/uploads
       - MODELS_DIR=/workspace/models
       - ALLOWED_HOSTS=*
+      - DISABLE_RATE_LIMIT=true
     ports:
       - "8000:8000"
     volumes:

frontend/app/dashboard/page.tsx

@@ -1895,7 +1895,13 @@ function AdminDashboardView({ profile }: { profile: any }) {
     };
 
     eventSource.onerror = (err) => {
-      console.error("SSE connection error:", err);
+      if (eventSource.readyState === EventSource.CLOSED) {
+        console.error("SSE connection closed permanently.");
+      } else if (eventSource.readyState === EventSource.CONNECTING) {
+        console.warn("SSE connection lost. Reconnecting...");
+      } else {
+        console.error("SSE connection error:", err);
+      }
     };
 
     return () => {

frontend/app/leaves/page.tsx

@@ -56,21 +56,13 @@ export default function LeavesManagementPage() {
       });
     },
     onSuccess: (data) => {
-      toast({
-        title: "Status Updated",
-        description: `Leave request has been successfully ${data.status.toLowerCase()}.`,
-        type: "success"
-      });
+      toast.success(`Leave request has been successfully ${data.status.toLowerCase()}.`);
       queryClient.invalidateQueries({ queryKey: ["company-leaves"] });
       // Update selected leave state if open
       setSelectedLeave((prev: any) => prev?.id === data.id ? { ...prev, status: data.status } : prev);
     },
     onError: (err: any) => {
-      toast({
-        title: "Action Failed",
-        description: err.message || "Failed to update leave status.",
-        type: "error"
-      });
+      toast.error(err.message || "Failed to update leave status.");
     },
     onSettled: () => {
       setUpdatingId(null);
@@ -196,11 +188,7 @@ export default function LeavesManagementPage() {
       URL.revokeObjectURL(url);
     }
     
-    toast({
-      title: "File Downloaded",
-      description: `${fileName} downloaded successfully.`,
-      type: "success"
-    });
+    toast.success(`${fileName} downloaded successfully.`);
   };
 
   // Filter & Search Logic

frontend/app/page.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { Lock, Mail, Eye, EyeOff, ShieldAlert, Shield, Building2, Users, ArrowLeft, ArrowRight, CheckCircle2 } from "lucide-react";
-import { fetchApi, setUserProfile, getAccessToken } from "@/app/utils/api";
+import { fetchApi, setUserProfile, setTokens, getAccessToken } from "@/app/utils/api";
 
 type RoleType = "Super Admin" | "Admin" | "Employee";
 
@@ -124,8 +124,12 @@ export default function LoginPage() {
         body: params,
       });
 
-      // Cookies (access_token + refresh_token) are set by the backend automatically.
-      // We only store the user profile (non-secret) in localStorage for UI rendering.
+      // Store tokens from login response (Bearer auth for cross-origin setup)
+      if (response.access_token) {
+        setTokens(response.access_token, response.refresh_token || "");
+      }
+
+      // Now fetch user profile using the stored token
       const profile = await fetchApi("/auth/me");
       
       const userRole = profile?.role?.name;

frontend/app/tickets/page.tsx

@@ -202,9 +202,14 @@ export default function TicketsPage() {
     };
 
     eventSource.onerror = (err) => {
-      console.error("SSE connection closed or error encountered:", err);
       setSseConnected(false);
-      eventSource.close();
+      if (eventSource.readyState === EventSource.CLOSED) {
+        console.error("SSE connection closed permanently.");
+      } else if (eventSource.readyState === EventSource.CONNECTING) {
+        console.warn("SSE connection lost. Reconnecting...");
+      } else {
+        console.error("SSE connection error:", err);
+      }
     };
 
     return () => {

frontend/app/utils/api.ts

@@ -28,7 +28,6 @@ export function getBackendUrl(): string {
 
 /**
  * Wraps fetch with an AbortController timeout.
- * Always sends credentials (cookies) for automatic HttpOnly cookie attachment.
  */
 async function fetchWithTimeout(
   url: string,
@@ -41,18 +40,52 @@ async function fetchWithTimeout(
     return await fetch(url, {
       ...options,
       signal: controller.signal,
-      // SECURITY: Always include credentials so HttpOnly cookies are sent automatically.
-      // This is safe because CORS restricts which origins can trigger credentialed requests.
-      credentials: "include",
     });
   } finally {
     clearTimeout(timer);
   }
 }
 
-// ─── User profile (non-sensitive, stored in localStorage for UI) ──────────────
-// Note: TOKENS are now stored in HttpOnly cookies (set by backend, unreadable by JS).
-// Only non-secret UI data (name, role, email) is kept in localStorage.
+// ─── Token storage ────────────────────────────────────────────────────────────
+// Tokens are stored in localStorage because frontend (Vercel) and backend
+// (HuggingFace) are on different domains — cross-origin HttpOnly cookies
+// are treated as third-party cookies and blocked by modern browsers.
+
+export function setTokens(access: string, refresh: string) {
+  if (typeof window !== "undefined") {
+    localStorage.setItem("access_token", access);
+    localStorage.setItem("refresh_token", refresh);
+  }
+}
+
+export function getAccessToken(): string | null {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem("access_token");
+  }
+  return null;
+}
+
+export function getRefreshToken(): string | null {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem("refresh_token");
+  }
+  return null;
+}
+
+export function clearTokens() {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    localStorage.removeItem("user_profile");
+  }
+}
+
+if (typeof window !== "undefined") {
+  (window as any).clearTokens = clearTokens;
+}
+
+
+// ─── User profile (non-sensitive, for UI rendering) ───────────────────────────
 
 export function setUserProfile(user: any) {
   if (typeof window !== "undefined") {
@@ -79,46 +112,10 @@ export function clearUserProfile() {
 }
 
 /**
- * Clear session: removes user profile from localStorage and calls backend to clear cookies.
- * This is the secure logout — cookies cannot be cleared client-side (they're HttpOnly).
+ * Clear session: removes tokens + profile from localStorage.
  */
 export async function clearSession() {
-  clearUserProfile();
-  try {
-    // Ask the backend to delete the HttpOnly cookies
-    await fetchWithTimeout(`${getBackendUrl()}/auth/logout`, { method: "POST" });
-  } catch {
-    // Best-effort — even if this fails, the local profile is cleared
-  }
-}
-
-// ─── DEPRECATED: localStorage token functions (kept for kiosk backward compat) ─
-// Browser sessions now use HttpOnly cookies. These functions are only used
-// by kiosk/SSE flows that cannot use cookie-based auth.
-
-export function setTokens(access: string, refresh: string) {
-  // No-op for browser sessions — tokens are now stored in HttpOnly cookies by backend.
-  // Kiosk clients that need the token can read from the response body directly.
-}
-
-export function getAccessToken(): string | null {
-  // HttpOnly cookies cannot be read by JS — this is intentional.
-  // Return a truthy sentinel if user_profile exists (means user is logged in).
-  // Actual token validation happens server-side via the cookie.
-  if (typeof window !== "undefined") {
-    const profile = localStorage.getItem("user_profile");
-    return profile ? "cookie-session" : null;
-  }
-  return null;
-}
-
-export function getRefreshToken(): string | null {
-  // Refresh token is in HttpOnly cookie — cannot be read by JS (by design).
-  return null;
-}
-
-export function clearTokens() {
-  // For backward compat — calls clearUserProfile
+  clearTokens();
   clearUserProfile();
 }
 
@@ -128,9 +125,12 @@ export async function fetchApi(endpoint: string, options: RequestInit = {}): Pro
   const url = `${getBackendUrl()}${endpoint}`;
   const headers = new Headers(options.headers || {});
 
-  // NOTE: We do NOT set Authorization header here for browser sessions.
-  // The HttpOnly access_token cookie is sent automatically by the browser.
-  // Kiosk clients that need Bearer auth should set Authorization header themselves.
+  // Attach Bearer token for authentication
+  const token = getAccessToken();
+  if (token && !headers.has("Authorization")) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+
   if (!headers.has("Content-Type") && !(options.body instanceof FormData)) {
     headers.set("Content-Type", "application/json");
   }
@@ -138,25 +138,38 @@ export async function fetchApi(endpoint: string, options: RequestInit = {}): Pro
   const response = await fetchWithTimeout(url, { ...options, headers });
 
   if (response.status === 401 && endpoint !== "/auth/login") {
-    // Attempt silent token refresh via cookie (backend reads refresh_token cookie,
-    // sets new access_token cookie — no tokens ever touch JS memory)
-    try {
-      const refreshResponse = await fetchWithTimeout(
-        `${getBackendUrl()}/auth/refresh`,
-        { method: "POST", headers: { "Content-Type": "application/json" } }
-      );
-      if (refreshResponse.ok) {
-        // New access_token cookie is now set — retry the original request
-        const retryResponse = await fetchWithTimeout(url, { ...options, headers });
-        if (retryResponse.ok) {
-          return await retryResponse.json();
+    // Attempt silent token refresh
+    const refreshToken = getRefreshToken();
+    if (refreshToken) {
+      try {
+        const refreshResponse = await fetchWithTimeout(
+          `${getBackendUrl()}/auth/refresh`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              "Authorization": `Bearer ${refreshToken}`,
+            },
+          }
+        );
+        if (refreshResponse.ok) {
+          const refreshData = await refreshResponse.json();
+          if (refreshData.access_token) {
+            setTokens(refreshData.access_token, refreshData.refresh_token || refreshToken);
+            // Retry the original request with the new token
+            headers.set("Authorization", `Bearer ${refreshData.access_token}`);
+            const retryResponse = await fetchWithTimeout(url, { ...options, headers });
+            if (retryResponse.ok) {
+              return await retryResponse.json();
+            }
+          }
         }
+      } catch {
+        // Silent — refresh failed
       }
-    } catch {
-      // Silent — don't log anything sensitive
     }
     // Refresh failed — clear session and redirect to login
-    clearUserProfile();
+    clearTokens();
     if (typeof window !== "undefined" && window.location.pathname !== "/") {
       window.location.href = "/";
     }

frontend/components/SidebarLayout.tsx

@@ -26,7 +26,7 @@ import {
   FileText,
   Shield
 } from "lucide-react";
-import { getAccessToken, getUserProfile, clearSession } from "@/app/utils/api";
+import { getAccessToken, getUserProfile, clearTokens } from "@/app/utils/api";
 import CommandPalette from "@/components/CommandPalette";
 
 function NavLink({ 
@@ -194,10 +194,8 @@ export default function SidebarLayout({ children }: { children: React.ReactNode
     );
   }
 
-  const handleLogout = async () => {
-    // clearSession() calls backend /auth/logout to delete HttpOnly cookies server-side.
-    // HttpOnly cookies CANNOT be deleted from the client — only the server can clear them.
-    await clearSession();
+  const handleLogout = () => {
+    clearTokens();
     router.push("/");
   };
 

frontend/next.config.js

@@ -14,6 +14,35 @@ const nextConfig = {
   // ─── Security Headers ──────────────────────────────────────────────────────
   // Applied to every page & API route served by Next.js
   async headers() {
+    const isDev = process.env.NODE_ENV === "development";
+    const connectSrc = [
+      "'self'",
+      "https://netraai07-netra.hf.space",
+      "https://pawankr007-netra.hf.space",
+      process.env.NEXT_PUBLIC_API_URL || "",
+      "ws:",
+      "wss:",
+      isDev ? "http://localhost:8000 http://127.0.0.1:8000 ws://localhost:8000 ws://127.0.0.1:8000" : "",
+    ].filter(Boolean).join(" ");
+
+    const cspDirectives = [
+      "default-src 'self'",
+      "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
+      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+      "font-src 'self' https://fonts.gstatic.com",
+      `connect-src ${connectSrc}`,
+      "img-src 'self' data: blob: https:",
+      "media-src 'self' blob:",
+      "object-src 'none'",
+      "base-uri 'self'",
+      "form-action 'self'",
+      "frame-ancestors 'none'",
+    ];
+
+    if (!isDev) {
+      cspDirectives.push("upgrade-insecure-requests");
+    }
+
     return [
       {
         source: "/(.*)",
@@ -31,25 +60,9 @@ const nextConfig = {
           // Restrict browser feature APIs — allow camera/mic/geo for kiosk face recognition
           { key: "Permissions-Policy", value: "camera=(self), microphone=(self), geolocation=(self), payment=()" },
           // Content Security Policy for the Next.js frontend
-          // Allows inline scripts (needed by Next.js hydration) but blocks external untrusted origins
           {
             key: "Content-Security-Policy",
-            value: [
-              "default-src 'self'",
-              // Next.js needs 'unsafe-inline' and 'unsafe-eval' for hydration — locked to self only
-              "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
-              "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
-              "font-src 'self' https://fonts.gstatic.com",
-              // Allow API calls to both HuggingFace backends and WebSocket connections
-              `connect-src 'self' https://netraai07-netra.hf.space https://pawankr007-netra.hf.space ${process.env.NEXT_PUBLIC_API_URL || ""} ws: wss:`,
-              "img-src 'self' data: blob: https:",
-              "media-src 'self' blob:",
-              "object-src 'none'",
-              "base-uri 'self'",
-              "form-action 'self'",
-              "frame-ancestors 'none'",
-              "upgrade-insecure-requests",
-            ].join("; "),
+            value: cspDirectives.join("; "),
           },
         ],
       },
@@ -58,3 +71,4 @@ const nextConfig = {
 };
 
 module.exports = nextConfig;
+