Next.js Discord

Discord Forum

Infinite API Calls and Re-renders in PermissionProvider when forbidden() is called

Unanswered
Saltwater Crocodile posted this in #help-forum
Open in Discord
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
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 !!!

0 Replies