From 0f36422b3562bfb17917a7f93dd69ae7a867e653 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 15 Dec 2025 12:38:52 -0600
Subject: [PATCH] Wait for config to load before evaluating route access

Fix race condition where custom role users are temporarily denied access after login while config is still loading. Defer route rendering in DefaultAppView until config is available so the complete role list is known before ProtectedRoute evaluates permissions
---
 web/src/App.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 2fbfa4c99..b458d9ec3 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -14,6 +14,7 @@ import ProtectedRoute from "@/components/auth/ProtectedRoute";
 import { AuthProvider } from "@/context/auth-context";
 import useSWR from "swr";
 import { FrigateConfig } from "./types/frigateConfig";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -50,6 +51,13 @@ function DefaultAppView() {
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
+
+  // Compute required roles for main routes, ensuring we have config first
+  // to prevent race condition where custom roles are temporarily unavailable
+  const mainRouteRoles = config?.auth?.roles
+    ? Object.keys(config.auth.roles)
+    : undefined;
+
   return (
     <div className="size-full overflow-hidden">
       {isDesktop && <Sidebar />}
@@ -68,13 +76,11 @@ function DefaultAppView() {
           <Routes>
             <Route
               element={
-                <ProtectedRoute
-                  requiredRoles={
-                    config?.auth.roles
-                      ? Object.keys(config.auth.roles)
-                      : ["admin", "viewer"]
-                  }
-                />
+                mainRouteRoles ? (
+                  <ProtectedRoute requiredRoles={mainRouteRoles} />
+                ) : (
+                  <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+                )
               }
             >
               <Route index element={<Live />} />