Restrict access to images in bucket to authenticated users

Question

Looking for instructions on how to setup Google Cloud Storage bucket with images that only authenticated users can access.

Our application uses Firstore and Cloud Storage. We store images in GCS buckets which we do not want publicly visible on the NET. We have setup storage rules

allow read: if request.auth.uid != null;

We have also configured the bucket in our Firebase config settings. We then use the storage API to getDownloadURL() for the target path. This works and we are able to see the images. However, if we copy the Image URL from the page and go to another browser (that is not logged in) that browser is able to download the image.

Question: what is the correct (and most efficient) way to configure and access a GCS bucket such that only authenticated users authenticated using Firebase signInWithEmailAndPassword() can view the images.

Here is what we do currently (Angular and AngularFire)

// Assumes storage is an instance of the AngularFireStorage service
this.storage.getDownloadURL('/thumbs/imagename.jpg')
  .subscribe(path => {
     this.imgSrc = path;
});

As described above, the resulting path is public and the above process is very slow - images take a long time to appear on the screen.

I am guessing this is not the right approach?

Doug Stevenson Doug Stevenson · Accepted Answer · 2019-05-27T16:57:29

The content behind a download URLs can always be viewed by anyone who simply has the URL. You can't change this behavior. If you don't want any unauthorized content to be served from your bucket, then don't generate any download URLs. You will have to force all access to the bucket through the provided client SDKs in conjunction with the Firebase Authentication SDK.

Restrict access to images in bucket to authenticated users

2 Answers