Is Redux a secure place to store JWT tokens?

Question

I've been teaching myself Redux, wondering how secure it is to store JWT tokens in a state of Redux.

For example, here is a reducer which is responsible for setting and resetting a token.

export default function loginReducer(state = {
    token: "",
}, action) {
switch (action.type) {
    case "SET_TOKEN":
        {
            return {
                ...state,
                token: action.data,
            }
            break;
        }
    //other cases here
    return state
}

Then, you can store a token in the following way.

handleSubmit(values) {
    //Calling an API
    }).then((response) => {
        response.json().then((jsonReponse) => {         
         //This is where the token is stored!
         this.props.dispatch(loginAction.setToken(jsonReponse.token));
        });
    });
}

The main purpose of using Redux is to organise states in one place, so I thought it would be reasonable to maintain tokens there.

However, I haven't found a good information resource which explains how secure/vulnerable it is to do so.

(I found several posts as to localStorage vs Cookies. Apparently Cookies would be a secure place for storing tokens, as far as I've researched)

Any advice will be appreciated!

Answer 1

Redux stores the state in JavaScript object. This makes it vulnerable to an XSS attack just like localStorage or sessionStorage. If you need your JWT be readable on the client side you can freely use Redux, just be sure you take care of XSS properly. If the JWT is not required on the client side, better leave it in httpOnly cookie and handle CSRF instead.