Creating a Twitter Clone Part 2: The Navigation Bar

One of the most important aspects of a social media app is being able to see your user info. In the case that you have multiple accounts, you want to be able to look up and see who you’re logged in as in the navigation bar.

I wrote this post so that you could see what it looks like to create user profile info from Firebase and display the user info as {{variables}} in Vue.js.

Take note of the fact that your user’s “name” variable (AKA the profile handle) has to be created differently from the other profile info on line 82.

Instead of being part of Firebase’s currentUser properties, you actually have to extract it from the “profiles” collection that you set up in the Firestore database by displaying the info in the doc, grabbing it, and setting it equal to your “name” variable.

It took me a while to figure that out, so I thought I’d share it with you to save you the headache. My next task is to grab this name from the navigation bar, and apply it to each user’s posts.

Sounds like it would be simple, but it’s turning out to be more complicated than I thought, just like most other things in coding. See the sample code below for details:

<template>
<nav>
<div class="nav-wrapper teal">
<div class="container">
<router-link to="/" class="brand-logo">It's Lit! 🔥</router-link>
<div v-bind:value="userID">
</div>
<ul class="right">
<li v-if="isLoggedIn" >
<span class="email black-text" >
@{{name}} – ({{currentEmail}}{{currentDisplay}})
</span>
<div>
</div>
</li>
<li v-if="isLoggedIn">
<router-link to="/profile">Profile</router-link>
</li>
<li v-if="isLoggedIn">
<router-link to="/">Home</router-link>
</li>
<li v-if="!isLoggedIn">
<router-link to="/login">Login</router-link>
</li>
<li v-if="!isLoggedIn">
<router-link to="/register">Register</router-link>
</li>
<li v-if="isLoggedIn">
<button class="btn black" v-on:click="logout">Logout</button>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
import Login from "./Login";
import db from "./firebaseInit";
import 'firebase/firestore'
import firebase from "firebase/app";
import username from "./Login";
import employees from "./employeeList"
import "firebase/auth";
export default {
name: "navbar",
props: {
},
components: {},
data() {
return {
isLoggedIn: false,
currentEmail: false,
currentDisplay: false,
currentHandle: "",
name: false
};
},
firestore() {
const user = firebase.auth().currentUser;
return{
profile: db.collection('profiles').doc(user.uid)
}
},
created() {
if (firebase.auth().currentUser) {
this.isLoggedIn = true;
this.currentEmail = firebase.auth().currentUser.email;
this.currentDisplay = firebase.auth().currentUser.displayName;
this.userID = firebase.auth().currentUser.uid;
db.collection('profiles').doc(firebase.auth().currentUser.uid).get().then(doc => {
this.name = doc.data().name
})
}
},
methods: {
logout: function() {
firebase
.auth()
.signOut()
.then(() => {
this.$router.go({ path: this.$router.path });
});
}
}
};
</script>
<style scoped>
.email {
padding-right: 0px;
}
</style>
view raw navbar.vue hosted with ❤ by GitHub

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s