how to logout a user when browser closed

Question

Here I want to logout an user when they close the browser. For that I have done R&D and found that the following code will fire when we close the browser.

window.onbeforeunload = function() {
  myService.logout();
  return 'Your own message goes here...';
}

Here when I try to close the browser this event will fire and it will make the user to logout. But here the problem is when the page is redirected that time also this event is firing.

I want to use this function to make the user to logout.But it is going wrong.Please help me to do this functionality.

so it is not a single page application? so what if you have 2window open and closing one window? still you want to perform a logout? — Koushik Chatterjee, Jul 22 '17 at 14:31
yes my application is web application and I want to perform logout even there is two tabs open — Gen, Jul 22 '17 at 14:32
handle the `$destroy` event in `$rootScope` since you are using angularjs — Koushik Chatterjee, Jul 22 '17 at 14:34
Just implement a session timeout. You really cannot tell when the user has "gone away". — Pointy, Jul 22 '17 at 14:37
@Pointy by using myService.logout(); I will go to java and making session.invalidate(); — Gen, Jul 22 '17 at 14:38
similar question here: https://stackoverflow.com/questions/13400521/how-to-logout-my-application-when-i-closed-the-window — Vivens Ndatinya, Jul 05 '19 at 22:09
Similar question here: https://stackoverflow.com/questions/13400521/how-to-logout-my-application-when-i-closed-the-window — Vivens Ndatinya, Jul 05 '19 at 22:10

score 2 · Accepted Answer · answered Jul 22 '17 at 18:41

But here the problem is when the page is redirected that time also this event is firing.

I guess this is a redirect that you yourself are performing. If that's the case, why don't you use a global variable to differ your redirects with your client's redirects? Something like this:

...
thisismyredirect = true; //before redirecting, set this variable
window.location = "http://www.yoururl.com";
...

and in your onbeforeunload event, you check whether this redirect was performed by you or not. If yes, then no need to call logout() function:

window.onbeforeunload = function() {
    if(!thisismyredirect) {
        myService.logout();
        return 'Your own message goes here...';
    }
}

score 1 · Answer 2 · answered Jul 05 '19 at 22:18

Another solution is to use Window.sessionStorage. When the user logs in, you set the sessionStorage variable to 'true', when they logout you set it to 'false', and the variable will be removed from the sessionStorage when the browser closes. If you need to share the sessionStorage variable across tabs in the same browser instance, a great example has been posted here

Ihor Khomiak · Answer 3 · 2021-02-22T21:35:23.937

tabOrBrowserStillAliveInterval;

constructor() {
  // system should logout if the browser or last opened tab was closed (in 15sec after closing)
  if (this.wasBrowserOrTabClosedAfterSignin()) {
    this.logOut();
  }

  // every 15sec update browserOrTabActiveTimestamp property with new timestamp
  this.setBrowserOrTabActiveTimestamp(new Date());
  this.tabOrBrowserStillAliveInterval = setInterval(() => {
    this.setBrowserOrTabActiveTimestamp(new Date());
  }, 15000);
}

signin() {
  // ...
  this.setBrowserOrTabActiveTimestamp(new Date());
}

setBrowserOrTabActiveTimestamp(timeStamp: Date) {
  localStorage.setItem(
    'browserOrTabActiveSessionTimestamp',
    `${timeStamp.getTime()}`
  );
}

wasBrowserOrTabClosedAfterSignin(): boolean {
  const value = localStorage.getItem('browserOrTabActiveSessionTimestamp');

  const lastTrackedTimeStampWhenAppWasAlive = value
    ? new Date(Number(value))
    : null;
  const currentTimestamp = new Date();
  const differenceInSec = moment(currentTimestamp).diff(
    moment(lastTrackedTimeStampWhenAppWasAlive),
    'seconds'
  );

  // if difference between current timestamp and last tracked timestamp when app was alive
  // is more than 15sec (if user close browser or all opened *your app* tabs more than 15sec ago)
  return !!lastTrackedTimeStampWhenAppWasAlive && differenceInSec > 15;
}

How it works: If the user closes the browser or closes all opened your app tabs then after a 15sec timeout - logout will be triggered.

it works with multiple windows open
no additional load on the server
no problem with F5 / refresh

Browser limitations are the reason why we need 15sec timeout before logout. Since browsers cannot distinguish such cases: browser close, close of a tab, and tab refresh. All these actions are considered by the browser as the same action. So 15sec timeout is like a workaround to catch only the browser close or close of all the opened your app tabs (and skip refresh/F5).

It's looks good, but the issue you have here is that you have to open the page again in order to ask for logout. I would add this kind of code in the BE , and check that if the BE didn't get some notification from the UI that the session is lived then it will do logout. — Ofir Hadad, Oct 25 '21 at 18:10

how to logout a user when browser closed

3 Answers3

Linked

Related