some fixes and refactors

frontend/app/hooks/useRequireAuth.ts

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth, PermissionType, Permission } from "../auth-context";
+
+interface UseRequireAuthOptions {
+  /** Required permission to access the page */
+  requiredPermission?: PermissionType;
+  /** Required role to access the page */
+  requiredRole?: string;
+  /** Where to redirect if permission check fails (defaults to best available page) */
+  fallbackRedirect?: string;
+}
+
+interface UseRequireAuthResult {
+  user: ReturnType<typeof useAuth>["user"];
+  isLoading: boolean;
+  isAuthorized: boolean;
+}
+
+/**
+ * Hook that handles authentication and authorization checks.
+ * Automatically redirects to login if not authenticated,
+ * or to a fallback page if missing required permissions.
+ */
+export function useRequireAuth(options: UseRequireAuthOptions = {}): UseRequireAuthResult {
+  const { requiredPermission, requiredRole, fallbackRedirect } = options;
+  const { user, isLoading, hasPermission, hasRole } = useAuth();
+  const router = useRouter();
+
+  const isAuthorized = (() => {
+    if (!user) return false;
+    if (requiredPermission && !hasPermission(requiredPermission)) return false;
+    if (requiredRole && !hasRole(requiredRole)) return false;
+    return true;
+  })();
+
+  useEffect(() => {
+    if (isLoading) return;
+
+    if (!user) {
+      router.push("/login");
+      return;
+    }
+
+    if (!isAuthorized) {
+      // Redirect to the most appropriate page based on permissions
+      const redirect = fallbackRedirect ?? (
+        hasPermission(Permission.VIEW_AUDIT) ? "/audit" :
+        hasPermission(Permission.VIEW_COUNTER) ? "/" :
+        "/login"
+      );
+      router.push(redirect);
+    }
+  }, [isLoading, user, isAuthorized, router, fallbackRedirect, hasPermission]);
+
+  return {
+    user,
+    isLoading,
+    isAuthorized,
+  };
+}
+