Merge pull request #19 from Nummenpojat/adapting-to-api-chances

Adapting to api chances
Nummenpojat · Dec 25, 2022 · eca7e6c · eca7e6c
2 parents 590d1a5 + ba92d66
commit eca7e6c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suppis-nettisivut",
-  "version": "1.1.0-Beta",
+  "version": "2.0.0-Beta",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",

diff --git a/src/firebaseConfig.ts b/src/firebaseConfig.ts
@@ -9,6 +9,8 @@ import {
   getIdTokenResult
 } from "firebase/auth"
 import {getFirestore} from "firebase/firestore";
+import { initializeAppCheck, ReCaptchaV3Provider, getToken } from "firebase/app-check"
+
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -28,6 +30,12 @@ const app = initializeApp(firebaseConfig);
 // Initialize Firestore
 export const db = getFirestore()
 
+// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
+// key is the counterpart to the secret key you set in the Firebase console.
+const appCheck = initializeAppCheck(app, {
+  provider: new ReCaptchaV3Provider('6Ldhc6MjAAAAAEaBNLc8hbzKRJzOiCVZMXcmvGme'),
+});
+
 const provider = new GoogleAuthProvider()
 export const auth = getAuth()
 
@@ -46,10 +54,7 @@ export const signOut = () => {
     });
 }
 
-/**
- * Callback function to get ID token for making request to the api
- * @returns idToken
- */
+// Async function which gets ID token for making request to the api
 export const getIdTokenForApiCall = async () => {
   try {
     return await auth.currentUser?.getIdToken()
@@ -58,6 +63,15 @@ export const getIdTokenForApiCall = async () => {
   }
 }
 
+// Async function which gets AppCheck token for making request to the api
+export const getAppCheckTokenForApiCall = async () => {
+  try {
+    return await getToken(appCheck, false)
+  } catch (error) {
+    throw error
+  }
+}
+
 // TODO make this function accept many claims and it checks them all at once
 export const verifyClaim = (user: User | null, claim: string) => {
   if (user) {

diff --git a/src/pages/message.tsx b/src/pages/message.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {getIdTokenForApiCall} from "../firebaseConfig";
+import {getAppCheckTokenForApiCall, getIdTokenForApiCall} from "../firebaseConfig";
 import axios, {AxiosResponse} from "axios";
 
 const Papa = require("papaparse")
@@ -16,6 +16,23 @@ export default function MessageWrapper() {
     setSelectedFile(event.target.files[0])
   }
 
+  const handleMessageApiCallResponse = (error: any) => {
+    if (error.response == undefined) {
+      alert(error)
+      return
+    }
+
+    if (error.response.status == 409) {
+
+      // Regex replaces all + with %2B because + can't be used in urls parameter values, so they are converted to %2B which is equivalent
+      setQr(error.response.data.replace(/\+/g, "%2B"))
+
+      setShowQr(true)
+      return
+    }
+    alert(error.response.data)
+  }
+
   const handleCsvToJson = (): Promise<any> => {
     return new Promise<any>((resolve, reject) => {
       if (selectedFile == null) {
@@ -42,52 +59,47 @@ export default function MessageWrapper() {
     if (!toList) {
       try {
 
-        //
+        // Getting tokens from Firebase to send along the API request, so backend can ensure that user has correct access rights
         const idToken = await getIdTokenForApiCall()
+        const appCheckToken = await getAppCheckTokenForApiCall()
+
         const result: AxiosResponse = await axios.post("http://localhost:3001/whatsapp/send/one", {
           number: phoneNumber,
           message: message
-        }, {headers: {idtoken: idToken}})
+        }, {
+          headers: {
+            "X-Firebase-IdToken": idToken,
+            "X-Firebase-AppCheck": appCheckToken.token
+          }
+        })
 
         alert(result.data)
 
       } catch (error: any) {
-
-        if (error.response.status == 409) {
-
-          // Regex replaces all + with %2B because + can't be used in urls parameter values, so they are converted to %2B which is equivalent
-          setQr(error.response.data.replace(/\+/g, "%2B"))
-
-          setShowQr(true)
-          return
-        } else {
-          alert(error.response.data)
-        }
+        handleMessageApiCallResponse(error)
       }
     }
     if (toList) {
       try {
 
+        // Getting tokens from Firebase to send along the API request, so backend can ensure that user has correct access rights
         const phoneNumbers = await handleCsvToJson()
         const idToken = await getIdTokenForApiCall()
+        const appCheckToken = await getAppCheckTokenForApiCall()
 
         const result: AxiosResponse = await axios.post("http://localhost:3001/whatsapp/send/list", {
           numbers: phoneNumbers,
           message: message
-        }, {headers: {idtoken: idToken}})
+        }, {
+          headers: {
+            "X-Firebase-IdToken": idToken,
+            "X-Firebase-AppCheck": appCheckToken.token
+          }
+        })
 
         alert(result.data)
       } catch (error: any) {
-        if (error.response.status == 409) {
-
-          // Regex replaces all + with %2B because + can't be used in urls parameter values, so they are converted to %2B which is equivalent
-          setQr(error.response.data.replace(/\+/g, "%2B"))
-
-          setShowQr(true)
-          return
-        } else {
-          alert(error.response.data)
-        }
+        handleMessageApiCallResponse(error)
       }
     }
   }