How to Logout system when the user goes idle using ng-idle module in Angular Js

Hi folks, Here we are going to see an example of the ng-idle module in Angular Js. Which is an important module to auto logout a user if the user does not perform any activity on the application.

After completing this tutorial you will be going to understand:

How to logout if the user goes in idle mode or does not perform any activity on the application.

What you’ll do?

Create a simple example that will use the ng-idle module to logout user if no activity is performed.

ng-idle in Angular Js:

Suppose you are working on an application where you have to logout the system when the user goes in idle mode or does not perform any activity on the application for a certain amount of time.

Angular Js provided a module called ng-idle for such situations. Here we will create a simple example to implement the ng-idle module.

Dependencies:

You will need to include following js files to start working with the ng-idle module. You can either reference it from CDN or place it project directory.

angular.js.
angular-idle.js.

Configuration:

The first thing that you need to do for implementing ng-idle module into your application you to include ngidle module as a dependency to your application as shown below.

var myApp = angular.module('myApp', ['ngIdle']);

You should also set your options using the KeepaliveProvider and IdleProvider in your config start-up function like below.

app.config(function(IdleProvider, KeepaliveProvider) {
 IdleProvider.idle(5);
 IdleProvider.timeout(5);
 KeepaliveProvider.interval(10);
 });

Example Implementation:

<html>

<head>
<title>ngIdle</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="https://rawgithub.com/hackedbychinese/ng-idle/master/angular-idle.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngIdle', 'ui.bootstrap']);
app.controller('DemoCtrl', function($scope, Idle, Keepalive, $modal){
$scope.started = false;
function closeModals() {
if ($scope.warning) {
$scope.warning.close();
 $scope.warning = null;
 }

if ($scope.timedout) {
 $scope.timedout.close();
 $scope.timedout = null;
 }
 }

$scope.$on('IdleStart', function() {
 closeModals();

$scope.warning = $modal.open({
 templateUrl: 'warning-dialog.html',
 windowClass: 'modal-warning'
 });
 });

$scope.$on('IdleEnd', function() {
 closeModals();
 });

$scope.$on('IdleTimeout', function() {
 closeModals();
 $scope.timedout = $modal.open({
 templateUrl: 'timedout-dialog.html',
 windowClass: 'modal-danger'
 });
 });

$scope.start = function() {
 console.log('start');
 closeModals();
 Idle.watch();
 $scope.started = true;
 };

$scope.stop = function() {
 console.log('stop');
 closeModals();
 Idle.unwatch();
 $scope.started = false;

};
 });
 
app.config(function(IdleProvider, KeepaliveProvider) {
 IdleProvider.idle(5);
 IdleProvider.timeout(5);
 KeepaliveProvider.interval(10);
 });


</script>

</head>
<body>
 <div ng-app="myApp" class="ng-scope">

<div ng-controller="DemoCtrl" class="ng-scope">
 <p>
 <button type="button" class="btn btn-success" ng-hide="started" ng-click="start()">Login</button>
 <button type="button" class="btn btn-danger ng-hide" data-ng-show="started" data-ng-click="stop()">Reset</button>
 </p>
 </div>

<script type="text/ng-template" id="warning-dialog.html">
 <div class="modal-header">
 <h3>You're in Idle mode. You will be logout after few seconds</h3>
 </div>
 <div idle-countdown="countdown" ng-init="countdown=5" class="modal-body">
 <progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</progressbar>
 </div>

</script>
 <script type="text/ng-template" id="timedout-dialog.html">
 <div class="modal-header">
 <h3>You've Logged out</h3>
 </div>
 <div class="modal-body">
 <p>
 You were idle too long. You are Logged out
 </p>
 </div>
 </script>

</div>



</body>
</html>

See Demo:

View More:

Conclusion:

I hope you will like my this post. Please don’t hesitate to comment for any technical help. Your suggestions and feedback are welcome to me.

Thank You.

Debug On Web

ng-idle module in Angular Js