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?
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
});