Error: [vuex] Do not mutate vuex store state outside mutation handlers with Firebase Auth Object

Question

I have been trying to solve this problem for a few hours now to no avail. Could someone help me spot the problem?

The error I am getting is: Error: [vuex] Do not mutate vuex store state outside mutation handlers

Here is my login script section with the offending function in login()

<script>
import { auth, firestoreDB } from "@/firebase/init.js";
export default {
  name: "login",
  props: {
    source: String
  },
  ////////
  layout: "login",
  data() {
    return {
      show1: false,
      password: "",
      rules: {
        required: value => !!value || "Required.",
        min: v => v.length >= 8 || "Min 8 characters",
        emailMatch: () => "The email and password you entered don't match"
      },
      email: null,
      feedback: null
    };
  },

  methods: {
    login() {
      if (this.email && this.password) {
        auth
          .signInWithEmailAndPassword(this.email, this.password)
          .then(cred => {
            //this.$router.push("/");
            this.$store.dispatch("user/login", cred);
            console.log()
            this.$router.push("/forms")
            console.log("DONE")
          })
          .catch(err => {
            this.feedback = err.message;
          });
      } else {
        this.feedback = "Please fill in both fields";
      }

    },

    signup() {
      this.$router.push("signup");
    }
  }
};
</script>

import { auth, firestoreDB } from "@/firebase/init.js";

export const state = () => ({
    profile: null,
    credentials: null,
    userID: null
})

export const getters = {
    getinfo:(state) =>{
        return state.credentials
    },
    isAuthenticated:(state)=>{
        if (state.credentials != null) {
            return true
        } else {
            return false
        }
    }
}

export const mutations = {
    commitCredentials(state, credentials) {
        state.credentials = credentials
    },
    commitProfile(state, profile) {
        state.profile = profile
    },
    logout(state){
        state.credentials = null,
        state.profile = null
    }
}

export const actions = {

    login({commit},credentials) {

        return firestoreDB.collection("Users").where('email', '==', auth.currentUser.email).get()
            .then(snapshot => {
                snapshot.forEach(doc => {
                    let profile = {...doc.data()}
                    commit("commitCredentials", credentials)
                    commit("commitProfile", profile)

                })
            }).catch((e) => {
                console.log(e)
            })
    },
    credentials({ commit }, credentials) {
        commit("commitCredentials",credentials)
    },

    logout() {
        commit("logout")
    },


}

I have checked that there is no where else that is directly calling the store state. I have worked out that if I don't do the commitCredentials mutation which mutates credentials, the problem doesn't happen. Another note to add, the error keeps printing to console as if it were on a for loop. So my console is flooded with this same message. I am pretty sure this is to do with the firebase auth sign in and how the Credential object is being changed by it without me knowing, but I can't seem to narrow it down.

Any help would be very much welcomed.

Answer 1

Found the answer.

https://firebase.nuxtjs.org/guide/options/#auth

signInWithEmailAndPassword(this.email, this.password).then(cred)

"Do not save authUser directly to the store, since this will save an object reference to the state which gets directly updated by Firebase Auth periodically and therefore throws a vuex error if strict.= false."

Credential object is constantly being changed by the firebase library and passing the credential object is just passing a reference not the actual values itself.

The solution is to just save the values within the object.