How to Implement Angular User Idle Timeout Detection

In this post, you will learn how to implement angular user idle and session timeout detection using an NPM package. Before going to use the package, I will walk you through what is user idle timeout and why we need to use it for our web applications.

What is User Idle Timeout?

In a web application, User Idle Timeout is the amount of time the user is inactive and not performing any actions or away from the computer

Why do we need User Idle Timeout?

The two major reasons to implement user idle detection:

1.Security reasons:

The web application is very easily vulnerable to security attacks. The longer the user system is idle, the easier the hacker can inject malicious code or hijack the logged-in users session. In these cases, if we use user idle detection to log out the user if they are idle that will add some security to our web application.

2. Performance:

User Idle Timeout is also used for performance-related scenarios. Imagine, if we are making an API call to get data every 1 minute for live updates, then if the user is idle, we should stop making API call.

How to Detect User Idle?

To detect user idle in the browser, we can make use of the browser DOM events. We can run a timer using setInterval method, If no DOM events are acquired during that interval we can log out the user. On the other hand, for each DOM event that happens, we can reset the timer to run again.

How to handle Angular User Idle Timeout Detection?

To not reinvent the wheel, There’s a popular package available to detect the user idle/session timeout detection, bn-ng-idle. I will cover how we can make use of that package to detect user inactiveness in our angular application.

Install bn-ng-idle Session Timeout NPM package

npm install bn-ng-idle --save

The bn-ng-idle 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 to 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 emits data. 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.

• Top 30 Most Frequently Asked Angular interview questions with answers

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.