Home How to add images to firestore storage that follow security rules and cannot be accessed publicly?

Questions

How to add images to firestore storage that follow security rules and cannot be accessed publicly?

September 9, 2022

I am trying to move my images from front-end static react folder to firestore I want those images to follow security rules, how to upload those images in a way that now one can access them unless authenticated ?
can I do this manually by adding the to firestore using firebase console then adding path to donwload ? will this link then be protected ?

import { getStorage, ref } from "firebase/storage";
// Create a reference with an initial file path and name
const storage = getStorage();
const pathReference = ref(storage, 'images/someImg.jpg');

// Create a reference from a Google Cloud Storage URI
const gsReference = ref(storage, 'gs://bucket/imgPath/someImg.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');

  match /b/{bucket}/o {
     match /imgPath/{allImages=**} {      
      // Read from storage !!
      allow read :  
      if request.auth != null  // Authorized
    }
  }

also if I get the the file on demand, will this have count as read ?

getDownloadURL(ref(storage, 'images/stars.jpg'))
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    const img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });

>Solution :

Download URLs are publicly readable and bypasses the security rules.

So if you want access to be gated by the security rules, don’t call getDownloadURL() for the objects. In that case all access to the file will have to go through the Firebase SDKs, and are then controlled by your security rules.