Can I use html5 local storage for storing user authentication session information

Question

QUICK BACKGROUND:

I'm writing a Mongo/Express/Angular/Node SPA and using passport I have setup OAuth log in options to handle the user authentication / authorization.

With passport I am successfully maintaining session on the server, so all my XHR requests (that need it) are checking for a logged in user.

On log in the server puts the basic user session info into a cookie for the client to find on the authorization callback, I then am using angular-cookies' $CookieStore to access that cookie on the client save it to the rootscope and clear the cookie.

PROBLEM:

This is working perfectly except for any event where the user refreshes the browser, which causes my rootscope session to obviously get wiped.

So I was considering storing session information in the browser local storage (using store.js) then even on the initial load I could check for the session existing in the browser local storage and bypass the OAuth login if there was already a session.

Is it bad practice or is there some logistical/security problems with storing user session information in the browser local storage?

This app doesn't have any senstive data, sign up is free and logging in is really only there so I can track users and store data created in the application for each user. And the user session would never have a password (I only allow OAuth login no local option).

Answer 1

Instead of the localStorage, look at sessionStorage object: http://www.w3schools.com/html/html5_webstorage.asp

It works exactly like localStorage, but the whole sessionStorage object will be deleted when the browser window is closed - but will survive any page refreshes. It is an ideal place for storing session ids and alike.

But be warned that the sessionStorage is isolated within a browser tab - that means if your user choses to open a link in a new tab, the sessionStorage for that will be initialized empty.