Correct way to reference images in Firestore document

Question

In my application, my user documents have an avatar image associated with them which is kept in cloud storage. Currently I have a field in the user object that references the download URL of its image. Just wondering if this is the correct/best way to do it.

Answer 1

There isn't really a best way to materialize the link between an avatar image that you store in Cloud Storage and a specific user of your Firebase project.

You can very well do the way you do (having a "field in the user object that references the download URL").

---

Another approach would be to store the avatar images in a public "folder" under your default bucket using the user UID to name the avatar image (see at the bottom the note on "folders").

Then you you can use a link with the following structure to directly download the image (or include it in a img src HTML tag)

https://firebasestorage.googleapis.com/v0/b/<yourprojectname>.appspot.com/o/users%2F38r174prM9aTx4JAdcm50r3V0Hq2.png?alt=media

where users is the name of the "folder" dedicated to public avatar images

and 38r174prM9aTx4JAdcm50r3V0Hq2.png is the image file name for a specific user (i.e. user UId + png extension).

Note that the / is encoded as %2F (standard URL encoding).

You would then set your Cloud Storage security rules like the following:

service firebase.storage {
 match /b/{bucket}/o {

    match /privateFiles {   //All other files that are not under users
     match /{allprivateFiles=**} {
       allow read: if false;
       allow write: .....
     }
   }

   match /users/{userId} {   //Public "folder"
     allow read;
   }
 }
}

---

Note: Actually Google Cloud Storage does not have true "folders", but by using a "/" delimiter character in the file path it will behave similarly to folders. In particular the Firebase console will display the files organised in folders.