How to persist to both localStorage and sessionStorage at the same time using redux-persist?

Question

I'm implementing a login form using react, redux and redux-persist. Login API is ready from back-end team. The form has a "remember me" checkbox and I want to persist JWT auth token from login response.

What I think is the right way to implement "remember me" is this:

• If "remember me" is not checked, token should be persisted to sessionStorage. So that when browser is closed, user should login again but does not need login on switching tab or refreshing current page.
• If it is checked, token should be persisted to localStorage. User is still logged in even if the browser is closed.

Now I know from our back-end perspective there is only token expiration time.

My first question is if my client side view and approach is correct or not.

If it is, how can I update my persist config based on login "remember me" checkbox?

My current store.js is this:

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth'],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);

const persistor = persistStore(store);

export {
  store, persistor
};

And it is used here:

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'js/containers/App';
import { store, persistor } from './store';

const render = Component => {
  ReactDOM.render(
    <Component store={store} persistor={persistor}/>,
    document.getElementById('root')
  )
};

render(App);

if (module.hot) {
  module.hot.accept('js/containers/App', () => {
    const NextApp = require('js/containers/App').default;
    render(NextApp);
  });
}

I want to change persistConfig based on login form and use sessionStorage instead of localStorage but it's like store structure is formed here and there is no way to change it in app.

Any idea how to implement this?

Answer 1

I don't think you can change storage after creating but you can have 2 sub-tree on different storages. So tick/untick "remember me" will save in different trees and make a function to get the token from both sources.

to create sub-tree on difference storage see this https://github.com/rt2zz/redux-persist#nested-persists

Edit Adding sample for clarity.

import { combineReducers } from 'redux'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import storageSession from 'redux-persist/lib/storage/session'

const rootPersistConfig = { key: 'root', storage, whitelist: ['cart','user'] }; 
const authPersistConfig = { key: 'user', storage:storageSession }; // This is to session storage
const rootReducer = combineReducers({ 
                user: persistReducer(authPersistConfig,userReducer), // user subtree saved in session storage
                cart: cartReducer, 
                directory: directoryReducer, 
                shop: shopReducer }); 
                
export default persistReducer(rootPersistConfig, rootReducer);