How to show session expire message to User

Question

We have to show a popup to the user when his session is expired after inactivity of 30 minutes e.g. If the user is not using application from last 30 minutes then show them the message that your session is expired.

We are using MVC C# and AngularJs in our application and are using a form authentication cookie. As the session is on the serverside and we have to check this on the client side, if we do any Ajax hit to check session then the session is recreated and never expire.

How can I achieve this?

When you make a request then store the timeout in a viewdata and on the client side on document ready you can trigger a timeout which compares current time and session timeout. — bhanu.cs, Sep 29 '16 at 06:52

score 2 · Answer 1 · answered Sep 29 '16 at 06:54

There are two ways to achieve this

1) Using ng-Idle here is the link to see demo and download that js file

var myApp = angular.module('myApp', ['ngIdle']); //inject ng-Idle in your app

myApp.config(['KeepaliveProvider', 'IdleProvider', function(KeepaliveProvider, IdleProvider) {
  IdleProvider.idle(30);
  IdleProvider.timeout(30);
  KeepaliveProvider.interval(10);//check every 10 mins..
}]);

2) Using a bit of JQuery & Js

I think this small below template will give you desired result which is approach two.

var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement means some activity is going on .
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 30) { // 30 minutes
        //call your custom pop up to show user that he is inactive for 30 mins
        window.location.reload();
    }
}

Hope these approaches will give you an understanding how to achieve your result.

The session will not be renewed when the user move the mouse or press a key — Haitham Shaddad, Sep 29 '16 at 07:12
@HaithamShaddad the question is not about session renewal , its about how to decide when to display that user is inactive for some time.You can do service call and invalidate user session and show log out page after that specified time is over in function timerIncrement() — ngCoder, Sep 29 '16 at 07:18

score 1 · Accepted Answer · edited May 23 '17 at 11:48

You should have a label in the page, on the page load set this label to the number of minutes for your session, ex: 30:00 minutes.

Now you will create a function that decrease the timer every second, follow this link to see how can you output a timer Code for a simple JavaScript countdown timer?

Now, you have to reset the timer every time there is a request to the server, when the page loads, the JavaScript code will fire the label that has the timer will reset automatically, but this will not happen when there is an Ajax Request. To do that, you have to write the following code which will intercept any Ajax call done by JQuery and inside it you will reset the counter, this code should be inside the layout or a JavaScript file loaded in the layout

$( document ).ajaxSend(function() {
  //Reset the counter here
});

Thanks. I am looking for something like "ajaxSend" where I can reset counter. — Tarlok, Sep 29 '16 at 12:43

How to show session expire message to User

2 Answers2