feat: add rotateKey functionality

src/components/Apikey.vue

@@ -4,8 +4,8 @@
     <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>
 
 <script setup lang="ts">
@@ -27,6 +27,11 @@ const copyApikey = () => {
   snackbarMessage.value = 'ApiKey copied to clipboard'
 }
 
+const rotateKey = () => {
+  store.rotateKey()
+  snackbarMessage.value = 'ApiKey rotated'
+}
+
 </script>
 
 <style scoped></style>

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,20 @@ export async function getApiKey(userId: string): Promise<string | null> {
     return null
   }
 }
+
+interface ApiResponse {
+  apiKey: string;
+}
+
+export async function rotateKey(userId: string): Promise<string | null> {
+  // 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) => {
+    return (result.data as ApiResponse)?.apiKey;
+  }).catch((error) => {
+    console.error(error)
+    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'
 
@@ -12,7 +12,16 @@ export const useApiKeyStore = defineStore('apikey', () => {
       apikey.value = key
     })
   }
-  return { apikey, fetchKey }
+  function rotateKey() {
+    const userId = useAuthStore().user!.uid
+    rotateKeyCallable(userId).then((key) => {
+      console.log('Key is now', key)
+      if (key != null) {
+        apikey.value = key
+      }
+  })
+  }
+  return { apikey, fetchKey, rotateKey }
 },
 {
   persist: true