AngularJS ng-idle Session Timeout – Warning and Extend Session Issue

I’m implementing a session timeout feature with a warning dialog and the option to extend the session using AngularJS with ng-idle. My code uses a session timeout of 2 minutes with a warning that pops up 1 minute before the session expires. The user has the option to extend the session by clicking a button, and if they don’t, the session times out.

Code Implementation

Configuration

Here is the AngularJS module configuration code, including the session timeout settings and Keepalive for session sliding:

var app = angular.module('HrSystem',
    ['ui.bootstrap',
        'ngSanitize',
        'ngIdle']
).config(['$uibTooltipProvider', 'KeepaliveProvider', 'IdleProvider', function ($uibTooltipProvider, KeepaliveProvider, IdleProvider) {
    const sessionTimeout = 120; // 2 min
    const reminderTime = 60; // 1 min

    IdleProvider.idle(sessionTimeout - reminderTime);
    IdleProvider.timeout(reminderTime);
    IdleProvider.autoResume('notIdle');

    // Configure keepalive
    const keepAliveInterval = (sessionTimeout - reminderTime) * 0.75;
    KeepaliveProvider.interval(keepAliveInterval);
    KeepaliveProvider.http(serviceBase + '/dashboard/SessionSliding');
}]);

Session Controller

This is the controller that manages the session timeout functionality, including event handling for idle start, idle end, and idle timeout:

app.controller('SessionController', ['$scope', 'Idle', 'Keepalive', '$uibModal', '$sce', 'DashboardServices', function ($scope, Idle, Keepalive, $uibModal, $sce, DashboardServices) {
    $scope.isTimeout = false;
    
    $scope.closeModals = function () {
        if ($scope.warning) {
            $scope.warning.close();
            $scope.warning = null;
        }

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

    $scope.$on('IdleStart', function () {
        $scope.closeModals();
        $scope.isTimeout = false;
        $scope.warning = $uibModal.open({
            templateUrl: 'warning-dialog.html',
            windowClass: 'to_pop',
            backdrop: 'static',
            keyboard: false,
            scope: $scope,
        });
    });

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

    $scope.$on('IdleTimeout', function () {
        $scope.isTimeout = true;
    });

    $scope.$on('$destroy', function () {
        $scope.closeModals();
        Idle.unwatch(); // Stop watching when the controller is destroyed
    });

    $scope.continueWithSession = function () {
        $scope.isSessionExtending = true;
        let Service = DashboardServices.SessionSliding();
        Service.then(function (response) {
            Idle.watch();
            $scope.closeModals();
            $scope.isSessionExtending = false;
        });
    };
}]);

Warning Dialog

Here is the code for the warning dialog that pops up when the user is idle, offering them an option to continue the session:

<script type="text/ng-template" id="warning-dialog.html"> <div class="modal-body">
        <div class="session_tbox" ng-hide="isTimeout">
            <p>Your online session will expire in</p>
            <p idle-countdown="countdown" ng-bind-html="convertHMS(countdown)">{{countdown}}</p>
            <p>Please click Continue to stay connected</p>
            <button ng-click="continueWithSession()" ng-disabled="isSessionExtending">Continue</button>
        </div>
        <div class="session_tbox" ng-show="isTimeout">
            <p>Your session has expired</p>
            <p>Due to inactivity</p>
            <div>
                @Html.ActionLink("OK", "LogoutUser", "Login", null, {
                    @class = "btn_blank_bg_pop",
                    onclick = "$(this).css('pointer-events', 'none'); $(this).css('opacity', '.5'); $(this).text('Processing...');"
                })
            </div>
        </div>
    </div> </script>

Web.config

    <sessionState timeout="2" />
    <authentication mode="Forms">
        <forms name="userLogin" path="/" timeout="2" loginUrl="~/Login/Index" slidingExpiration="true" />
    </authentication>

MVC Controllar

  [HttpGet]
  public ActionResult SessionSliding()
  {
      return Json( true, JsonRequestBehavior.AllowGet);
  }

Issue

The session timeout and warning dialog work fine, but I’m experiencing the following issues:

• Clicking “Continue” to extend the session works fine the first time. However, when extending the session a second time, the countdown triggers the IdleTimeout event before reaching zero. It could happen 10, 20, or 18 seconds before reaching zero, indicating the session has expired.
• The IdleTimeout event triggers prematurely in some cases, leading to unexpected session expiration.

Does anyone have any suggestions on how to address these issues?
What could be causing that type of issue, and why might the session not be extending as expected?

The countdown should reach zero before the session timeout is triggered.