firebase auth and vuetify working

package.json

@@ -16,13 +16,17 @@
     "core-js": "^3.6.4",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
-    "firebase": "^9.1.3",
+    "firebase": "^8.10.0",
     "firebaseui": "^5.0.0",
+    "node-sass": "^6.0.1",
     "nodemon": "^2.0.3",
+    "roboto-fontface": "^0.10.0",
     "three": "^0.133.1",
     "vue": "^2.6.11",
+    "vue-cli-plugin-vuetify": "^2.4.3",
     "vue-router": "^3.5.2",
     "vuetify": "^2.5.10",
+    "vuetify-loader": "^1.7.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
@@ -33,8 +37,8 @@
     "deepmerge": "^4.2.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.32.13",
-    "sass-loader": "^12.2.0",
+    "sass": "^1.43.3",
+    "sass-loader": "10.1.1",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/App.vue

@@ -1,19 +1,19 @@
 <template>
-  <div id="app">
+  <v-app id="app">
 
     <SiteNav></SiteNav>
-    <!-- <router-view/> -->
-    <HelloWorld />
-  </div>
+    <router-view/>
+    <!-- <HelloWorld /> -->
+  </v-app>
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+// import HelloWorld from "./components/HelloWorld.vue";
 import SiteNav from '@/components/SiteNav'
 export default {
   name: "App",
   components: {
-    HelloWorld,
+    // HelloWorld,
     SiteNav
   }
 };

src/components/SiteNav.vue

@@ -1,16 +1,112 @@
 <template>
-  <header>
-    <v-system-bar height="39">
-      <v-btn depressed >Login</v-btn>
+  <div>    
+    <v-system-bar height="60">
+      <div style="margin-left:auto">
+        <v-btn v-show="!userProfile" @click="showLoginOptions = !showLoginOptions" text>
+          Login
+        </v-btn>
+
+        <v-menu v-if="userProfile" open-on-hover offset-y>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn v-bind="attrs" v-on="on" icon>
+              <v-avatar color="red">
+                <span class="white--text text-h5">{{userProfile.displayName | getNameInitials}}</span>
+              </v-avatar>
+            </v-btn>
+          </template>
+
+          <v-list>
+            <v-list-item>
+              <v-list-item-title>
+                <a @click="signoutButtonPressed">Logout </a>                
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>      
     </v-system-bar>
-  </header>
+
+    <section v-show="showLoginOptions" id="firebaseui-auth-container" style="position: absolute;right: 0;top:0;text-align: center;margin-top:40px"></section>  
+
+  </div> 
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import firebase from 'firebase/app';
+import { auth } from '../firebase';
+
 export default {
+  data() {
+    return {
+      showLoginOptions: false,
+    };
+  },
+  mounted() {
+    console.log("userProfile", this.userProfile);
+    // var ui = new firebaseui.auth.AuthUI(firebase.auth());
+    var uiConfig = {
+        signInSuccessUrl: "/profile",
+        signInOptions: [
+          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+          // {
+          //   provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
+          //   signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
+          //   // Allow the user the ability to complete sign-in cross device,
+          //   // including the mobile apps specified in the ActionCodeSettings
+          //   // object below.
+          //   forceSameDevice: false,
+          //   // Used to define the optional firebase.auth.ActionCodeSettings if
+          //   // additional state needs to be passed along request and whether to open
+          //   // the link in a mobile app if it is installed.
+          //   emailLinkSignIn: function() {
+          //     return {
+          //       // Additional state showPromo=1234 can be retrieved from URL on
+          //       // sign-in completion in signInSuccess callback by checking
+          //       // window.location.href.
+          //       url: 'https://thread.thorntontomasetti.com/',
+          //       // Custom FDL domain.
+          //       dynamicLinkDomain: 'example.page.link',
+          //       // Always true for email link sign-in.
+          //       handleCodeInApp: true,
+          //       // Whether to handle link in iOS app if installed.
+          //       iOS: {
+          //         bundleId: 'com.example.ios'
+          //       },
+          //       // Whether to handle link in Android app if opened in an Android
+          //       // device.
+          //       android: {
+          //         packageName: 'com.example.android',
+          //         installApp: true,
+          //         minimumVersion: '12'
+          //       }
+          //     };
+          //   }
+          // }
+        ]
+    };
+    this.loginUI.start("#firebaseui-auth-container", uiConfig);    
+  },
+  computed: {      
+    ...mapState(['userProfile', 'loginUI'])
+  },
   methods: {
-    logout() {
-      this.$store.dispatch('logout')
+    signoutButtonPressed(e) {
+      console.log("this.auth", auth)
+
+      firebase.auth().signOut().then(() => {
+        // Sign-out successful.
+        console.log("Sign-out successful");
+        this.$store.commit('setUserProfile', null)
+      }).catch((error) => {
+        // An error happened.
+      });
+    }
+  },
+  filters: {
+    getNameInitials: function (value) {
+      if (!value) return ''      
+      return value.split(" ").map(w => w[0].toUpperCase()).join("")
     }
   }
 }

src/firebase.js

@@ -1,6 +1,9 @@
-import { initializeApp } from 'firebase/app';
-import { getFirestore, collection, getDocs } from "firebase/firestore"
-import { getAuth } from "firebase/auth";
+import firebase from 'firebase/app';
+import fbAuth from 'firebase/auth'
+import 'firebase/firestore'
+var firebaseui = require('firebaseui');
+import "firebaseui/dist/firebaseui.css";
+
 
 // firebase init
 const firebaseConfig = {
@@ -13,30 +16,18 @@ const firebaseConfig = {
   appId: ''
 }
 
-const app = initializeApp(firebaseConfig)
+firebase.initializeApp(firebaseConfig);
 
 // utils
-const db = getFirestore(app);
-console.log("db", db);
-console.log("app", app);
-const auth = getAuth();
-// console.log("auth", auth);
-
-// collection references
-
-
-const usersCollection = getDocs(collection(db, "users"));
-// const usersCollection = db.collection('users')
-// const postsCollection = db.collection('posts')
-// const commentsCollection = db.collection('comments')
-// const likesCollection = db.collection('likes')
+const db = firebase.firestore()
+const auth = firebase.auth()
+var ui = new firebaseui.auth.AuthUI(firebase.auth());
+const usersCollection = db.collection('users')
 
 // export utils/refs
 export {
   db,
   auth,
   usersCollection,
-//   postsCollection,
-//   commentsCollection,
-//   likesCollection
+  ui
 }

src/main.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import App from "./App.vue";
-import vuetify from '@/plugins/vuetify' // path to vuetify export
+import vuetify from './plugins/vuetify' // path to vuetify export
 import router from './router'
 import store from './store'
 import { auth } from './firebase'
@@ -21,7 +21,7 @@ auth.onAuthStateChanged(user => {
     }).$mount('#app')
   }
 
-  if (user) {
-    store.dispatch('fetchUserProfile', user)
-  }
+  // if (user) {
+    store.commit('setUserProfile', user);
+  // }
 })

src/plugins/vuetify.js

@@ -1,12 +1,8 @@
 // src/plugins/vuetify.js
 
 import Vue from 'vue'
-import Vuetify from 'vuetify'
-// import Vuetify from 'vuetify/lib';
-import 'vuetify/dist/vuetify.min.css'
-
+import Vuetify from 'vuetify/lib';
+import 'roboto-fontface/css/roboto/roboto-fontface.css';
 Vue.use(Vuetify)
 
-const opts = {}
-
-export default new Vuetify(opts)
+export default new Vuetify({});

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Dashboard from '../views/Dashboard.vue'
+import HelloWorld from '../components/HelloWorld.vue'
 import Login from '../views/Login.vue'
 import { auth } from '../firebase'
 
@@ -9,8 +10,8 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
-    name: 'Dashboard',
-    component: Dashboard,
+    name: 'HelloWorld',
+    component: HelloWorld,
     meta: {
       requiresAuth: true
     }
@@ -33,7 +34,8 @@ router.beforeEach((to, from, next) => {
   const requiresAuth = to.matched.some(x => x.meta.requiresAuth)
 
   if (requiresAuth && !auth.currentUser) {
-    next('/login')
+    // next('/login')
+    next()
   } else {
     next()
   }

src/store/index.js

@@ -7,69 +7,16 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
     state: {
-      userProfile: {},
+      userProfile: null,
+      loginUI: fb.ui,
+      fbAuth: fb.auth
     },
     mutations: {
       setUserProfile(state, val) {
         state.userProfile = val
       }
     },
-    actions: {
-      async login({ dispatch }, form) {
-        // sign user in
-        const { user } = await fb.auth.signInWithEmailAndPassword(form.email, form.password)
-
-        // fetch user profile and set in state
-        dispatch('fetchUserProfile', user)
-      },
-      async signup({ dispatch }, form) {
-        // sign user up
-        const { user } = await fb.auth.createUserWithEmailAndPassword(form.email, form.password)
-
-        // create user object in userCollections
-        await fb.usersCollection.doc(user.uid).set({
-          name: form.name,
-          title: form.title
-        })
-
-        // fetch user profile and set in state
-        dispatch('fetchUserProfile', user)
-      },
-      async fetchUserProfile({ commit }, user) {
-        // fetch user profile
-        const userProfile = await fb.usersCollection.doc(user.uid).get()
-
-        // set user profile in state
-        commit('setUserProfile', userProfile.data())
-
-        // change route to dashboard
-        if (router.currentRoute.path === '/login') {
-          router.push('/')
-        }
-      },
-      async logout({ commit }) {
-        // log user out
-        await fb.auth.signOut()
-
-        // clear user data from state
-        commit('setUserProfile', {})
-
-        // redirect to login view
-        router.push('/login')
-      },
-      async updateProfile({ dispatch }, user) {
-        const userId = fb.auth.currentUser.uid
-        // update user object
-        // const userRef = await fb.usersCollection.doc(userId).update({
-        //   name: user.name,
-        //   title: user.title
-        // })
-
-        dispatch('fetchUserProfile', { uid: userId })
-
-
-
-      }
+    actions: {  
     }
   })