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?

Route

My answer didn't involve a look at your username / rep before I started talking. It's probably a matter of opinion; look at the sites you like the implementation of and match. Yes, you could create a table for storage of temporary and unsaved information then load that next time instead of the old data, but... If user abandons input, do they / you want to keep it? My ideal option would be to set up Javascript to ask whether the user wants to navigate away without saving, offering a save of temp data, then loading it from a temp table or discarding if failed login. Lots of code, though. – Reinsure

@Dylan: The problem with the heart-beat solution (commenting on your deleted answer) is that I don't necessarily want to keep the session alive if they walk away from their computer. They should have to re-verify it's the same person accessing the computer again (hence requiring them to re-enter their password). Your comment sounds like my 2nd 'solution' with the addition of asking whether or not they want to save the data, which is a good point. I hadn't thought about that. – Route

Is your form really filled with enough data that it will have an hour of activity between POST's? That seems.... Odd. Really big form? No intermediary saves? I'd look for places where users generally would WANT to save their work as midpoints and either save, ask, or split pages. – Reinsure

@Dylan: This is a web app. Users run it all day long. Sometimes they have to step away from their computer. They're not savvy enough to know to press Save before walking away. Auto-saves could work for some of the larger forms, but I wouldn't want to implement that everywhere. – Route

I'm just saying that it's entirely possible you could look at the usability side; if people are losing big chunks of work because your individual forms are too involved it might be a design issue rather than a technical one. – Reinsure

@Dylan: Yes, I see your point. Some of them are just a single rich-text editor though. Not necessarily big at all :-) – Route

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.

Archaeological

We ended up pinging the server every minute as long as there's activity (mouse move, click or keypress). So far it's worked well, our customers have been thanking us. (Can't believe it took 2 years to actually implement this) – Route

Good to hear that! – Archaeological

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.

Hersey

That's pretty cool actually. Hadn't considered that solution. I don't think this would work on 90% of our forms though, because it isn't just one person editing the data. What if the user starts editing something, then leaves for 2 days, then comes back and saves it? Meanwhile, someone else has modified the same form and their changes are now overwritten. I suppose some checks could be put in. – Route

@Route you should definitely check data consistency server-side. ideally when the user submits a form you check if the DB already contains something similar (for example, if the user submits a blog post you could check if there's any entry with the same title) and ask the user for confirmation. – Hersey

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.

Iraq

It's not a single page web app, but it's app they use for their day jobs. Sometimes they get pulled away from the computer to do something important so they might leave it open for more than an hour. I've heard a case where they were legitimately typing for more than an hour, taking very detailed notes. Extending the session timeout is not an option. The session is refreshed every time they click -- I'm specifically talking about if they spend more than an hour on a single page. – Route

Regarding your solution, we did exactly that on one particularly lengthy form, but I'm really not fond of that solution because it involves two round trips to the server with every single page click. It has to send an AJAX request to verify they're still logged in and wait for the request to return before navigating them anywhere. – Route

@Mark, I assume that your form is something like rich-text-editor. "Sending ajax request on every page click" is keep your application in load both server and client side when multiple user are accessing simultaneously. You have to change this approach. And Specially I am talking about that the user is trying to submit the form after session expired or in invalid session. In this case, you have to renewal the session. For that you have to capture the user action. The better user event to resolve is submit button click. This is what I mentioned as a "#1" in my suggestion steps. – Iraq

@Mark, And one more condition is there. Lets assume user doesn't attempt to try save the form. Still you don't want to loose the user data. In that case, calculate user's ideal time and do auto-save the form once this ideal time reaches threshold value. – Iraq

Yes, it's a rich-text editor. "I am talking about that the user is trying to submit the form after session expired or in invalid session" -- how would we know the session has expired/become invalid without first sending a request to the server? – Route

@Mark, You can determine session expiration on checking whether session-cookie is exist or not. In this case, There is no need to send separate Ajax request. This expiration and renewal is also depends on your server-side logic. – Iraq