I've been diving into a Vue.js project that allows users to sign up and log in. I've incorporated Firebase Authentication for the login and sign up functionality. Successfully, I've implemented the feature where the navbar state changes: when the user is logged out, two buttons are displayed - one for login and the other for sign up. Once the user signs in, these buttons are replaced with the user's name and the option to sign out. The issue arises with the sign up option: after submitting the form, the navbar state alters and shows the sign out option, but the username is not displayed. I want to either display the user's name along with the sign out button or prevent the application from automatically logging in after sign up. Is there a way to achieve this?
Sign up form script:
import firebase from "firebase";
export default {
name: 'Sign-Up',
components: {
},
data() {
return {
form: {
errors: [],
name: "",
email: "",
username: "",
password: ""
},
error: null
};
},
methods: {
submit() {
firebase
.auth()
.createUserWithEmailAndPassword(this.form.email, this.form.password)
.then(data => {
data.user
.updateProfile({
displayName: this.form.name
})
.then(() => {})
.then(this.$router.replace({ name: "Profile" }))
})
.catch(err => {
this.error = err.message;
});
}
}
}
Navbar
<template v-if="user.loggedIn">
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li style="margin-top: 0.5em;"><router-link to="/Dashboard" class="nav-link px-2">Hello, {{user.data.displayName}}</router-link></li>
<li><a href="#" class="nav-link px-2" @click.prevent="signOut"><button type="button" class="btn poke-secondary me-2">Sign out</button></a></li>
</ul>
</template>
<template v-else>
<div class="col-md-3 text-end px-2">
<router-link to="/login"><button type="button" class="btn poke-secondary me-2">Login</button></router-link>
<router-link to="/signup"><button type="button" class="btn poke-secondary">Sign Up</button></router-link>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import firebase from "firebase/app";
export default {
name: "Header",
computed: {
...mapGetters({
user: "user"
})
},
methods: {
signOut() {
firebase
.auth()
.signOut()
.then(() => {
this.$router.replace({
name: "Home"
});
});
}
}
};
</script>
store.js:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: {
loggedIn: false,
data: null
}
},
getters: {
user(state){
return state.user
}
},
mutations: {
SET_LOGGED_IN(state, value) {
state.user.loggedIn = value;
},
SET_USER(state, data) {
state.user.data = data;
}
},
actions: {
fetchUser({ commit }, user) {
commit("SET_LOGGED_IN", user !== null);
if (user) {
commit("SET_USER", {
displayName: user.displayName,
email: user.email
});
} else {
commit("SET_USER", null);
}
}
}
});