Redirect to logout link after closing the last tab

Question

As per the requirement, I have to log out the user when he closes the last tab on a browser.

    ngOnInit() {
        let counter: any = this.cookieService.get('screenCounterCookie');
        counter ? ++counter : (counter = '1');
        this.cookieService.set('screenCounterCookie', counter);
    }


    @HostListener('window:beforeunload', ['$event'])
    ngOnDestroy() {
        let counter: any = this.cookieService.get('screenCounterCookie');
        if (counter > 1) {
            --counter;
            this.cookieService.set('screenCounterCookie', counter);
        } else {
            this.cookieService.delete('screenCounterCookie');
            window.open(environment.cognitoLogoutURL);
        }
    }

The behaviour is erratic. Sometimes it reduces the counter, sometimes it doesn't. Also, I have to handle the refresh, multiple tabs close and browser close logic here.

How can I implement it?

I feel like this answer would be good hint: https://stackoverflow.com/a/23692090/390161 — IAfanasov, Mar 15 '21 at 08:24
The link indeed is useful. It helped me keep a counter. The problem is `window.open()` is not getting triggered. — Nibha, Mar 15 '21 at 18:43

score 3 · Accepted Answer · answered Mar 22 '21 at 19:59

Keeping count of total tabs: https://jsbin.com/mipanuro/1/edit?html,js,output (Refer to this)

Method 1 (Will make a POST call):

Using BeaconAPI (navigator.sendBeacon()). This will happen in the background.

Method 2 (Will work for GET Call as well):

Using fetch and keep-alive

Method 3 (Websocket):

Ping your backend every few minutes or so. And if there's no ping the backend can invalidate your session.

Raphaël Balet · Answer 2 · 2021-03-19T15:51:22.373

2

I've improved a little bit your logics while not using the ngOnDestroy. I've tried it and seems to work.

import { Component } from '@angular/core'

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor() {
    const counter = localStorage.getItem('screenCounterCookie') || 0

    localStorage.setItem('screenCounterCookie', (Number(counter) + 1).toString())

    window.addEventListener('beforeunload', () => {
      const counter: number = Number(localStorage.getItem('screenCounterCookie')) - 1
      localStorage.setItem('screenCounterCookie', counter.toString())

      if (counter <= 0) {
        localStorage.removeItem('screenCounterCookie')
        console.log('logout')
        // Your logout
      }
    })
  }
}

edited Mar 19 '21 at 15:51

answered Mar 19 '21 at 15:39

Raphaël Balet

6,334
6
41
78

Thanks. your're genius. But there's a problem. When you user refresh page he will be logged out. – Mu nt May 03 '23 at 11:29
@Munt Yes, because refreshing is taking as if you would close the page, and open a new one, so, in the meantime you have effectively 0 open tabs so you should be logged out (per question requirement). You could save the last deconnection date in the localStorage, but that will create a bunch of other problem. The safest way would be with an expiry token from whatever API you're using. – Raphaël Balet May 03 '23 at 13:13

score 1 · Answer 3 · answered Mar 19 '21 at 12:59

The only sure way to implement this that I can think of is using websockets and the concept of keep-alive. Or a manual periodic poke to the server to reset a timer that would logout the user if the timer runs out.

You can't trust the browser in a cross-platform way to allow you to fire an event when the browser closes or that the user loses electric power.

Redirect to logout link after closing the last tab

3 Answers3