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.
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.
Source: Medium - Preston Lamb
The Tech Platform
Comments