counterweight
3beb23a765
- Extract API error handling utility (utils/error-handling.ts) - Centralize error message extraction logic - Add type guards for API errors - Replace duplicated error handling across components - Create reusable Toast component (components/Toast.tsx) - Extract toast notification logic from profile page - Support auto-dismiss functionality - Consistent styling with shared styles - Extract form validation debouncing hook (hooks/useDebouncedValidation.ts) - Reusable debounced validation logic - Clean timeout management - Used in profile page for form validation - Consolidate duplicate styles (styles/auth-form.ts) - Use shared style tokens instead of duplicating values - Reduce code duplication between auth-form and shared styles - Extract loading state component (components/LoadingState.tsx) - Standardize loading UI across pages - Replace duplicated loading JSX patterns - Used in profile, exchange, and trades pages - Fix useRequireAuth dependency array - Remove unnecessary hasPermission from dependencies - Add eslint-disable comment with explanation - Improve hook stability and performance All frontend tests pass. Linting passes.
70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
"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
|
|
// Use hasPermission/hasRole directly since they're stable callbacks
|
|
const redirect =
|
|
fallbackRedirect ??
|
|
(hasPermission(Permission.VIEW_ALL_EXCHANGES)
|
|
? "/admin/trades"
|
|
: hasPermission(Permission.CREATE_EXCHANGE)
|
|
? "/exchange"
|
|
: "/login");
|
|
router.push(redirect);
|
|
}
|
|
// Note: hasPermission and hasRole are stable callbacks from useAuth,
|
|
// so they don't need to be in the dependency array. They're only included
|
|
// for clarity and to satisfy exhaustive-deps if needed.
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isLoading, user, isAuthorized, router, fallbackRedirect]);
|
|
|
|
return {
|
|
user,
|
|
isLoading,
|
|
isAuthorized,
|
|
};
|
|
}
|