Display Session Timeout Warning with ASP.NET AJAX

In some web applications that show sensitive data, such as online banking, we want to “time out” the user’s session after a certain amount to time. For instance, we might want to log out the user automatically and redirect the user to the home page.

This is an important security feature, but at the same time, the user might not like it if she is logged out automatically right in the middle of reading something on the page. So it would be a good idea to display a message before actually timing out and maybe give the user a chance to do something about it.

Here’s a simple solution using ASP.NET AJAX and some JavaScript to display a warning before we time out the page.

Create a new ASP.NET Web Application in Visual Studio.

Add a ScriptManager control to the Default.aspx page or to the master page.

<asp:scriptmanager id="ScriptManager1" runat="server" />

If you add the ScriptManager control to the master page, you will need to add a ScriptManagerProxy control to the Default.aspx page.

As I mentioned on another post, ScriptManager takes care of loading the necessary ASP.NET AJAX components to enable partial postback and other AJAX operations.

As noted by Dave Ward in his post, if we have a JavaScript function named pageLoad() in our page, ASP.NET AJAX will call that function when the page loads or when a partial postback completes.

Add this JavaScript code to the Default.aspx page.

<script type="text/javascript"> 

    //get a hold of the timers
    var iddleTimeoutWarning = null;
    var iddleTimeout = null;

    //this function will automatically be called by ASP.NET AJAX when page is loaded and partial postbacks complete
    function pageLoad() { 

        //clear out any old timers from previous postbacks
        if (iddleTimeoutWarning != null)
            clearTimeout(iddleTimeoutWarning);
        if (iddleTimeout != null)
            clearTimeout(iddleTimeout);
        //read time from web.config
        var millisecTimeOutWarning = <%= int.Parse(System.Configuration.ConfigurationManager.AppSettings["SessionTimeoutWarning"]) * 60 * 1000 %>;
        var millisecTimeOut = <%= int.Parse(System.Configuration.ConfigurationManager.AppSettings["SessionTimeout"]) * 60 * 1000 %>; 

        //set a timeout to display warning if user has been inactive
        iddleTimeoutWarning = setTimeout("DisplayIddleWarning()", millisecTimeOutWarning);
        iddleTimeout = setTimeout("TimeoutPage()", millisecTimeOut);
    } 

    function DisplayIddleWarning() {
        alert("Your session is about to expire due to inactivity.");
    } 

    function TimeoutPage() {
        //refresh page for this sample, we could redirect to another page that has code to clear out session variables
        location.reload();
    } 

</script>

In this code, we set two timers in the pageLoad() function. One timer will display a warning and the second one will actually time out the session. For the purpose of this test, we’ll just refresh the page, but in a real scenario, we would probably redirect the user to the logout page.

We get the minutes for each timer from the web.config with the ConfigurationManager class.

You will need to add these app setting to the web.config. For this sample, I’ll use just 1 and 2 minutes for each timer.

  <appSettings>
    <add key="SessionTimeout" value ="2"/>
    <add key="SessionTimeoutWarning" value ="1"/>
  </appSettings>

That’s it, go ahead and run the app and wait…

Please leave your comments if you have any issue or if you there’s anything that can be improved.