Fixes refresh issues with Firebase Auth

firebase/firebase-js-sdk#2985

Author: andyfusniak

src/capturoo-client/index.ts

@@ -77,6 +77,7 @@ const CAPTUROO_ENDPOINT = 'https://api-staging.capturoo.com'
 class CapturooClient {
   static client
   endpoint: string
+  user: firebase.User
   claimAccountId: string
   claimRole: string | undefined
   claimUid: string | undefined
@@ -116,6 +117,31 @@ class CapturooClient {
     }
   }
 
+  setFirebaseUser(user: firebase.User) {
+    this.user = user
+  }
+
+  setJWT(jwt: string) {
+    this.jwt = jwt
+  }
+
+  setClaims(claims: any) {
+    this.claimAccountId = undefined
+    if ('cap_aid' in claims) {
+      this.claimAccountId = claims['cap_aid']
+    }
+
+    this.claimRole = undefined
+    if ('cap_role' in claims) {
+      this.claimRole = claims['cap_role']
+    }
+
+    this.claimUid = undefined
+    if ('user_id' in claims) {
+      this.claimUid = claims['user_id']
+    }
+  }
+
   async get(url: string, query?: URLSearchParams) {
     if (!query) {
       query = null
@@ -131,17 +157,20 @@ class CapturooClient {
     return this.do(url, 'DELETE', null, null);
   }
 
-  private async do(url: string, method: string, query: URLSearchParams | null, body: object | null, noAuth?: boolean) : Promise<Response> {
-    let opts : any  = {
+  private async do(url: string, method: string, query: URLSearchParams | null, body: object | null, noAuth?: boolean): Promise<Response> {
+    const opts : any  = {
       method,
       headers: {
         'Accept': 'application/json',
-        'Authorization': noAuth ? '' : `Bearer ${this.jwt}`,
+
       },
       mode: 'cors'
     }
-    if (noAuth) {
-      delete opts.headers['Authorization']
+    console.log('a')
+    if (noAuth === false) {
+      console.log('adding auth header')
+      const { token } = await this.user.getIdTokenResult()
+      opts.headers['Authorization'] = `Bearer ${token}`
     }
 
     if ((method === 'POST') && (!body)) {
@@ -179,27 +208,6 @@ class CapturooClient {
     }
   }
 
-  setJWT(jwt: string) {
-    this.jwt = jwt
-  }
-
-  setClaims(claims: any) {
-    this.claimAccountId = undefined
-    if ('cap_aid' in claims) {
-      this.claimAccountId = claims['cap_aid']
-    }
-
-    this.claimRole = undefined
-    if ('cap_role' in claims) {
-      this.claimRole = claims['cap_role']
-    }
-
-    this.claimUid = undefined
-    if ('user_id' in claims) {
-      this.claimUid = claims['user_id']
-    }
-  }
-
   async getFirebaseConfig(): Promise<FirebaseConfig> {
     if (!this.firebaseConfig) {
       const response = await this.do('/autoconf', 'GET', null, null, true)

src/main.ts

@@ -25,7 +25,7 @@ import capturoo from './capturoo-client'
     // init capturoo
     capturoo.initializeApp({
       endpoint: hostnameToEndpoint(),
-      debug: false
+      debug: true
     })
     const firebaseConfig = await capturoo.admin().getFirebaseConfig()
     firebase.initializeApp(firebaseConfig)
@@ -35,8 +35,12 @@ import capturoo from './capturoo-client'
     firebase.auth().onAuthStateChanged(async (user) => {
       if (user) {
         store.commit('setUser', user)
+
+        // https://github.com/firebase/firebase-js-sdk/issues/2985
+        capturoo.admin().setFirebaseUser(user)
+
         const idTokenResult = await user.getIdTokenResult()
-        capturoo.admin().setJWT(idTokenResult.token)
+        // capturoo.admin().setJWT(idTokenResult.token)
         capturoo.admin().setClaims(idTokenResult.claims)
       } else {
         store.commit('setUser', undefined)

src/store/index.ts

@@ -8,13 +8,17 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     account: null,
+    bucket: null,
     buckets: [],
     user: null
   },
   getters: {
     account(state) {
       return state.account
     },
+    bucket(state) {
+      return state.bucket
+    },
     buckets(state) {
       return state.buckets
     },
@@ -32,6 +36,9 @@ export default new Vuex.Store({
     setUser(state, user: firebase.User) {
       state.user = user
     },
+    setBucket(state, bucket) {
+      state.bucket = bucket
+    },
     setBuckets(state, buckets) {
       state.buckets = buckets
     },
@@ -99,15 +106,27 @@ export default new Vuex.Store({
         throw err
       }
     },
-    async getBuckets() {
+    async getBucket({ commit }, { bucketId }) {
+      try {
+        const bucket = await capturoo.admin().getBucket(bucketId)
+        commit('setBucket', bucket)
+        return bucket
+      } catch (err) {
+        throw err
+      }
+    },
+    async getBuckets({ commit }) {
       try {
         const buckets = await capturoo.admin().getBuckets()
-        this.commit('setBuckets', buckets)
+        commit('setBuckets', buckets)
         return buckets
       } catch (err) {
         throw err
       }
     },
+    resetBucket({ commit }) {
+      commit('setBucket', null)
+    },
     async deleteBucket({ commit, state }, { bucketId }) {
       const results = state.buckets.filter(b => {
         return b.bucketId === bucketId

src/views/account/AccountSettings.vue

@@ -11,7 +11,7 @@
       <v-tab>Developer Keys</v-tab>
     </v-tabs>
 
-    <v-tabs-items v-model="tab">
+    <v-tabs-items v-if="account" v-model="tab">
       <v-tab-item :transition="false" :reverse-transition="false">
         <v-card flat>
           <v-card-text>
@@ -58,18 +58,13 @@ export default {
     }
   },
   beforeMount: async function() {
-    this.loading = true;
-    console.log('loading account')
-    const account = await this.getBuckets();
-    console.log('account loaded')
-    console.log(account)
+    if (!this.$store.getters.account) {
+      await this.getAccount();
+    }
   },
   methods: {
-    async getBuckets() {
-      const account = await this.$store.dispatch('getAccount')
-      console.log('method: getBuckets')
-      console.log(account)
-      return account
+    async getAccount() {
+      await this.$store.dispatch('getAccount')
     },
     async deleteConfirm(bucketId) {
       await this.$store.dispatch('deleteBucket', { bucketId })

src/views/buckets/BucketDetails.vue

@@ -18,7 +18,7 @@
 
     <v-divider></v-divider>
 
-    <v-container fluid>
+    <v-container v-if="bucket" fluid>
       <v-row>
           <v-col cols="12" x="6" md="6">
             <v-icon
@@ -27,24 +27,54 @@
               color="success"
               class="pr-4 pb-1"
             >mdi-cloud-check</v-icon>
-            <span class="font-weight-light title">skincare</span>
+            <span class="font-weight-light title">{{ bucket.resourceName }}</span>
           </v-col>
       </v-row>
 
       <v-row>
         <v-col cols="12" xs="6" md="6">
           <div class="caption grey--text">Bucket name</div>
-          <div>My skincare campaign</div>
+          <div>{{ bucket.bucketName }}</div>
         </v-col>
       </v-row>
 
       <v-row>
         <v-col cols="12" xs="6" md="6">
           <div class="caption grey--text">Public API Key</div>
-          <div>ObGsEG4x</div>
+          <div>{{ bucket.publicApiKey }}</div>
         </v-col>
       </v-row>
 
+      <v-row>
+        <v-col cols="12" xs="6" md="6">
+          <div class="caption grey--text">Created</div>
+          <div><p class="grey--text text--darken-1 pt-0 body-2">{{ bucket.created }}</p></div>
+        </v-col>
+      </v-row>
     </v-container>
   </div>
 </template>
+
+<script lang="ts">
+export default {
+  computed: {
+    bucket() {
+      return this.$store.getters.bucket
+    }
+  },
+  beforeMount: async function() {
+    await this.getBucket(this.$route.params.bucketId);
+  },
+  beforeDestroy() {
+    this.$store.dispatch('resetBucket')
+  },
+  methods: {
+    async getBucket(bucketId) {
+      await this.$store.dispatch('getBucket', { bucketId })
+    },
+    async deleteConfirm(bucketId) {
+      await this.$store.dispatch('deleteBucket', { bucketId })
+    }
+  }
+}
+</script>

src/views/buckets/Buckets.vue

@@ -14,7 +14,7 @@
 
     <v-container fluid>
       <p class="text--secondary">Buckets provide containers for collections of leads.</p>
-      <v-simple-table class="mt-4">
+      <v-simple-table v-if="buckets" class="mt-4">
         <template v-slot:default>
           <thead>
             <tr>
@@ -31,7 +31,7 @@
             <tr v-for="bucket in buckets" :key="bucket.resourceName">
               <td>
                 <router-link
-                  :to="{ name: 'view-bucket', params: { bucketId: 'xyz' }}"
+                  :to="{ name: 'view-bucket', params: { bucketId: bucket.bucketId }}"
                 >
                   {{ bucket.resourceName }}
                 </router-link>
@@ -73,7 +73,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 
 export default {
@@ -82,9 +82,12 @@ export default {
   },
   computed: {
     buckets() {
-      return this.$store.getters.buckets.map(b => {
-        return b.data()
-      })
+      if (this.$store.getters.buckets) {
+        return this.$store.getters.buckets.map(b => {
+          return b.data()
+        })
+      }
+      return null
     }
   },
   data() {
@@ -98,7 +101,7 @@ export default {
   },
   methods: {
     async getBuckets() {
-      const buckets = await this.$store.dispatch('getBuckets')
+      await this.$store.dispatch('getBuckets')
     },
     async deleteConfirm(bucketId) {
       await this.$store.dispatch('deleteBucket', { bucketId })