Angular 5 / Angular 6 User Idle session tracking

Hi Folks !

One of the feature that I implemented on UI side is to find out the user idle time, if user becomes idle for say ‘x’ minutes then take an action e.g. to invalidate the user session, force to sign in again to application after certain amount of inactivity time.

To achieve this we can use library named angular-user-idle

First install the dependency in your angular project by executing following command-

npm i angular-user-idle@^1.1.0

Now next step is to import same in app.module.ts

import { UserIdleModule } from ‘angular-user-idle’;

and declare it as follows:

UserIdleModule.forRoot({idle:600, timeout:300, ping:60}),

where all values are defined in milliseconds, so in above example we set idle time to 10 mins, timeout to 5 mins and ping to 1 min.

app.module.js looks like as follows:

import { BrowserModule } from ‘@angular/platform-browser’;
import { UserIdleModule } from ‘angular-user-idle’;
import { NgModule } from ‘@angular/core’;
import { RouterModule } from ‘@angular/router’;
import { FormsModule } from ‘@angular/forms’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { HttpModule } from ‘@angular/http’;
import { NgIf } from ‘@angular/common’;
import { ReactiveFormsModule } from ‘@angular/forms’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
UserIdleModule.forRoot({idle:60, timeout:90, ping:30}),
FormsModule,
BrowserAnimationsModule,
HttpModule,
HttpClientModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

and write down following logic in method onInit of app.component.ts. Here after time out I’m displaying message pop-up to user saying their session has timeout.

import { Component } from ‘@angular/core’;
import {environment} from ‘../environments/environment’;
import {Http} from ‘@angular/http’;
/* For UI loader */
import { Subscription } from ‘rxjs’;
/* For Handling session timeout */
import { UserIdleService } from ‘angular-user-idle’;
@Component({
selector:’app-root’,
templateUrl:’./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
constructor(privateuserIdle:UserIdleService){
}
privatesubscription:Subscription;
ngOnInit() {
//Start watching for user inactivity.
this.userIdle.startWatching();
// Start watching when user idle is starting and reset if user action is there.
this.userIdle.onTimerStart().subscribe(count=> {
var eventList= [“click”, “mouseover”,”keydown”,”DOMMouseScroll”,”mousewheel”,
“mousedown”,”touchstart”,”touchmove”,”scroll”,”keyup”];
for(leteventofeventList) {
document.body.addEventListener(event, () =>this.userIdle.resetTimer());
}
});
// Start watch when time is up.
this.userIdle.onTimeout().subscribe(() => {
alert(“Your session has expired click on OK to resume the application.”);
})
}
}
output
idle-session-popup
Here we have import UserIdleService and then injected same in constructor. In eventlist we registered the list of events which interrupts the idle time and reset the idle counter. Rest of the code is self explanatory.
Done. Happy Coding !!!

3 thoughts on “Angular 5 / Angular 6 User Idle session tracking

  1. Thank you for this. Very helpful. Any thoughts on how I could implement a warning prior to timeout, such as “You will be logged out in 3 minutes due to inactivity. Click OK to continue your session.”

    Like

  2. this.userIdle.startWatching();

    This line it is giving error says Property ‘userIdle’ does not exist on type ‘AppComponent’

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s