How to detect if the user is closing the browser OR navigate on other website

Question

I want to implement session handling in the way that if the user closes the browser or tab all sessions are expired/destroyed. But I want to keep all the sessions if the user is navigating to another website. How can I do this in Nextjs?

Answer 1

You can use an event listener for an unload event: https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event

But given that you're in React/Next.js land, you'll likely want to hook up that listener inside a useEffect hook, and if you're going to do that ...

... you can simply skip the event listener entirely, and use the return value of the useEffect as your "unload" handler.

As explained here (https://reactjs.org/docs/hooks-effect.html) when you return a function from inside a useEffect, that function gets called when the component is removed from the page.

If you add the code you want to trigger "onUnload" into the returned function from a useEffect on your "App" component, this will have the same effect as using an unload event listener.

// App.js
import { useEffect}, React from 'react'

App = () => {
   useEffect(() => {
       return () => {
         // add code to trigger when the user leaves here
       }
   })
}