How to encrypt sessionStorage using vuex-persistedstate?

[SuiKaSan]

• vuex-persistedstate version: 4.0.0
• node version: 14.17.0
• npm (or yarn) version: 6.14.13
• secure-ls version:1.2.6
• vue version: 3.0.0
• vuex version: 4.0.0

Relevant code or config

import { createStore, Store } from 'vuex';
import { State } from 'vue'
import user, { IUserInfoState } from './modules/user';
import global, { IGlobalState } from './modules/global';
import SecureLS from 'secure-ls'
import createPersistedState from 'vuex-persistedstate'

declare module '@vue/runtime-core' {
  interface State {
    user: IUserInfoState;
    global: IGlobalState;
  }
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

const ls = new SecureLS({ isCompression: false })
window.sessionStorage.getItem = (key) => ls.get(key) 
window.sessionStorage.setItem = (key, value) => ls.set(key, value)
window.sessionStorage.removeItem = (key) => ls.remove(key)

export default createStore<State>({
  modules: {
    user,
    global,
  },
  plugins: [
    createPersistedState({ storage: window.sessionStorage })
  ]
});

I want to encrypt the sessionStorage using secure-ls. But with the code above, the secure-ls only encrypted the localStorage. I already issued this problem in the repository of vue-persistedstate. But they said this is scure-ls's issue. Anyone knows why? Please do tell.

[derHodrig]

import createPersistedState from 'vuex-persistedstate'
import SecureLS from 'secure-ls'
const ls = new SecureLS({
  encodingType: 'rc4', // changeable
  isCompression: false,
  encryptionSecret: 's3cr3tPa$$w0rd@123', // change this
})

export default ({ store, req }) => {
  createPersistedState({
    key: 'TheGreatStore',
    paths: [
      'userStore.user', // Im using modules mode of vuex
    ],
    storage: {
      getItem: (key) => ls.get(key),
      setItem: (key, value) => ls.set(key, value),
      removeItem: (key) => ls.remove(key),
    },
  })(store)
}

This is working in Nuxt Js at v2.15.3 with target static and SSR.

Important for Nuxters, fetch() won't have the data from localstorage. You need to do something like that

created() {
    this.loading = true
  },
  beforeMount() {
    this.$store.dispatch('fetchCoreDataAsync').then(() => {
      this.someOtherMethodDependingOnLocalStorageItems()
      this.loading = false
    })
  },

[softvar]

Hey @SuiKaSan ,

I refactored the code & tests have published a new version 2.0.0
The latest version has support for sessionStorage as well as any kind of custom storage.

You can refer this - https://github.com/softvar/secure-ls?tab=readme-ov-file#api-documentation

• Any other storage apart from localStorage

  • Using sessionStorage

    const ls = new SecureLS({ encodingType: 'aes', isCompression: true, storage: sessionStorage });

• Using any storage having the same methods as localStorage/sessionStorage

window.customSecureLsStore = {};
const storage = {
  setItem: (key, value) => {
    window.customSecureLsStore[key] = value || '';
  },
  getItem: (key) => {
    return window.customSecureLsStore[key] || null;
  },
  removeItem: (key) => {
    delete window.customSecureLsStore[key];
  },
  clear: () => {
    window.customSecureLsStore = {};
  },
};

const ls = new SecureLS({ encodingType: 'aes', isCompression: true, storage: storage });

I hope you will be glad to know this 🙌