How to handle session timeouts as a user is saving a form?

Question

Our system has a one hour session length. Occasionally this will expire just before a user presses a 'Save' button on a form. When the session times out, they get kicked back to the log in page and their data is lost. This is obviously bad.

I'm trying to think of a better way to handle this situation. Here's what I've come up with:

1. Start a 55 minute timer in JavaScript on every page load. When it runs out, pop up a message saying "Your session is about to expire, click here if you're alive".
   • Clicking the link would send an AJAX request back to the server to reset the session
   • What if they don't click the link in the next 5 minutes because they've legitimately had to step away from their computer for a minute, but still have a massive form in the works?
     • Poll the server every 30 seconds or so to find out when exactly their session has expired, and then display a login screen in a popup when it has
2. Let the session expire. Copy the POST data somewhere safe (where??). When they try saving the form, they will get kicked to the login form as usual. After a successful login, re-POST the data to the proper location.

How do others deal with this situation? What's the best/easiest approach?

Answer 1

Ok. Besides what people say things like "if the user spends more than 1 hour on the form there is something wrong with the form" or "if the user stays idle for that long, it's their problem, just throw them back to login page", we live in a real world with real people and time is money. Let's say you run an online store and the user has a put a $10,000 worth in their shopping cart, their phone rings and their girlfriend talks for 1 hour... Let's say your form is a textarea where the user decides to write their entire life... Let's say your app is a webmail. The email body is a form, right? We don't want the user to lose an email that they spent 2 hours writing to their loved ones or to an important customer, we save a draft! There are many different possibilities that would justify timer, storing data and pinging the server.

If you are on a time/money critical form page, do not hesitate to refresh the server and keep the session alive. Monitor a few events, like keypress, clicks etc. This will refresh the session in a legitimate way, as long as it gives a clue that the user is there.

• Use browser events to keep the session alive even before the form is submitted
• If the session is about to expire, save as a draft.
• If the session is expired, use a lightbox to get credentials again.

Answer 2

Pretty old question, but I'm just gonna drop this here for future reference.

Best idea would be to use a javascript library to save to your browser's local storage. Enter Sisyphus.js. Just initialize it on a form and all the contents that have not been submitted will be saved and restored.

Best feature? Works with all types of forms, checkboxes, selects and all other classic html input types.

Answer 3

Is that Single Page Application? Something is strange hear from you. Why the user has to spend an hour to fill a single form?

If your application is not an single page application, then the solution is pretty easy. Update your session expiration OR post pone the session expiration on receiving each request. There is no way that user is an ideal for an hour.

Lets assume, You are working with single page application,

1. Continuous polling is not good-fit for this. This will take more bandwidth.
2. Javascript timer can work.However Javascript is event based. So there is no necessity that your timer trigger each second. This timer event can stop by any other heavy weight JavaScript operation.
3. Let the session expire and try to port form data to new session is not recommended. This is similar to session hijacking. Because you have to store data either cookie or local storage. Or attempt to send data to the server with expired session context is not advisable.

So My suggestion is as follows,

1. On click submit button trigger ajax request.
2. Validate the session in sever-side.
3. If session has expired, on ajax success show an overlay with login form. Here any way user has to login.
4. If user successfully enter the credential, then post them in another ajax request, and set cookie with new session id on response header.
5. Close the overlay.
6. Now submit the form either trigger sumbit event in Javascript or Say some message to the user and ask them to submit. Here post request for your big form data is having valid session-id.

Pros:

1. No need timer
2. No need polling
3. No need to store form data anywhere.