v1.4: Segurança multi-tenant, file serving via API e UX humanizada

-  Validação cross-tenant no login e rotas protegidas
-  File serving via /api/files/{bucket}/{path} (eliminação DNS)
-  Mensagens de erro humanizadas inline (sem pop-ups)
-  Middleware tenant detection via headers customizados
-  Upload de logos retorna URLs via API
-  README atualizado com changelog v1.4 completo

front-end-agency/components/auth/AuthGuard.tsx

@@ -7,9 +7,16 @@ import { isAuthenticated } from '@/lib/auth';
 export default function AuthGuard({ children }: { children: React.ReactNode }) {
     const router = useRouter();
     const pathname = usePathname();
-    const [authorized, setAuthorized] = useState(false);
+    const [authorized, setAuthorized] = useState<boolean | null>(null);
+    const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (!mounted) return;
+
         const checkAuth = () => {
             const isAuth = isAuthenticated();
 
@@ -35,12 +42,24 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
 
         window.addEventListener('storage', handleStorageChange);
         return () => window.removeEventListener('storage', handleStorageChange);
-    }, [router, pathname]);
+    }, [router, pathname, mounted]);
+
+    // Enquanto verifica (ou não está montado), mostra um loading simples
+    // Isso evita problemas de hidratação mantendo a estrutura DOM consistente
+    if (!mounted || authorized === null) {
+        return (
+            <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-zinc-950">
+                <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-purple-600" />
+            </div>
+        );
+    }
 
-    // Enquanto verifica, não renderiza nada ou um loading
-    // Para evitar "flash" de conteúdo não autorizado
     if (!authorized) {
-        return null;
+        return (
+            <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-zinc-950">
+                <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-purple-600" />
+            </div>
+        );
     }
 
     return <>{children}</>;