angular-user-idle

Service for Angular 15+ to detect and control of user's idle (for previous versions use v3.0.x).


Important

The library was written for my personal needs. So I distribute it "as is" without advanced supporting and change requesting.
If you like the library just use it if not then you're free to fork the repo and make what are you want.

$3

See Demo app

Installation

npm install angular-user-idle

In app.module.ts:
``typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideUserIdleConfig } from 'angular-user-idle';
import { AppComponent } from './app.component';

@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers: [
// Optionally you can set time for idle, timeout and ping in seconds.
// Default values: idle is 600 (10 minutes), timeout is 300 (5 minutes)
// and ping is 120 (2 minutes).
provideUserIdleConfig({ idle: 600, timeout: 300, ping: 120 })
],
bootstrap: [AppComponent]
})
export class AppModule {}
`

$3

You should init user idle service in one of core component or service of your app,
for example login.component.ts:

`typescript
import { Component, OnInit } from '@angular/core';
import { UserIdleService } from 'angular-user-idle';

@Component({
templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
constructor(private userIdle: UserIdleService) {
}

ngOnInit() {
//Start watching for user inactivity.
this.userIdle.startWatching();

// Start watching when user idle is starting.
this.userIdle.onTimerStart().subscribe(count => console.log(count));

// Start watch when time is up.
this.userIdle.onTimeout().subscribe(() => console.log('Time is up!'));
}

stop() {
this.userIdle.stopTimer();
}

stopWatching() {
this.userIdle.stopWatching();
}

startWatching() {
this.userIdle.startWatching();
}

restart() {
this.userIdle.resetTimer();
}
}
`

##### About _ping_
Please note that ping is used if you want to perform some action periodically every _n_-minutes in lifecycle of timer
(from start timer to timeout).

For example, if you want to make a request to refresh token every 2 minutes you set ping to 120 and subscribe to ping's
observable like this:
`typescript
this.idle.ping$.subscribe(() => console.log("PING"));
`
The main schema will be as follow:

|–– 2m (ping)––4m (ping) ––6m (ping)...-– 10m (user idle detected, start timer for 5 min) –- 12m (ping) –– 14m (ping) –– 15m (time is out)|

If you don't use a ping just set ping to any value (not null) and just ignore it.

$3


startWatching(): void;

Start user idle service and configure it.

onTimerStart(): Observable

Fired when timer is starting and return observable (stream) of timer's count.

onTimeout(): Observable;

Fired when time is out and id user did not stop the timer.

stopTimer()

Stop timer.

resetTimer()

Reset timer after onTimeout() has been fired.

stopWatching()

Stop user idle service.

setConfigValues({idle, timeout, ping})

Set config values after module was initialized.

setCustomActivityEvents(customEvents: Observable): void

Set custom activity events after module was initialized.

##### Service logic:
- User is inactive for 10 minutes
- onTimerStart() is fire and return countdown for 5 minutes
- If user did not stop timer by stopTimer() then time is up and onTimeout()` is fire.