feat: add rotateKey functionality

src/components/Apikey.vue

@@ -4,6 +4,7 @@
     <h1>API Key</h1>
     <p>Your API key is: {{ apiKey }} <ContentCopyIcon @click ="copyApikey"/></p>
     <SnackBarVue :message="snackbarMessage" ref="snackbar"/>
+    <button @click="rotateKey">Rotate Key</button>
   </div>
   <!--TODO: Add rotate key -->
 </template>
@@ -27,6 +28,11 @@ const copyApikey = () => {
   snackbarMessage.value = 'ApiKey copied to clipboard'
 }
 
+const rotateKey = () => {
+  store.rotateKey()
+  snackbarMessage.value = 'ApiKey rotated'
+}
+
 </script>
 
 <style scoped></style>

src/components/SnackBar.vue

@@ -4,7 +4,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
 props: {
     message: {

src/firebase/data.ts

@@ -17,8 +17,11 @@ import {
   query,
   where
 } from 'firebase/firestore/lite'
+import { getFunctions, httpsCallable } from "firebase/functions";
 import type { ScreenTimeData, ScreenTimeSummary } from '@/types'
 
+const functions = getFunctions();
+
 export function dataToSummary(data: ScreenTimeData): ScreenTimeSummary {
   const total = data.events.reduce((acc, event) => acc + event.duration, 0)
   const categoryTotals: { [key: string]: number } = {}
@@ -121,3 +124,24 @@ export async function getApiKey(userId: string): Promise<string | null> {
     return null
   }
 }
+
+interface ApiResponse {
+  apiKey: string;
+}
+
+export async function rotateKey(userId: string): Promise<string | null | void> {
+  // invoke a callable function to rotate the user's api key
+  // this function is defined in functions/src/index.ts
+  const rotateApiKey = httpsCallable(functions, 'rotateApiKey')
+  const key = rotateApiKey({ userId: userId }).then((result) => {
+    if (typeof result.data === 'object' && result.data !== null && 'apiKey' in result.data) {
+      return (result.data as ApiResponse).apiKey;
+  }
+  return undefined
+  }).catch((error) => {
+    console.error(error)
+  }).finally(() => {
+    return null
+  })
+  return key
+}

src/stores/apikey.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { getApiKey } from '@/firebase/data'
+import { getApiKey, rotateKey as rotateKeyCallable } from '@/firebase/data'
 import { useAuthStore } from './auth'
 import { ref } from 'vue'
 
@@ -8,11 +8,22 @@ export const useApiKeyStore = defineStore('apikey', () => {
   function fetchKey() {
     const userId = useAuthStore().user!.uid
     getApiKey(userId).then((key) => {
+      console.log('Fetched key', key)
       if (key == apikey.value) return;
       apikey.value = key
     })
   }
-  return { apikey, fetchKey }
+  function rotateKey() {
+    const userId = useAuthStore().user!.uid
+    rotateKeyCallable(userId).then((key) => {
+      console.log('Key is now', key)
+      if (typeof key === 'string') {
+        console.log('Rotated key to', key)
+        apikey.value = key
+      }
+  })
+  }
+  return { apikey, fetchKey, rotateKey }
 },
 {
   persist: true