New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using vuefire with Auth (getting currentUser) #59
Comments
I guess an alternative could be this: firebase(){
const userId = firebase.auth().currentUser.uid
return {
students: db.ref('users')
.child(userId)
.child('students')
}
} |
About the Uncaught error, that's normal, the code gets executed before the component is actually used. Using the function syntax, as you pointed out is the way to go. About the user authentication, I'd personally not wait until the user is authenticated but rather use a different view to auth. That'd create a better UX and faster load time, but your approach is perfectly fine too. |
@posva Thanks, do you have an example of using a dedicated view to authenticate? The reason why I used this approach is because I don't want users to log in every time they refresh the page |
Sorry, I don't 😕 |
I am using following approach with App.vue (wrapper component of whole application): <template>
<!-- router-view wont be rendered unless user is either authenticated or not -->
<!-- you can display loader here for example -->
<router-view v-if="user !== null" />
</template>
<script>
import Firebase from 'firebase';
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['user']),
},
beforeCreate () {
Firebase.auth().onAuthStateChanged((user) => {
// initially user = null, after auth it will be either <fb_user> or false
this.$store.commit('setUser', user || false);
if (user && this.$route.path === '/login') {
this.$router.replace('/');
} else if (!user && this.$route.path !== '/login') {
this.$router.replace('/login');
}
});
},
};
</script> store.js: import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: null,
},
mutations: {
setUser (state, value) {
state.user = value;
},
},
}); SomeComponent.vue <template><div>{{ user.email }}</div></template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['user']),
},
}
</script> |
@alekbarszczewski why are you using mutations instead of actions in this example? specifically: this.$store.commit('setUser', user || false); |
@mdmullins It's probably specific to your app so you should ask on the forum. |
@mdmullins Action is not required here because setUser does not do any asynchronous stuff - it simply sets user object in state. But you could wrap it in action if you want. |
I've been looking at #18, #47 and #48, but I'm still confused about the best way to deal with authentication using vuefire.
On my
main.js
I'm using woodberry's approach and calling theunsubscribe
function after authentication:My understanding is that by using this pattern, we delay the creating of the Vue instance until Firebase authenticates the user.
On my
routes.js
I usebeforeEnter
navigation guards to ensure that the user is authenticated:Then on my
StudentIndex.vue
component, I access the firebase database reference/users/${uid}/students
, but when I load thehttp://mydomain.com/students
URL, I get an error:However, if I create the reference manually using
$bindAsArray
in thecreated
hook, it works:Is this to be expected or am I missing something?
The thought of having to define my firebase references differently depending on whether the path includes the user id or not seems a little weird, so I'm sure I must be missing something.
The text was updated successfully, but these errors were encountered: