From 12da3134a04af046655a6be57071eb9a0c35b1a0 Mon Sep 17 00:00:00 2001 From: "Al @h0lybyte" <5599058+h0lybyte@users.noreply.github.com> Date: Sun, 8 Mar 2026 07:05:45 -0400 Subject: [PATCH 1/3] fix(dashboard): session detection in ArgoCD and Home dashboards (#7787) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(dashboard): use initSupa/getSupa for session detection in ArgoCD and Home dashboards useAuthBridge() does not return session or isLoading — those properties are undefined, causing both dashboards to always show "Sign in required". Switched to the same initSupa()/getSupa().getSession() pattern used by the working Grafana dashboard. * fix(dashboard): remove unused useAuthBridge import from ArgoCD dashboard --- .../dashboard/ReactArgoDashboard.tsx | 59 ++++++++++++++----- .../dashboard/ReactDashboardHome.tsx | 58 +++++++++++++----- 2 files changed, 89 insertions(+), 28 deletions(-) diff --git a/apps/kbve/astro-kbve/src/components/dashboard/ReactArgoDashboard.tsx b/apps/kbve/astro-kbve/src/components/dashboard/ReactArgoDashboard.tsx index 93dc3eb62..f9281b5ef 100644 --- a/apps/kbve/astro-kbve/src/components/dashboard/ReactArgoDashboard.tsx +++ b/apps/kbve/astro-kbve/src/components/dashboard/ReactArgoDashboard.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useCallback } from 'react'; -import { useAuthBridge } from '@/components/auth'; +import { initSupa, getSupa } from '@/lib/supa'; import { Activity, RefreshCw, @@ -514,7 +514,10 @@ function ApplicationRow({ // --------------------------------------------------------------------------- export default function ReactArgoDashboard() { - const { session, isLoading: authLoading } = useAuthBridge(); + const [authState, setAuthState] = useState< + 'loading' | 'authenticated' | 'unauthenticated' + >('loading'); + const [accessToken, setAccessToken] = useState(null); const [applications, setApplications] = useState([]); const [loading, setLoading] = useState(true); @@ -523,8 +526,6 @@ export default function ReactArgoDashboard() { const [lastUpdated, setLastUpdated] = useState(null); const [expandedApp, setExpandedApp] = useState(null); - const token = session?.access_token; - const fetchData = useCallback(async (tkn: string) => { try { setError(null); @@ -543,9 +544,39 @@ export default function ReactArgoDashboard() { } }, []); - // Initial load + auto-refresh + // Auth init — same pattern as Grafana dashboard + useEffect(() => { + let cancelled = false; + + (async () => { + try { + await initSupa(); + const supa = getSupa(); + const sessionResult = await supa.getSession().catch(() => null); + const session = sessionResult?.session ?? null; + + if (cancelled) return; + + if (!session?.access_token) { + setAuthState('unauthenticated'); + return; + } + + setAccessToken(session.access_token as string); + setAuthState('authenticated'); + } catch { + if (!cancelled) setAuthState('unauthenticated'); + } + })(); + + return () => { + cancelled = true; + }; + }, []); + + // Data load + auto-refresh useEffect(() => { - if (!token) return; + if (!accessToken) return; // Try cache first const cached = loadCache(); @@ -555,20 +586,20 @@ export default function ReactArgoDashboard() { setLoading(false); } - fetchData(token); + fetchData(accessToken); const interval = setInterval( - () => fetchData(token), + () => fetchData(accessToken), REFRESH_INTERVAL_MS, ); return () => clearInterval(interval); - }, [token, fetchData]); + }, [accessToken, fetchData]); // ----------------------------------------------------------------------- // Auth states // ----------------------------------------------------------------------- - if (authLoading) { + if (authState === 'loading') { return (