Detecting Idle Users in Your Angular App

tldr;

Occasionally the applications we work on need to react in a particular way if the user is inactive for a certain amount of time. For example, if the user is inactive for 5 minutes a popup should appear and ask the user if they want to stay logged in or if they want to log out. In this article, we’ll look at a way to do that in your Angular app. We’ll use two libraries to do this: @ng-idle/core and @ng-idle/keepalive.

Detecting Idle Users

To get started, let’s import the necessary modules into the root AppModule:

// app.module.ts
import { NgIdleKeepaliveModule } from ‘@ng-idle/keepalive’;
@NgModule({
 imports: [ NgIdleKeepaliveModule.forRoot() ]
})

Importing the NgIdleKeepaliveModule will get your application set up and ready to detect idle users. Next up, let’s jump into the AppComponent, where the majority of the work will be done. We’ll need to initialize a couple settings from the core module. Let’s take a look, and then discuss.

// app.component.ts
import { DEFAULT_INTERRUPTSOURCES } from ‘@ng-idle/core’;
export class AppComponent implements OnInit {
 private numberOfSeconds: number = 5;
 constructor(private _idle: Idle) {}
 ngOnInit() {
   this._idle.setIdle(numberOfSeconds);
   this._idle.setTimeout(numberOfSeconds);
   this._idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
 }
}

Let’s look at these lines in a little more detail:

* The setIdle method sets the amount of time to wait before determining that the user is idle. The value is provided in seconds. During this time, the application won’t do anything with the idle user.
* The setTimeout method determines how long the timeout lasts. In other words, using the example above, the application will wait 5 seconds before determining that the user is idle. At that point, the user will have 5 seconds (the length of the timeout) to register some activity in the application before the timeout expires.
* The setInterrupts method takes an array of Events. These events interrupt the timeout and start it over. The defaults include mousemove, keydown, DOMMouseScroll, mousewheel, mousedown, touchstart, touchmove and scroll.

After these initialization values are set, we’ll need to know when we should show or hide the warning or log the person out. I’ll show you what I think are the most important events we’ll listen to.

// app.component.ts
ngOnInit() {
 this._idle.setIdle(numberOfSeconds);
 this._idle.setTimeout(numberOfSeconds);
 this._idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
 this._idle.onIdleStart.subscribe(() => {
  // show the modal
 });
 this._idle.onIdleEnd.subscribe(() => {
  // hide the modal
 });
 this._idle.onTimeoutWarning.subscribe((secondsLeft: number) => {
  // Update the warning message
 });
 this._idle.onTimeout.subscribe(() => {
  // Hide the modal, log out, do something else
 });
}

Let’s talk about each of these events in more detail.

* The onIdleStart method fires when the user becomes idle. This is after the numberOfSeconds passed in to the setIdle method.
* The onIdleEnd event fires when the user is no longer idle.
* onTimeoutWarning fires each second for the duration that was provided to the setTimeout method. So, if you set that value at 5, the onTimeoutWarning will fire at 5, 4, 3, 2, and 1.
* The onTimeout event fires when the specified amount of time has expired. This amount of time is the setIdle amount and setTimeout amounts.

With the above code in place, you should have everything you need to determine if a user is idle or not, and then to react to them timing out. The last step is to start the service that watches for the idle users. You can do that with the `watch` method:

// app.component.ts
ngOnInit() {
 . . .
 this._idle.watch()
}
```

The watch method starts the service and watches for the actions listed above. If you don’t call this method, nothing will occur in the app and you’ll definitely be left frustrated.

If you need to stop the timer, you can call the `stop` method if you want to turn the service off and stop watching for idle users.

Conclusion

This method of watching for idle users was a quick and easy way to accomplish the task. With this, I was able to wait until a user had been idle for a certain amount of time and then log them out if they remained idle. There are other things you could do as well, depending on your use case.

Now that you’ve read this article and learned a thing or two (or ten!), let’s kick things up another notch!

Take your skills to a whole new level by joining us in person for the world’s first MAJOR Angular conference in over 2 years! Not only will You be hearing from some of the industry’s foremost experts in Angular (including the Angular team themselves!), but you’ll also get access to:

• Expert panels and Q&A sessions with the speakers
• A friendly Hallway Track where you can network with 1,500 of your fellow Angular developers, sponsors, and speakers alike.
• Hands-on workshops
• Games, prizes, live entertainment, and be able to engage with them and a party you’ll never forget

We’ll see you there this August 29th-Sept 2nd, 2022. Online-only tickets are available as well.

https://2022.ng-conf.org/