diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index e518314e64..8d2c9f535f 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/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"); } diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx index 1895d810e4..0fbc6f85bd 100644 --- a/ui/litellm-dashboard/src/components/user_dashboard.tsx +++ b/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"; @@ -192,6 +193,7 @@ const UserDashboard: React.FC = ({ null, null ); + setUserSpendData(response["user_info"]); console.log(`userSpendData: ${JSON.stringify(userSpendData)}`) @@ -238,8 +240,11 @@ const UserDashboard: React.FC = ({ "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 = ({ } }, [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,26 +318,31 @@ const UserDashboard: React.FC = ({ ) } - - 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(); const url = proxyBaseUrl ? `${proxyBaseUrl}/sso/key/generate` : `/sso/key/generate`; - + console.log("Full URL:", url); - window.location.href = url; + 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);