Seems like the onPrompt function doesn't fire until the tab is active again

[chris-hinds-paytently]

I've wrapped this in a custom hook which is then called on my main layout. Everything seems to be working except when the tab is not focussed.

I have a modal which the onPrompt callback triggers, this modal has a countdown time and will auto log the user out if they havent interacted with it. The modal will open after 14 minutes in inactivity.

The problem is the modal doesnt open until the tab is refocussed, so a user could have been inactive for 1 hour and the modal only shows, thus the logout time only stars when the tab has focus, so it seems like onPrompt isnt being called when the tab is not focussed..

This is the custom hook.

export const useLoginTimeout = () => {
  const routerState = useRouterState();
  const { logout, login } = useKindeAuth();

  const onPrompt = () => {
    modals.openContextModal({
      trapFocus: true,
      closeOnEscape: false,
      closeOnClickOutside: false,
      modal: 'idle',
      innerProps: {
        login,
        logout,
        redirectToPath: createRedirectPath({
          pathname: routerState.location.pathname,
          searchParams: routerState.location.search,
        }),
      },
    });
  };

  useIdleTimer({
    onPrompt,
    timeout: SessionConstants.IdleTimeOut,
    promptBeforeIdle: SessionConstants.PromptBeforeIdleTimeOut,
    throttle: 500,
  });
};

[Redmega]

https://idletimer.dev/docs/api/props#timers
https://idletimer.dev/docs/getting-started/new#web-worker-timers

You need to import { workerTimers } from 'react-idle-timer and pass them to the timers prop of the hook. Unfocused tabs get throttled and otherwise won't have consistent timeouts/intervals/etc.