feat(assets): use firebase sdk to verify storage requests using appcheck

sign · Feb 1, 2024 · dbd2035 · dbd2035
1 parent 4c72960
commit dbd2035
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -37,25 +37,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "17.1.1",
-    "@angular/cdk": "17.1.1",
-    "@angular/common": "17.1.1",
-    "@angular/compiler": "17.1.1",
-    "@angular/core": "17.1.1",
-    "@angular/forms": "17.1.1",
-    "@angular/material": "17.1.1",
-    "@angular/platform-browser": "17.1.1",
-    "@angular/platform-browser-dynamic": "17.1.1",
-    "@angular/platform-server": "17.1.1",
-    "@angular/router": "17.1.1",
-    "@angular/service-worker": "17.1.1",
-    "@angular/ssr": "17.1.1",
+    "@angular/animations": "17.1.2",
+    "@angular/cdk": "17.1.2",
+    "@angular/common": "17.1.2",
+    "@angular/compiler": "17.1.2",
+    "@angular/core": "17.1.2",
+    "@angular/forms": "17.1.2",
+    "@angular/material": "17.1.2",
+    "@angular/platform-browser": "17.1.2",
+    "@angular/platform-browser-dynamic": "17.1.2",
+    "@angular/platform-server": "17.1.2",
+    "@angular/router": "17.1.2",
+    "@angular/service-worker": "17.1.2",
+    "@angular/ssr": "17.1.2",
     "@asymmetrik/ngx-leaflet": "17.0.0",
     "@capacitor-firebase/analytics": "5.4.0",
     "@capacitor-firebase/app": "5.4.0",
     "@capacitor-firebase/app-check": "5.4.0",
     "@capacitor-firebase/crashlytics": "5.4.0",
     "@capacitor-firebase/performance": "5.4.0",
+    "@capacitor-firebase/storage": "^5.4.0",
     "@capacitor/android": "5.6.0",
     "@capacitor/clipboard": "5.0.7",
     "@capacitor/core": "5.6.0",
@@ -104,15 +105,15 @@
     "zone.js": "0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1701.1",
-    "@angular-devkit/build-angular": "17.1.1",
+    "@angular-devkit/architect": "0.1701.2",
+    "@angular-devkit/build-angular": "17.1.2",
     "@angular-eslint/builder": "17.2.1",
     "@angular-eslint/eslint-plugin": "17.2.1",
     "@angular-eslint/eslint-plugin-template": "17.2.1",
     "@angular-eslint/schematics": "17.2.1",
     "@angular-eslint/template-parser": "17.2.1",
-    "@angular/cli": "17.1.1",
-    "@angular/compiler-cli": "17.1.1",
+    "@angular/cli": "17.1.2",
+    "@angular/compiler-cli": "17.1.2",
     "@capacitor/assets": "3.0.4",
     "@capacitor/cli": "5.6.0",
     "@ionic/angular-server": "7.7.0",
@@ -125,7 +126,7 @@
     "@types/jasmine": "5.1.4",
     "@types/jasminewd2": "2.0.13",
     "@types/offscreencanvas": "2019.7.3",
-    "@types/three": "0.160.0",
+    "@types/three": "0.161.1",
     "@types/web-app-manifest": "1.0.7",
     "@types/webgl2": "0.0.11",
     "@types/wicg-file-system-access": "2023.10.4",

diff --git a/src/app/core/services/assets/assets.service.ts b/src/app/core/services/assets/assets.service.ts
@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Capacitor} from '@capacitor/core';
+import type {GetMetadataResult} from '@capacitor-firebase/storage';
 
 /**
  * Navigator.storage is used as iOS service worker cache is limited to 50MB.
@@ -24,6 +25,15 @@ type ProgressCallback = (receivedLength: number, totalLength: number) => void;
 })
 export class AssetsService {
   static BUCKET_URL = 'https://firebasestorage.googleapis.com/v0/b/sign-mt-assets/o/';
+  static BUCKET = 'gs://sign-mt-assets';
+
+  private getStorage() {
+    return import(/* webpackChunkName: "@capacitor-firebase/storage" */ '@capacitor-firebase/storage');
+  }
+
+  private getFilesystem() {
+    return import(/* webpackChunkName: "@capacitor/filesystem" */ '@capacitor/filesystem');
+  }
 
   stat(path: string): AssetState {
     if (path.endsWith('/')) {
@@ -44,13 +54,13 @@ export class AssetsService {
     if (!fileStatStr) {
       return {path, exists: false};
     }
-    const fileStat = JSON.parse(fileStatStr);
+    const fileStat = JSON.parse(fileStatStr) as GetMetadataResult;
 
     return {
       path,
       exists: true,
-      size: Number(fileStat.size),
-      modified: new Date(fileStat.updated),
+      size: fileStat.size,
+      modified: new Date(fileStat.updatedAt),
     };
   }
 
@@ -237,17 +247,13 @@ export class AssetsService {
   }
 
   async deleteCapacitorGetFileUri(path: string) {
-    const {Directory, Filesystem} = await import(
-      /* webpackChunkName: "@capacitor/filesystem" */ '@capacitor/filesystem'
-    );
+    const {Directory, Filesystem} = await this.getFilesystem();
     const fileOptions = {directory: Directory.External, path};
     await Filesystem.deleteFile(fileOptions);
   }
 
   async capacitorGetFileUri(path: string, download: CallableFunction, downloadDone: CallableFunction) {
-    const {Directory, Filesystem} = await import(
-      /* webpackChunkName: "@capacitor/filesystem" */ '@capacitor/filesystem'
-    );
+    const {Directory, Filesystem} = await this.getFilesystem();
 
     const fileOptions = {directory: Directory.External, path};
     try {
@@ -286,27 +292,21 @@ export class AssetsService {
   }
 
   async listDirectory(path: string): Promise<string[]> {
-    const request = await fetch(AssetsService.BUCKET_URL);
-    const bucketContent: {items: {name: string}[]} = await request.json();
-    const files = [];
-    for (const file of bucketContent.items) {
-      if (file.name.startsWith(path)) {
-        files.push(file.name.slice(path.length));
-      }
-    }
-    return files;
+    const {FirebaseStorage} = await this.getStorage();
+    const {items} = await FirebaseStorage.listFiles({path: `${AssetsService.BUCKET}/${path}`});
+    return items.map(i => i.name);
   }
 
   async statRemoteFile(path: string) {
-    const request = await fetch(this.buildRemotePath(path));
-    return request.json();
+    const {FirebaseStorage} = await this.getStorage();
+    return FirebaseStorage.getMetadata({path: `${AssetsService.BUCKET}/${path}`});
   }
 
   async getRemoteFileAsBlob(path: string, progressCallback?: ProgressCallback) {
     let array: Uint8Array = null;
     let arrayIndex = 0;
 
-    const chunks = await this.getRemoteFile(path, (loaded, total) => {
+    const chunks = this.getRemoteFile(path, (loaded, total) => {
       if (!array) {
         array = new Uint8Array(total);
       }
@@ -323,7 +323,11 @@ export class AssetsService {
   }
 
   async *getRemoteFile(path: string, progressCallback?: ProgressCallback) {
-    const response = await fetch(`${this.buildRemotePath(path)}?alt=media`);
+    const {FirebaseStorage} = await this.getStorage();
+    const {downloadUrl} = await FirebaseStorage.getDownloadUrl({
+      path: `${AssetsService.BUCKET}/${path}`,
+    });
+    const response = await fetch(downloadUrl);
 
     const reader = response.body.getReader();