fix(user_dashboard.tsx): check key health on login - if invalid -> redirect to login

handles invalid / expired key scenario

ui/litellm-dashboard/src/components/networking.tsx

@@ -2493,6 +2493,9 @@ export const keyInfoCall = async (accessToken: String, keys: String[]) => {
 
     if (!response.ok) {
       const errorData = await response.text();
+      if (errorData.includes("Invalid proxy server token passed")) {
+        throw new Error("Invalid proxy server token passed");
+      }
       handleError(errorData);
       throw new Error("Network response was not ok");
     }

ui/litellm-dashboard/src/components/user_dashboard.tsx

@@ -7,7 +7,8 @@ import {
   getProxyUISettings,
   Organization,
   organizationListCall,
-  DEFAULT_ORGANIZATION
+  DEFAULT_ORGANIZATION,
+  keyInfoCall
 } from "./networking";
 import { fetchTeams } from "./common_components/fetch_teams";
 import { Grid, Col, Card, Text, Title } from "@tremor/react";
@@ -193,6 +194,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
               null
             );
             
+
             setUserSpendData(response["user_info"]);
             console.log(`userSpendData: ${JSON.stringify(userSpendData)}`)
             
@@ -238,8 +240,11 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
               "userModels" + userID,
               JSON.stringify(available_model_names)
             );
-          } catch (error) {
+          } catch (error: any) {
             console.error("There was an error fetching the data", error);
+            if (error.message.includes("Invalid proxy server token passed")) {
+              gotoLogin();
+            }
             // Optionally, update your UI to reflect the error state here as well
           }
         };
@@ -249,6 +254,24 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
     }
   }, [userID, token, accessToken, keys, userRole]);
 
+
+  useEffect(() => {
+    // check key health - if it's invalid, redirect to login
+    if (accessToken) {
+      const fetchKeyInfo = async () => {
+        try {
+          const keyInfo = await keyInfoCall(accessToken, [accessToken]);
+          console.log("keyInfo: ", keyInfo);
+        } catch (error: any) {
+          if (error.message.includes("Invalid proxy server token passed")) {
+            gotoLogin();
+          }
+        }
+      }
+      fetchKeyInfo();
+    }
+  }, [accessToken]);
+
   useEffect(() => {
     console.log(`currentOrg: ${JSON.stringify(currentOrg)}, accessToken: ${accessToken}, userID: ${userID}, userRole: ${userRole}`)
     if (accessToken) {
@@ -295,11 +318,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
     )
   }
 
-
-  if (token == null) {
-    // user is not logged in as yet 
-    console.log("All cookies before redirect:", document.cookie);
-    
+  function gotoLogin() {
     // Clear token cookies using the utility function
     clearTokenCookies();
     
@@ -311,10 +330,19 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
     window.location.href = url; 
 
     return null;
+  }
+
+  if (token == null) {
+    // user is not logged in as yet 
+    console.log("All cookies before redirect:", document.cookie);
+    
+    // Clear token cookies using the utility function
+    gotoLogin();
   } else {
     // Check if token is expired
     try {
       const decoded = jwtDecode(token) as { [key: string]: any };
+      console.log("Decoded token:", decoded);
       const expTime = decoded.exp;
       const currentTime = Math.floor(Date.now() / 1000);