Firebase initial version (needs server fixes)

frontend/package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.8.3",
     "export-to-csv": "^0.2.1",
     "file-saver": "^2.0.5",
+    "firebaseui": "^6.0.2",
     "leaflet": "^1.8.0",
     "tokml": "^0.4.0",
     "vue": "^2.6.14",

frontend/src/App.vue

@@ -7,8 +7,14 @@
         ></v-toolbar-title
       >
       <v-spacer />
-      <google-login />
+      <span class="user" v-if="user">
+        {{ user.email }}
+      </span>
+      <v-btn v-if="user" href="#" @click="$store.dispatch('signout')"
+        >Sign Out</v-btn
+      >
     </v-app-bar>
+    <FirebaseLogin v-if="!user" />
     <router-view></router-view>
     <v-footer class="legal">
       <router-link to="/privacy">Privacy Policy</router-link>
@@ -18,16 +24,21 @@
 </template>
 
 <script>
-import GoogleLogin from "./components/GoogleLogin.vue";
+import FirebaseLogin from "./components/FirebaseLogin.vue";
 
 export default {
   name: "App",
   components: {
-    GoogleLogin,
+    FirebaseLogin,
   },
   mounted() {
     this.$store.dispatch("getKeys");
   },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    },
+  },
 };
 </script>
 
@@ -50,4 +61,8 @@ body {
   color: inherit !important;
   text-decoration: none !important;
 }
+
+.user {
+  margin-right: 1em;
+}
 </style>

frontend/src/components/FirebaseLogin.vue

@@ -0,0 +1,42 @@
+<template>
+  <section id="firebaseui-auth-container"></section>
+</template>
+
+<script>
+import firebase from "firebase/compat/app";
+import * as firebaseui from "firebaseui";
+import "firebaseui/dist/firebaseui.css";
+import "firebase/compat/auth";
+import { firebaseConfig } from "@/firebase.js";
+
+export default {
+  name: "FirebaseLogin",
+  mounted() {
+    firebase.initializeApp(firebaseConfig);
+
+    let ui = firebaseui.auth.AuthUI.getInstance();
+    if (!ui) {
+      ui = new firebaseui.auth.AuthUI(firebase.auth());
+    }
+
+    let uiConfig = {
+      signInOptions: [
+        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+        firebase.auth.EmailAuthProvider.PROVIDER_ID,
+      ],
+    };
+
+    firebase.auth().onAuthStateChanged((user) => {
+      this.$store.commit("setUser", user);
+    });
+
+    ui.start("#firebaseui-auth-container", uiConfig);
+  },
+};
+</script>
+
+<style>
+#firebaseui-auth-container {
+  margin-top: 1em;
+}
+</style>

frontend/src/firebase.js

@@ -0,0 +1,20 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBN5oJ8c_VGhcfesAxXPVmuVnJ_V5MM8JM",
+  authDomain: "osm-search-364115.firebaseapp.com",
+  projectId: "osm-search-364115",
+  storageBucket: "osm-search-364115.appspot.com",
+  messagingSenderId: "919009657823",
+  appId: "1:919009657823:web:f3be7f8470a6c36665ba6a",
+};
+
+const firebaseApp = initializeApp(firebaseConfig);
+
+const firebaseAuth = getAuth(firebaseApp);
+
+const firebaseFirestore = getFirestore(firebaseApp);
+
+export { firebaseApp, firebaseAuth, firebaseFirestore, firebaseConfig };

frontend/src/main.js

@@ -11,11 +11,6 @@ Vue.config.productionTip = false;
 new Vue({
   store,
   vuetify,
-
-  beforeCreate() {
-    this.$store.commit("initializeCredentials");
-  },
-
   router,
   render: (h) => h(App),
 }).$mount("#app");

frontend/src/router/index.js

@@ -13,20 +13,14 @@ const routes = [
   {
     path: "/privacy",
     name: "Privacy Policy",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/PrivacyView.vue"),
+      import(/* webpackChunkName: "privacy" */ "../views/PrivacyView.vue"),
   },
   {
     path: "/tos",
     name: "Terms of Use",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/TOSView.vue"),
+      import(/* webpackChunkName: "tos" */ "../views/TOSView.vue"),
   },
 ];
 

frontend/src/store/index.js

@@ -1,5 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import firebase from "firebase/compat/app";
+import "firebase/compat/auth";
 
 Vue.use(Vuex);
 
@@ -17,39 +19,17 @@ export default new Vuex.Store({
     mode: "osm",
     loading: false,
     token: false,
-    user: false,
     mapCenter: [42.2, -71.7],
     mapZoom: 8,
     responseTime: null,
     osmKeys: [],
     selectedKeyValues: [],
+    user: null,
   },
   mutations: {
-    initializeCredentials(state) {
-      if (localStorage.getItem("token")) {
-        const user = JSON.parse(localStorage.getItem("user"));
-
-        if (Math.floor(Date.now() / 1000) > user.exp) {
-          localStorage.removeItem("token");
-          localStorage.removeItem("user");
-        } else {
-          state.token = localStorage.getItem("token");
-          state.user = JSON.parse(localStorage.getItem("user"));
-        }
-      }
-    },
-    signOut(state) {
-      localStorage.removeItem("token");
-      state.token = false;
-      state.user = false;
-    },
-    setUser(state, { token, user }) {
-      state.token = token;
+    setUser(state, user) {
       state.user = user;
-      localStorage.setItem("token", token);
-      localStorage.setItem("user", JSON.stringify(user));
     },
-
     updateSelected(state, value) {
       state.selected = [...value];
     },
@@ -106,6 +86,18 @@ export default new Vuex.Store({
     },
   },
   actions: {
+    async signout({ commit }) {
+      try {
+        await firebase.auth().signOut();
+        console.log("User is signed out from firebase.");
+
+        // clean user from store
+        commit("setUser", null);
+      } catch (error) {
+        console.error("signOutUser (firebase/auth.js): ", error);
+      }
+    },
+
     getKeys({ commit }) {
       fetch(
         "https://taginfo.openstreetmap.org/api/4/keys/all?page=1&rp=200&filter=in_wiki&sortname=count_all&sortorder=desc"
@@ -198,7 +190,7 @@ export default new Vuex.Store({
     },
     searchLocation({ commit }, search_text) {
       fetch(
-        `https://api.mapbox.com/geocoding/v5/mapbox.places/${search_text}.json?access_token=${process.env.VUE_APP_MAPBOX_TOKEN}}`
+        `https://api.mapbox.com/geocoding/v5/mapbox.places/${search_text}.json?access_token=${process.env.VUE_APP_MAPBOX_TOKEN}`
       )
         .then((d) => {
           if (d.status != 200) {

frontend/vue.config.js

@@ -1,4 +1,16 @@
+const webpack = require('webpack');
+
 const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
   transpileDependencies: ["vuetify"],
+  configureWebpack: {
+    plugins: [
+        new webpack.DefinePlugin({
+            // allow access to process.env from within the vue app
+            'process.env': {
+                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
+            }
+        })
+    ]
+}
 });