Detecting when tab has been closed

[MarianaKWork]

Hi!

I was wondering if there is a way to use the library to detect when a tab has been closed, as I would then like to be able to log the user out.

I do not want to listen for the 'beforeunload' and 'unload' events as this is not recommended due to unreliability and performance issues it can cause.

Thanks!

[SupremeTechnopriest]

As far as I know the only way to do this is with the beforeunload event. You would definitely want to use that event to ensure your logout call finishes before the browser shuts down. You can mitigate the performance impacts by using a sendBeacon ping to your server to log your user out. If it's purely client side I wouldn't worry about the performance impact. It should be negligible.

This library does track tabs but does not currently expose an event that you can hook into. It's definitely something that I would consider adding, but It's going to be a bit before I have time to do another major feature. Fee free to open a feature request.

[kubarozycki]

@SupremeTechnopriest I'm using your lib (thank you) together with homemade hook, beforeunload is very poor (not reliable, triggered by refresh as well).

I have to force logout after 10 minutes of inactivity. This includes tab being closed for 10 minutes - strict requirement from my customer :D
Leaving a note here - might be helpful for someone else

const IDLE_TRESHOLD_IN_MINUTES = 10;

useEffect(() => {
    const LAST_SEEN_FORMAT = 'PPpp';
    const LAST_SEEN_KEY = 'last-seen-at';
    try {
      const lastSeenRaw = localStorage.getItem(LAST_SEEN_KEY);
      if (!!lastSeenRaw) {
        const lastSeenParsed = parse(lastSeenRaw, LAST_SEEN_FORMAT, new Date());
        const diffInMinutes = differenceInMinutes(lastSeenParsed, new Date());
        if (Math.abs(diffInMinutes) >= IDLE_TRESHOLD_IN_MINUTES) {
          localStorage.removeItem(LAST_SEEN_KEY);
          signOut();
        }
      }
    } catch (e) {
      console.error(e);
    }

    const interval = setInterval(() => {
      try {
        localStorage.setItem(LAST_SEEN_KEY, format(new Date(), LAST_SEEN_FORMAT)); //refresh marker every 5 seconds
      } catch (e) {
        console.log(e);
      }
    }, 5 * 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

[kubarozycki]

@MarianaKWork check my response - might solve your problem :)