Firestore working and syncing.

.env.development

@@ -1 +1,2 @@
 VUE_APP_CLIENT_API_URL=http://127.0.0.1:8080
+VUE_APP_SHOW_LOGIN=true

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "inciteful-xyz"
+  }
+}

.github/workflows/_build.yml

@@ -0,0 +1,23 @@
+name: Inciteful-Web-CI
+
+on:
+  push:
+    branches: [master]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  firebase_deploy:
+    name: Building...
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+      - name: Deploy to Firebase
+        uses: w9jds/firebase-action@master
+        with:
+          args: deploy --only hosting
+        env:
+          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
+          PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}

.gitignore

@@ -21,3 +21,8 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# firebase
+firestore-*.log
+ui-*.log
+/firebase-backup

Makefile

@@ -4,3 +4,6 @@ npm-watch:
 npm-build-release:
 	npm install
 	npm run build-prod
+
+firebase-start:
+	firebase emulators:start --export-on-exit=./firebase-backup --import=./firebase-backup

firebase.json

@@ -0,0 +1,17 @@
+{
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  },
+  "emulators": {
+    "firestore": {
+      "port": 8079
+    },
+    "ui": {
+      "enabled": true
+    },
+    "auth": {
+      "port": 9099
+    }
+  }
+}

firestore.indexes.json

@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}

firestore.rules

@@ -0,0 +1,14 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /users/{userId} {
+      allow read, update, delete: if request.auth != null && request.auth.uid == userId;
+      allow create: if request.auth != null;
+    }
+    match /paperCollections/{collectionId} {
+      allow read: if request.auth.uid == resource.data.ownerId || resource.data.visibility == "PUBLIC";
+      allow update, delete: if request.auth != null && request.auth.uid == resource.data.ownerId;
+      allow create: if request.auth != null;
+    }
+  }
+}

src/components/layout/Header.vue

@@ -76,7 +76,7 @@
             </button>
             <router-link
               v-if="user.isSignedIn && user.enabled"
-              to="/dashboard"
+              to="/user"
               class="ml-4 inline-flex items-center px-1 pt-1"
             >
               <span

src/main.ts

@@ -12,6 +12,7 @@ import Vue3TouchEvents from 'vue3-touch-events'
 
 import './assets/tailwind.css'
 import { useUserStore } from './stores/user'
+import { useDBStore } from './stores/db'
 require('v3-tour/dist/vue-tour.css')
 
 
@@ -38,7 +39,8 @@ if (process.env.NODE_ENV === 'production') {
 (async () => {
   app.use(createPinia())
   const { bindUser } = useUserStore();
-  await bindUser();
+  const { bind } = useDBStore()
+  await bindUser([bind]);
 
   app.use(router)
     .use(VueTour)

src/plugins/firebase.ts

@@ -1,4 +1,7 @@
 import { initializeApp } from 'firebase/app'
+import { getAuth, connectAuthEmulator } from "firebase/auth";
+import { getFirestore, connectFirestoreEmulator, DocumentData, CollectionReference, collection } from 'firebase/firestore';
+import { User, PaperCollection } from '../types/user';
 
 // Firebase app config
 const config = {
@@ -12,5 +15,23 @@ const config = {
 }
 
 // Init our firebase app
-const app = initializeApp(config)
+initializeApp(config)
+
+const db = getFirestore();
+const auth = getAuth();
+
+// If on localhost, use all firebase services locally
+if (process.env.NODE_ENV === 'development') {
+  connectFirestoreEmulator(db, 'localhost', 8079);
+  connectAuthEmulator(auth, "http://localhost:9099");
+  // add more services as described in the docs: https://firebase.google.com/docs/emulator-suite/connect_firestore
+}
+
+const createCollection = <T = DocumentData>(collectionName: string) => {
+  return collection(db, collectionName) as CollectionReference<T>
+}
+const usersCol = createCollection<User>('users')
+const paperCollectionsCol = createCollection<PaperCollection>('paperCollections')
+
+export { auth, db, paperCollectionsCol, usersCol }
 

src/router/index.ts

@@ -2,6 +2,7 @@ import qs from 'qs'
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import pagedata from '../utils/pagedata'
+import { useUserStore } from '../stores/user';
 
 const routes = [
   {
@@ -13,7 +14,8 @@ const routes = [
       description:
         'Committed to open access, Inciteful uses the power of graph analysis to help you explore and find the most relevant academic literature.',
       canonical: '/'
-    }
+    },
+    isSecureContext
   },
   {
     path: '/login',
@@ -225,6 +227,19 @@ const router = createRouter({
     return result || ''
   }
 })
+
+router.beforeEach((to) => {
+  const userStore = useUserStore()
+
+  if (to.path.toLowerCase().startsWith("/user") && !userStore.isSignedIn) {
+    return '/login'
+  }
+
+  if ((to.path.toLowerCase().startsWith("/login") || to.path.toLowerCase().startsWith("/register")) && userStore.isSignedIn) {
+    return '/user'
+  }
+})
+
 router.afterEach(to => {
   pagedata.setTitle(to.meta.title as string)
   pagedata.setDescription(to.meta.description as string)

src/stores/db.ts

@@ -0,0 +1,50 @@
+
+import { defineStore } from 'pinia'
+import { collection, setDoc, addDoc, doc, query, where, onSnapshot } from 'firebase/firestore';
+import { usersCol, paperCollectionsCol } from '@/plugins/firebase'
+import { PaperCollection, User } from '../types/user';
+
+export const useDBStore = defineStore({
+    id: 'firestoreDB',
+    state: () => {
+        return {
+            paperCollections: [] as PaperCollection[],
+            user: undefined as User | undefined,
+            db: {
+                users: usersCol,
+                paperCollections: paperCollectionsCol
+            }
+        }
+    },
+    actions: {
+        async savePaperCollection(paperCollection: PaperCollection) {
+            await addDoc(this.db.paperCollections, paperCollection)
+        },
+        async saveUser(user: User) {
+            await setDoc(doc(this.db.users, user.id), user)
+        },
+        async bind(userId: string | undefined) {
+            console.log("binding " + userId)
+            const q = query(paperCollectionsCol, where("ownerId", "==", userId));
+
+            onSnapshot(q, (querySnapshot) => {
+                this.paperCollections = []
+                querySnapshot.forEach((doc) => {
+                    this.paperCollections.push(doc.data());
+                });
+
+                console.log("Current collections: ", JSON.stringify(this.paperCollections));
+
+                return this.paperCollections
+            });
+
+            onSnapshot(doc(usersCol, userId), (doc) => {
+                this.user = doc.data()
+                console.log("Current data: ", doc.data());
+            });
+        }
+    },
+    getters: {
+
+    },
+})

src/stores/user.ts

@@ -1,23 +1,29 @@
 
-import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword, getIdTokenResult, IdTokenResult, AuthError, signInWithEmailAndPassword, sendPasswordResetEmail } from 'firebase/auth'
+import { onAuthStateChanged, createUserWithEmailAndPassword, getIdTokenResult, IdTokenResult, AuthError, signInWithEmailAndPassword, sendPasswordResetEmail } from 'firebase/auth'
 import { defineStore } from 'pinia'
-import '@/plugins/firebase'
+import { auth, usersCol } from '@/plugins/firebase'
+import { User } from '../types/user';
+import { doc, setDoc } from 'firebase/firestore';
 
-const auth = getAuth()
+// avoid null value before initialization from async onAuthStateChanged
+const storageId = 'firebase:uid';
+type OnChangeFn = (userId: string | undefined) => Promise<void>;
 
 export const useUserStore = defineStore({
     id: 'loggedInUser',
     state: () => {
-        const auth = getAuth()
-
         return {
             user: auth.currentUser,
+            userData: undefined as undefined | User,
             error: null as null | AuthError,
             token: null as null | IdTokenResult,
             enabled: process.env.VUE_APP_SHOW_LOGIN == "true"
         }
     },
     actions: {
+        async saveUser(user: User) {
+            await setDoc(doc(usersCol, user.id), user)
+        },
         async signUpWithEmailAndPassword(email: string, password: string) {
             return createUserWithEmailAndPassword(auth, email, password)
                 .then(userCredential => {
@@ -45,18 +51,24 @@ export const useUserStore = defineStore({
                 })
         },
         signOut() {
-            getAuth().signOut()
+            auth.signOut()
         },
-        async bindUser() {
+        async bindUser(executeOnChange: OnChangeFn[]) {
             onAuthStateChanged(
                 auth,
                 async (user) => {
                     this.user = user;
                     if (user) {
+                        localStorage.setItem(storageId, user.uid);
                         this.token = await getIdTokenResult(user);
                         this.user = user
                         this.error = null
+                    } else {
+                        localStorage.removeItem(storageId);
                     }
+
+                    console.log("changed")
+                    await Promise.all(executeOnChange.map(x => x(user?.uid)))
                 },
             );
         },
@@ -73,11 +85,14 @@ export const useUserStore = defineStore({
     },
     getters: {
         isSignedIn(state): boolean {
-            return state.user !== null
+            return state.user !== null || localStorage[storageId]
         },
         userName(state): string | null {
             return state.user ? state.user.email : null;
         },
+        userId(state): string | null {
+            return state.user ? state.user.uid : null;
+        },
         initial(): string | null {
             return (this.userName && this.userName.length > 0 ? this.userName[0].toUpperCase() : null)
         }

src/types/inciteful.ts

@@ -4,12 +4,6 @@ import { LayoutOptions, Core } from 'cytoscape'
 
 export type PaperID = string
 
-export interface ZoteroToken {
-  oauthToken: string,
-  oauthTokenSecret: string,
-  username: string | undefined,
-  userId: string | undefined
-}
 export interface Paper {
   id: PaperID;
   doi: string;

src/types/user.ts

@@ -0,0 +1,33 @@
+import { PaperID } from "./inciteful";
+
+export interface User {
+    id: string,
+    zoteroToken: ZoteroToken | null,
+}
+
+enum ItemVisibility {
+    Hidden = "HIDDEN",
+    Public = "PUBLIC",
+}
+
+export interface ZoteroToken {
+    oauthToken: string,
+    oauthTokenSecret: string,
+    username: string | undefined,
+    userId: string | undefined
+}
+
+export interface PaperCollection {
+    id: string,
+    ownerId: string,
+    parentID: string | null,
+    visibility: ItemVisibility,
+    name: string,
+    papers: CollectionPaper[]
+    zoteroKey: string | null,
+}
+
+export interface CollectionPaper {
+    paperId: PaperID
+    zoteroKey: string | null
+}