Summer Sale! All accounts are 50% off this week.

Moseskamau338's avatar

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.

0 likes
0 replies

Please or to participate in this conversation.