DEV Community

Discussion on: Using Vue Composition API with Firebase

Collapse
aaronksaunders profile image
Aaron K Saunders Author

you really don't need to call onAuthStateChanged since firebase has the current user persisted. I was investigating using overmindjs or vuex to actually manage the state in combination with the composition api

Collapse
razbakov profile image
Aleksey Razbakov • Edited

I mean in your use/auth.js

export default function() {
  // our reactive properties...
  let state = reactive({
    user: null,
    loading: true,
    error: null
  });

  // make the firebase call to listen for change in auth state,
  // we have set initial loading status to true so nothing happens on UI 
  // side until loading is set to false
  firebase.auth().onAuthStateChanged(_user => {
    if (_user) {
      state.user = _user;
    } else {
      state.user = null;
    }
    state.loading = false;
  });

  // return all of the properties from the function
  return {
    ...toRefs(state)
  };
}

Every time you call const { user } = useAuth() in one of your components it will execute this part:
firebase.auth().onAuthStateChanged....

What if you need to access user in multiple components?

Btw, have you checked my implementation?