Persisting State Securely In Session Store

In my frontend projects, I normally use oauth2 implemented internally by my backend team. The only problem with this authentication solution is the fact that every time our user was hitting the refresh button, the authentication mechanism was being fired again and all the user’s basic information that is normally shared among our containers was being reloaded.

To avoid this problem, I started thinking about a more persistent solution using the browser’s local storage. However, one of my main concerns was the fact that this information should be only accessible to my own code.

Since I would have to rely on the browser to implement all the security aspects to avoid other scripts from having access to this data, I decided to try a fast and simple encryption. Luckily, I was able to find a simple library called Stanford Javascript Crypto Library (). The result of my work is the following small and simple module (the recover function receives a react-redux state as a parameter and returns a new state).

SJCL is open. You can use, modify and redistribute it under a BSD license or under the GNU GPL, version 2.0 or higher.

One of the positive aspects of using the browser’s session store is the fact that this information will be kept until the user closes the current window.

Here is the Mozilla’s documentation about Session Storage:

The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage; the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated with the value of the top-level browsing context, which differs from how session cookies work.

I hope this will be helpful to someone else.