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.”);})}}
anupam pawar 
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.”
LikeLike
Small correction. The times are in seconds, not in milliseconds. Other than that, its good.
LikeLiked by 1 person
this.userIdle.startWatching();
This line it is giving error says Property ‘userIdle’ does not exist on type ‘AppComponent’
LikeLike
You have to inject the UserIdleService in constructor:
constructor(private userIdle:UserIdleService) {
}
LikeLike