10

Although not being exactly sure if this is a react specific question:

We are developing and application using react/redux stack with server side rendering. After user logs in we receive two cookies one for identity and one for session in the browser (with an expiration date). The problem is when the user refreshes the page the state is getting reset and we lose our session information ( we basically set some variables in the state to indicate the user is logged in ).

The question is how to manage this situation and keep the user logged in even when the page is refreshed. I am thinking of keeping server side rendering completely out of the picture and just check on the client side for a non-expired session id cookie when the page is initially rendered and set some variables in the state if the session is still alive, and vice-versa otherwise.

Does this look like a secure approach? Is there a better way to do it?

ralzaul
  • 4,280
  • 6
  • 32
  • 51

1 Answers1

5

I had a similar problem. I don't see anything wrong personally with checking the cookies and re-registering on the UI the session if you can. The server is still being guarded by the proper cookies.

In my case however I wasn't able to check the cookies via JS, as they were set as http-only. In the end I had to go for the following solution:

When the user first logs in successfully create a 'sessionStorage' instance to indicate that there is an active session:

window.sessionStorage.setItem(sessionKey, stringifiedUserToken);

If the page gets refreshed then check for this session item and re-register the active session: 

const activeSession = window.sessionStorage.getItem(sessionKey);
if (activeSession) {
  // fire register user session action
}

If the user logs out then kill the session storage token.

All the server interaction still requires the cookie which will be passed along, so this is purely a front-end concern.

Session storage will clear at the end of the browser session, so this naive approach may not work for "permanent" sessions. It does have great browser support though: http://caniuse.com/#search=sessionStorage

ctrlplusb
  • 12,847
  • 6
  • 55
  • 57
  • that actually might work but setting the session in window bothers me a bit. Are you aware of the local storage library. https://github.com/bevacqua/local-storage – ralzaul May 31 '16 at 13:07
  • Session storage is a "native" feature of browsers. You simply access it via the `window.` attachment. :) Yep, local storage and session storage to my knowledge essentially work the same way, except that session storage is flushed between browser sessions. I had to go for session storage as there was no way for me to know if a user session stored in local session is actually still active if the user closed and reopened their browser. This is because I couldn't access cookies to verify. With my session storage I had login/logout hooks so I felt safe there. – ctrlplusb May 31 '16 at 14:57
  • p.s. you access localstorage via `window.locationStorage` too... :) – ctrlplusb May 31 '16 at 14:58
  • Ah ok I did not know that it is essentially window itself. Yep this solution makes sense. Because of the same reason my cookie is not readable from JS - httponly. I think I will give this a shot. – ralzaul May 31 '16 at 14:58
  • Nice one. Good luck. As I said, the above solution is working for me, so at least its something to have for now. :) – ctrlplusb May 31 '16 at 14:59