Use Vuex + SecureLS + Js cookie for multi-domain authentication
So I have this task where I need to implement the same authentication for multiple domains with Vuejs SPA. The first domain went well using SecureLS and Vuex. I say it went well because of the trauma I went through trying to work with Service workers!
Anyway, now I have to build a different front-end SPA, related to the first, in a way that if I log in to first.example.com and try to access second.example.com, I should not be required to authenticate.
After some research online, Secure, HTTP only, Same site cookies was the solution I found.
The dilemma
How do I make both Secure LS and JsCookie work for both subdomains given the setup below (I have a few things that need to be stored on local storage but the tokens need to be in the Cookie):
My Authentication UI triggers Vuex actions that send requests to the Auth Server and sets the necessary store values:
//store/auth/moduleAuthActions.js
import store from "@/store"
import FetchIo from '@core/libs/fetch' // custom Fetch API wrapper
login({ commit }, credentials) {
return new FetchIo('/auth/login/', false, 'login') //just send requests
.post(/*Credentials go here*/)
.then((data) => {
if (data && data.tokens){
commit('SET_TOKEN', data.tokens)
let {tokens, ...userData} = data
commit('SET_USER', userData)
}
return Promise.resolve(data)
})
.catch(error => {
return Promise.reject(error)
});
},
From the Vuex end:
import Vue from 'vue'
import Vuex from 'vuex'
// Modules
//...
import moduleAuth from "@/store/auth/moduleAuth"
import createPersistedState from "vuex-persistedstate";
import SecureLS from "secure-ls";
let ls = new SecureLS({
encodingType: "aes",
isCompression: false,
encryptionSecret: process.env.VUE_APP_STR_PWD
});
Vue.use(Vuex)
export default new Vuex.Store({
plugins:[
createPersistedState({
key: 'EG',
storage: {
getItem: (key) => ls.get(key),
setItem: (key, value) => ls.set(key, value),
removeItem: (key) => ls.remove(key),
},
}),
],
modules: {
//...
auth: moduleAuth
},
strict: process.env.DEV,
})
Your views will be highly appreciated. Thanks.
Please or to participate in this conversation.