How to check user inactivity or user idleness using Angular 9 with circle progress

User idleness check is one of the most common behaviors for most web and mobile applications. Here, I am going to create one reusable Angular service which will check user inactivity for a certain amount of time on the application and then make the user log out from the application. The idle service has been created without using any npm library, so you can extend it by yourself as well as per your needs.

The following items are going to cover in this blog -

User inactivity OR idle timeout
Why do we need this
Coding time - How to check user idleness using angular
Sample project
Demo

User inactivity OR idle timeout

Idle timeout is mainly set up to determine user activeness on the application. Most banking, insurance, or login-based application can have this type of feature, so that application will automatically remove all valuable data or information about the user on his/ her inactivity. In that way, client-side application security can be imposed. Here, I have made two main variables to determine user inactivity -

Variable 1 (x) = 2 min (First Clock - Application will check user idleness for 2 min if the user click anywhere in the application the clock will reset and start again from 1:59 min)

Variable 2 (y) = 1 min (Second Clock - this clock will start right after the first clock's end, and wait for 1 more min for user action on Dialog. This time user interaction like click, the scroll will not work, instead the user needs to perform some action, either to continue the session or log out the session.)

Why do we need this?

Idle timeout is mostly needed in web apps for two reasons: security and to avoid unnecessary calls to the API. The web app is vulnerable to security attacks. The longer it is idle, the more time for the attacker to inject some malicious code or hijack the session.

In another case, imagine a scenario where there are calls to be made to the backend API every 30 sec or 1 min to retrieve the updated data. There is no need to make those calls if the user is away from the computer. We can avoid these unnecessary calls with the idle timeout feature.

Coding time - How to check user idleness using angular

To check user inactivity, it is very obvious that the application should check that any event is happening on the application or not. To check this, we can add multiple event listeners like click, scroll, touch, etc. on the widow object to determine the user is doing anything or he/she is away from the application. But the event listener is very costly in that case and it will make it laggy to perform other work as it is continuously listening for the event. In Angular, we have an option to execute code outside of the angular zone, and here I am leveraging the same.

constructor(private zone: NgZone

private initListener(): void {

this.zone.runOutsideAngular(() => {

this.userActivityChangeCallback = ($event) => this.handleUserActiveState($event);

window.document.addEventListener('click', this.userActivityChangeCallback.bind(this), true);

});

}

Here, I have created one component which will show the user inactive clock with a progress circle and the other one is an ng-idle service that will check and run the respective clock. And also few observers has been exposed to determine each stops like below -

initiateFirstTimer = (status: string) => {

switch (status) {

case 'INITIATE_TIMER':

break;

case 'RESET_TIMER':

break;

case 'STOPPED_TIMER':

this.showSendTimerDialog();

break;

default:

this.idleTimerLeft = this.formatTimeLeft(Number(status));

break;

}

}

Based on each case, you can execute different logic.

Demo Time:

Summary & Sample Code:

User inactive or idle timeout is one of the most common features in every web application.
We can avoid malicious attacks and unnecessary backend API calls with this feature.
We can actually detect the idleness of the user with the help of DOM events.
It is always good to let the user know with the modal popup that he/she has been idle before logging them out.

Hope you like it, queries and suggestions are welcomed in the comment section below.

Happy Coding!

- Lazy Panda Tech