diff --git a/web/src/App.tsx b/web/src/App.tsx
index cd7906e97..2fbfa4c99 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -47,6 +47,9 @@ function App() {
 }
 
 function DefaultAppView() {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
   return (
     <div className="size-full overflow-hidden">
       {isDesktop && <Sidebar />}
@@ -64,7 +67,15 @@ function DefaultAppView() {
         <Suspense>
           <Routes>
             <Route
-              element={<ProtectedRoute requiredRoles={["viewer", "admin"]} />}
+              element={
+                <ProtectedRoute
+                  requiredRoles={
+                    config?.auth.roles
+                      ? Object.keys(config.auth.roles)
+                      : ["admin", "viewer"]
+                  }
+                />
+              }
             >
               <Route index element={<Live />} />
               <Route path="/review" element={<Events />} />
diff --git a/web/src/components/auth/ProtectedRoute.tsx b/web/src/components/auth/ProtectedRoute.tsx
index c35fdaebc..18dc50d53 100644
--- a/web/src/components/auth/ProtectedRoute.tsx
+++ b/web/src/components/auth/ProtectedRoute.tsx
@@ -6,7 +6,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 export default function ProtectedRoute({
   requiredRoles,
 }: {
-  requiredRoles: ("admin" | "viewer")[];
+  requiredRoles: string[];
 }) {
   const { auth } = useContext(AuthContext);
 
diff --git a/web/src/types/frigateConfig.ts b/web/src/types/frigateConfig.ts
index e3cc6455a..70835073c 100644
--- a/web/src/types/frigateConfig.ts
+++ b/web/src/types/frigateConfig.ts
@@ -342,6 +342,10 @@ export interface FrigateConfig {
     enabled: boolean;
   };
 
+  auth: {
+    roles: string[];
+  };
+
   birdseye: BirdseyeConfig;
 
   cameras: {