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 includemousemove
,keydown
,DOMMouseScroll
,mousewheel
,mousedown
,touchstart
,touchmove
andscroll
.
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 thenumberOfSeconds
passed in to thesetIdle
method. - The
onIdleEnd
event fires when the user is no longer idle. -
onTimeoutWarning
fires each second for the duration that was provided to thesetTimeout
method. So, if you set that value at 5, theonTimeoutWarning
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 thesetIdle
amount andsetTimeout
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:
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.
Top comments (0)