CODEWITHSUNDEEP
javascriptfirebasevue.jsvuex
Saaransh Menon
Saaransh Menon

Reputation: 416

Cannot read property 'email' of undefined; firebase auth(); using Vuex

I am using vuex to store the logged in users email but when I try to commit the mutation which stores this email to a state object it throws this error Cannot read property 'email' of undefined.

//this is my action

    const actions = {
      login({ commit }, context, payload) {
        firebase
          .auth()
          .signInWithEmailAndPassword(payload.email, payload.password)
          .then(user => {
            let payloadUserEmail = user.user.email;
            console.log(payloadUserEmail);
            commit("SET_USER", payloadUserEmail);
          });
      }
    };

//this is my mutation

const mutations = {
  SET_USER(state, email) {
    state.userLoggedEmail = email;
    state.isLoggedIn = true;
  }
};


//this is my state

const state = {
  userLoggedEmail: "",
  isLoggedIn: false
};

I always gives me this error when I try to commit the logged in user to state but when I console.log it out it shows.

//this is my login component 
<template>
  <div class="container-fluid">
    <div class="row">
      <div class=" col-sm-10 col-md-6 col-lg-4 mx-auto mt-4">
        <div class="card">
          <div class="card-header bg-dark">
            <span style="font-weight: bold; opacity: 1; color: white;"
              >Login</span
            >
          </div>
          <div class="card-body">
            <div class="form-group">
              <label>Email</label>
              <input
                type="email"
                class="form-control"
                id="newStockName"
                placeholder="Enter Email"
                v-model="user.email"
              />
            </div>
            <div class="form-group">
              <label>Password</label>
              <input
                type="password"
                class="form-control"
                id="newStockPrice"
                placeholder="Enter Password"
                v-model="user.password"
              />
            </div>
            <button
              type="submit"
              class="btn btn-primary btn-success btn-block"
              @click="emailLogin()"
            >
              Login
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapActions } from "vuex";

export default {
  data() {
    return {
      user: {
        email: "",
        password: ""
      }
    };
  },
  name: "Login",
  methods: {
    emailLogin() {
      this.$store.dispatch("auth/login", {
        email: this.user.email,
        password: this.user.password
      });
    }
  }
};
</script>

This is what the error message shows it has two errors:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'email' of undefined"

found in

---> <Login> at src/components/authentication/Login.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'email' of undefined
    at Store.login (auth.js?c7d4:17)
    at Array.wrappedActionHandler (vuex.esm.js?2f62:847)
    at Store.dispatch (vuex.esm.js?2f62:512)
    at Store.boundDispatch [as dispatch] (vuex.esm.js?2f62:402)
    at VueComponent.emailLogin (Login.vue?7463:61)
    at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"19ca99f4-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/authentication/Login.vue?vue&type=template&id=566f7c02&scoped=true& (app.js:1022), <anonymous>:77:32)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

Upvotes: 0

Views: 667

Answers (1)

Raffobaffo
Raffobaffo

Reputation: 2856

The problem is here

  login({ commit }, context, payload) {

you are passing just one argument but in the signature you put 3. Change it to

  login({ commit }, payload) {

Hope this helps!

Upvotes: 2

Related Questions