cameleer-server/ui/src/auth/RequireAdmin.tsx

import { Navigate, Outlet } from 'react-router';
import { useAuthStore, useIsAdmin } from './auth-store';

/**
 * Route guard for admin pages.
 *
 * Redirects non-admin users to '/'.  The guard is intentionally lenient when
 * the user is authenticated but their roles array is transiently empty (e.g.
 * during a token refresh).  In that case we render nothing rather than
 * navigating away — the refresh will restore the roles within milliseconds and
 * avoid losing unsaved form state on admin pages.
 */
export function RequireAdmin() {
  const isAdmin = useIsAdmin();
  const roles = useAuthStore((s) => s.roles);
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);

  // Authenticated but roles not yet populated (token refresh in progress) —
  // render nothing and wait rather than redirecting.
  if (isAuthenticated && roles.length === 0) return null;

  if (!isAdmin) return <Navigate to="/" replace />;
  return <Outlet />;
}