Is it possible to call useIdleTimer on mobile browsers when phone in standby

[denysoleksiienko]

This works on PC browsers well. But on mobile browsers, when not used on the phone, the modal is not closed and the Remaining is 0:00 in the modal when back to the browser ios (safari/chrome) and android (chrome)

For example still in the browser and lock the phone, then back to the browser after 20 min
Looks like the workers stop after 5 minutes.

import { Box, Modal } from '@chakra-ui/react';

const timeout = 1000 * 60 * 13;
const promptTimeout = 1000 * 60 * 2;

const IdleTimer: FC = () => {
  const { push } = useRouter();
  const { isAuthenticated } = useAuth();

  const [open, setOpen] = useState<boolean>(false);
  const [remaining, setRemaining] = useState<number>(0);

  const onPrompt = useCallback(() => {
    setOpen(true);
    setRemaining(promptTimeout);
  }, []);

  const onIdle = useCallback(() => {
    setOpen(false);
    setRemaining(0);
    push('/auth/signout');
  }, []);

  const { getRemainingTime, isPrompted, activate, pause } = useIdleTimer({
    timeout,
    promptTimeout,
    onPrompt,
    onIdle,
    startManually: !isAuthenticated,
  });

  const handleStillHere = useCallback(() => {
    setOpen(false);
    activate();
  }, []);

  const handleLogout = useCallback(() => {
    setOpen(false);
    setRemaining(0);
    push('/auth/signout');
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      if (isPrompted()) {
        setRemaining(getRemainingTime());
      }
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);


  return (
    <Modal
      close={handleStillHere}
      onConfirm={handleLogout}
      open={open}
    >
      <Box>
          {moment(remaining).minutes()}:{moment(remaining).seconds()}
      </Box>
    </Modal>
  );
};

export default IdleTimer;

[SupremeTechnopriest]

The latest release candidate should solve this for you. It will be released in v5.5.0. You can test by installing the next tag npm i react-idle-timer@next

[denysoleksiienko]

@SupremeTechnopriest yes I tested the next tag npm i react-idle-timer@next

const timeout = 1000 * 60 * 5
const promptTimeout = 1000 * 60 * 2;

On android chrome, after promptTimeout 2 minutes, the timer stops at 0 and is not logged out. It doesn't work when I deploy to vercel. If I test with USB debugging it seems to work

[SupremeTechnopriest]

Let me add a sanity check onpageshow that compares time stamps and fires any needed events.

[SupremeTechnopriest]

@denysoleksiienko

We already have sanity checks with visibilitychange which leads me to believe its not called by mobile devices when they are unlocked. I added focus to the default events. Can you try updating to 5.5.0-rc.9 and let me know if that fixes it for you?

npm i [email protected]