Detecting Idle Users in Your Angular App
Tags: angular
Published: 2022-05-17 17:25:50

---
title: Detecting Idle Users in Your Angular App
published: true
date: 2022-04-19 00:00:00 UTC
tags: angular
canonical_url: https://www.prestonlamb.com/blog/detecting-idle-users-in-your-angular-app
---

## [tldr;](#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](#detecting-idle-users)

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

```ts
// 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.

```ts
// 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.

```ts
// 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:

```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](#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.