Infinite API Calls and Re-renders in PermissionProvider when forbidden() is called
Unanswered
Saltwater Crocodile posted this in #help-forum
Saltwater CrocodileOP
Hi!
I'm trying to use Next.js forbidden() function to block users without proper permissions, but it's causing infinite loops and performance issues.
Current Behavior:
- When a user accesses a route without proper permissions, forbidden() is called
- This triggers infinite re-renders and API calls to the permissions endpoint
- The useEffect dependency array includes isBlocked, permissions, and other changing values
- Each state change triggers the effect again, creating an endless loop
use-permission-provider
Thanks !!!
I'm trying to use Next.js forbidden() function to block users without proper permissions, but it's causing infinite loops and performance issues.
Current Behavior:
- When a user accesses a route without proper permissions, forbidden() is called
- This triggers infinite re-renders and API calls to the permissions endpoint
- The useEffect dependency array includes isBlocked, permissions, and other changing values
- Each state change triggers the effect again, creating an endless loop
export function PermissionProvider({
children,
disableAdminBypass = true,
}: {
children: React.ReactNode;
disableAdminBypass?: boolean;
}) {
const permissionData = usePermissionProvider(disableAdminBypass);
if (permissionData.isLoading) {
return <Loading />;
}
return <PermissionContext.Provider value={permissionData}>{children}</PermissionContext.Provider>;
}
use-permission-provider
...
useEffect(() => {
if (pathname) {
setIsCheckingAccess(true);
if (!disableAdminBypass && user.role?.toUpperCase() === "ADMIN") {
setIsCheckingAccess(false);
setIsBlocked(false);
forbidden();
}
const hasAccess = checkAccessImmediate(pathname);
if (!hasAccess && !isBlocked) {
setIsBlocked(true);
forbidden();
}
setIsCheckingAccess(false);
}
}, [
pathname,
isBlocked,
permissions,
hasRoutePermission,
checkAccessImmediate,
disableAdminBypass,
user.role,
]);
Thanks !!!