Fix 401 bug (#2309)

Author: miaawong

web/src/components/wizard/SetupStep.tsx

@@ -7,6 +7,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import LinuxSetup from "./setup/LinuxSetup";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useAuth } from "../../contexts/AuthContext";
+import { handleUnauthorized } from "../../utils/auth";
 
 interface SetupStepProps {
   onNext: () => void;
@@ -39,7 +40,12 @@ const SetupStep: React.FC<SetupStepProps> = ({ onNext, onBack }) => {
         },
       });
       if (!response.ok) {
-        throw new Error("Failed to fetch install configuration");
+        const errorData = await response.json().catch(() => ({}));
+        if (response.status === 401) {
+          handleUnauthorized(errorData);
+          throw new Error("Session expired. Please log in again.");
+        }
+        throw new Error(errorData.message || "Failed to fetch install configuration");
       }
       const config = await response.json();
       updateConfig(config);
@@ -57,7 +63,12 @@ const SetupStep: React.FC<SetupStepProps> = ({ onNext, onBack }) => {
         },
       });
       if (!response.ok) {
-        throw new Error("Failed to fetch network interfaces");
+        const errorData = await response.json().catch(() => ({}));
+        if (response.status === 401) {
+          handleUnauthorized(errorData);
+          throw new Error("Session expired. Please log in again.");
+        }
+        throw new Error(errorData.message || "Failed to fetch network interfaces");
       }
       return response.json();
     },
@@ -77,6 +88,10 @@ const SetupStep: React.FC<SetupStepProps> = ({ onNext, onBack }) => {
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
+        if (response.status === 401) {
+          handleUnauthorized(errorData);
+          throw new Error("Session expired. Please log in again.");
+        }
         throw errorData;
       }
       return response.json();

web/src/contexts/AuthContext.tsx

@@ -1,9 +1,11 @@
 import React, { createContext, useContext, useState, useEffect } from "react";
+import { handleUnauthorized } from "../utils/auth";
 
 interface AuthContextType {
   token: string | null;
   setToken: (token: string | null) => void;
   isAuthenticated: boolean;
+  isLoading: boolean;
 }
 
 export const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -20,6 +22,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const [token, setTokenState] = useState<string | null>(() => {
     return localStorage.getItem("auth");
   });
+  const [isLoading, setIsLoading] = useState(true);
 
   const setToken = (newToken: string | null) => {
     if (newToken) {
@@ -30,6 +33,38 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     setTokenState(newToken);
   };
 
+  // Check token validity on mount and when token changes
+  useEffect(() => {
+    if (token) {
+      // Make a request to any authenticated endpoint to check token validity
+      fetch("/api/install/installation/config", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            // If we get a 401, handle it
+            if (response.status === 401) {
+              const error = new Error("Unauthorized");
+              (error as Error & { status?: number }).status = 401;
+              handleUnauthorized(error);
+            }
+          }
+          setIsLoading(false);
+        })
+        .catch(() => {
+          // If the request fails, assume the token is invalid
+          const err = new Error("Request failed");
+          (err as Error & { status?: number }).status = 401;
+          handleUnauthorized(err);
+          setIsLoading(false);
+        });
+    } else {
+      setIsLoading(false);
+    }
+  }, [token]);
+
   useEffect(() => {
     // Listen for storage events to sync token state across tabs
     const handleStorageChange = (e: StorageEvent) => {
@@ -48,7 +83,12 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     token,
     setToken,
     isAuthenticated: !!token,
+    isLoading,
   };
 
+  if (isLoading) {
+    return null; // Don't render anything while checking token validity
+  }
+
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };