Redux Keep Session

Question

Redux's state goes away after a refresh. I was keeping a userToken object inside the global user object. But since session should persist after a refresh, I assume there's a better place where I store the token.

What's the conventional way for redux to manage sessions? And in this case, where should I keep the token?

score 4 · Answer 1 · answered Apr 25 '16 at 05:59

4

Previous answered suggested to use localStorage to keep your tokens, but I'd advise against localStorage as a reliable store.

There's multiples cases making localStorage improper to store important data. Notably, there's a space quota and some browsers turn it off in private browsing.

As the token needs to accompany each logged request to the server, then really what you want is simply a cookie.

answered Apr 25 '16 at 05:59

Simon Boudrias

42,953
16
99
134

Inside the `user` reducer, I keep all the states related to the user (e.g. email, name, etc.). Is it okay to store all the info along with the `token` inside cookie? – Maximus S Apr 25 '16 at 06:07
well, there are a lot of people who would choose localStorage over cookies, check http://stackoverflow.com/questions/3220660/local-storage-vs-cookies or https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/ – QoP Apr 25 '16 at 06:21
@QoP In that link, the accepted answer with more than 500 upvotes has the following statement: "You'll want to leave your session cookie as a cookie either way though." – Buzinas Apr 25 '16 at 15:09
@Buzinas I'm not sure if you have read the whole answer or just that line – QoP Apr 25 '16 at 15:17
@QoP Obviously I have read the whole answer, but that line is what I wanted to mention here. It doesn't depend on any context, it's meaninful, and it's important to know the difference between using localStorage and cookies. If you're doing server side rendering, for example, you MUST put your token inside a cookie, because that's the only way to send it in the first load. In fact, ideally, you should keep the token in a cookie, and all the other information, you would choose between retrieving from localStorage/sessionStorage/localDb or anything else that fits better for the specific case. – Buzinas Apr 25 '16 at 15:23
++ Authentication related information in cookies (because cookies are a request related data store), the rest in a proper data storage (local/session Storage, indexedDB, etc). @MaximusS remember cookies are sent with every requests, so it shouldn't store data that is not useful to authentication to reduce the amount of data sent over the wire for each requests. – Simon Boudrias Apr 25 '16 at 18:59

score 1 · Answer 2 · answered Apr 25 '16 at 05:54

You should keep the token in the local storage of the browser.

Add the token before you dispatch your logInSuccess action.

function parseUser(response,dispatch){
    localStorage.setItem("YOUR-APP-NAME", response.token);
    dispatch(logInSuccess(response.token));
}

Also, dont forget to add the token to your initial state of your auth reducer

const initialState = {
    ...
    token: localStorage["YOUR-APP-NAME"],
    ...
};

Redux Keep Session

2 Answers2