How to Handle User Idleness and Session Timeout in Angular

There are times you need to handle auto-logout or session timeout (session expired) in your angular application based on user inactivity for a specific period of time. In this tutorial, I will teach you how to handle user idleness using bn-ng-idle npm package.

Install bn-ng-idle Session Timeout NPM package

npm install bn-ng-idle --save

The package exports a singleton service BnNgIdleService which is written in RxJS to listen for various DOM elements, Import the service in your module and add it in your providers array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { BnNgIdleService } from 'bn-ng-idle'; // import bn-ng-idle service
 
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [BnNgIdleService], // add it to the providers of your module
  bootstrap: [AppComponent]
})
export class AppModule { }

Listen for User Idleness/Session Timeout in Angular Component

Let’s listen for the user’s idleness in an angular component.

• Import the BnNgIdleService in your component
• Inject the service in the constructor to create a singleton instance.

import { Component } from '@angular/core';
import { BnNgIdleService } from 'bn-ng-idle'; // import it to your component
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
  constructor(private bnIdle: BnNgIdleService) {
 
  }
 
  // initiate it in your component OnInit
  ngOnInit(): void {
    this.bnIdle.startWatching(60).subscribe((isTimedOut: boolean) => {
      if (isTimedOut) {
        console.log('session expired');
      }
    });
  }
}

In your ngOnInit lifecycle hook, subscribe to the startWatching method which returns an observable.

The startWatching method accepts a single parameter that is the time duration in seconds.

In the above example, I have passed 60 seconds (1 minute). If the user is idle for the specified minutes, then the observable will be emitted by the service. Based on the value of isTimedOut (boolean), We can do auto-logout or an API call or some redirection, etc. For brevity, I just logged the text.

Under the Hood – Session Timeout Logic in Angular

In-depth, the bn-ng-idle package is written in RxJS to listen for various DOM events like mouse move, click, resize, etc.

A timer will run once you subscribed to startWatching method, if there’s an event the timer gets restarted automatically inside the package.

If there’s no event triggered for the specified time, the startWatching method will emit the boolean value to indicate that the user is inactive.

Conclusion

I hope, you got a solution for your angular application to handle session timeout (session expired) based on user idleness/user inactivity. If you know any other package which suits best for this user idleness/session timeout scenario, make a comment below.