HOW TO IMPLEMENT IDLE TIMEOUT IN IONIC 5 | IDLE TIMEOUT EXAMPLE FOR IONIC 5

Share the post

Hello All, In today’s modern mobile applications, Security is the major thing which has to be considered while developing the application. In Ionic-angular mobile applications, We have to take care of all the security aspects. In this tutorial, We will discuss What is Idle timeout? Why we have to implement an idle timeout in our mobile application? How to implement Idle timeout in Ionic 5 application?

In the last topic, We had discussed What is Capacitor & How to run the Ionic-Capacitor application on an android device? In this topic, We will discuss How to implement Idle timeout in the Ionic 5 application with the help of an example. We are going to use ng-idle/core & ng-idle/keepalive two-node dependencies to implement the idle timeout functionality in our ionic application.

What is Idle timeout?

It’s the amount of time when the user remains idle/inactive in application.

For Example, User has opened our Ionic application & remains idle/inactive for some time. It means user is not doing any activity for certain period of time.

Why do we want to implement an idle timeout in our Ionic mobile application?

If user remain inactive for certain period of time then it might have to face security issues. For example, Attacker can implement some malicious code. So, this is not good in terms of security if our application is related to banking,finance domain.

One more thing is calling unnecessary API if user is on idle state. So, It will create problem sometime. For example, Suppose you are calling one API to update your dashboard / home page.

How to implement an idle timeout in the Ionic 5 application

Step1: Create a Ionic 5 application using following command

ionic start <appname> <template>

Step2: Install the both ng-idle dependencies using following command

npm install --save @ng-idle/core@2.0.0-beta.15 @ng-idle/keepalive@2.0.0-beta.15

Note : Kindly add only above dependency otherwise you might face some issues with other versions.

Step3: Add dependency in our app.module.ts

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';

@NgModule({   
declarations: [AppComponent],   
imports: [BrowserModule,NgIdleKeepaliveModule.forRoot()],

Step4: Add logic in our app.component.ts

import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { Keepalive } from '@ng-idle/keepalive';


 idleState = 'Not started.';
 timedOut = false;
 lastPing?: Date = null;


constructor(private idle: Idle, private keepalive: Keepalive) {

     // sets an idle timeout of 10 seconds.
     idle.setIdle(10);

     // sets a timeout period of 10 seconds. after 20 seconds of inactivity, the user will timed out.
     idle.setTimeout(10);

     // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
     idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');    

 idle.onTimeout.subscribe(() => {       
        this.idleState = 'Timed out!';    
       this.timedOut = true;     
});    
 idle.onIdleStart.subscribe(() => this.idleState = 'idle state');   
  
idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!');     // sets the ping interval to 15 seconds    

 keepalive.interval(15);     
  
 this.reset();
  }
 reset() {
     this.idle.watch();
     this.idleState = 'Started.';
     this.timedOut = false;
   }

Step5: Add below code in app.component.html

<p><strong>{{idleState}}</strong></p> 
<button (click)="reset()" *ngIf="timedOut">Restart</button>

Now, In this way, We can able to handle the user’s idle timeout functionality. We can write the code to redirect users to the login page if they remain idle for 10 seconds.

1 thought on “HOW TO IMPLEMENT IDLE TIMEOUT IN IONIC 5 | IDLE TIMEOUT EXAMPLE FOR IONIC 5”

Leave a Comment