title: How to use firebase auth in Vue
body: <p>My problem is that since the onAuthStateChanged runs after mounting componentm, the router push doesn't work. </p>
  
  <p>First, I made onAuthStateChanged at store.js of vuex.</p>
  
  <pre><code>// ./src/vuex/store.js
  
  import { firebaseAuth } from "../firebase/firebaseAuth";
  
  Vue.use(Vuex);
  
  firebaseAuth.onAuthStateChanged(user =&gt; {
    if (user) {
      console.log(user);
      state.user = user;
    } else {
      state.user = null;
    }
  });
  
  const state = {
    user: null
  };
  </code></pre>
  
  <p><bR>
  Second, when I sign in at the sign in component. The router push in the signIn() works well. And after that, when I click signin, it doesn't allow me to access '/signin' due to that 'beforeCreate()' block about acessing. <bR></p>
  
  <pre><code>&lt;script&gt;
  import { firebaseAuth } from "../firebase/firebaseAuth";
  import { mapGetters } from "vuex";
  
  export default {
    name: "sighin",
    beforeCreate() {
      console.log(this.$store.state.user);
      if (this.$store.state.user) {
        this.$router.push("/");
      }
    },
    data() {
      return {
        email: "",
        password: ""
      };
    },
    computed: {
      ...mapGetters({ user: "getUser" })
    },
    methods: {
      signIn() {
        firebaseAuth.signInWithEmailAndPassword(this.email, this.password).then(
          user =&gt; {
            this.$router.push("/");
          },
          err =&gt; {
            alert("Oops. " + err.message);
          }
        );
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>But the problem occurs now. When I access '/signin' url directly at the browser using reload, beforeCreate of signin Component works, after that, onAuthStateChanged runs. Thus, this.router.push of signin doesn't work. How can I solve this problem? THank you so much for reading  my question.  </p>