Firebase Cloud Storage: permission denied. could n

Question

I have a function that successfully uploads an image to my cloud storage bucket.

With another function I want to get the URL of the image to show it on my page (With <img.../>)

getImageUrl(id: string) {
    return this.storageRef.child('X/' + id ).getDownloadURL();

But when I do this.. I get an 'invalid' URL and when I copy the URL and go to it, I get the following message:

{
  "error": {
    "code": 403,
    "message": "Permission denied. Could not perform this operation"
  }
}

I read somewhere that this might be because there is no token attached in the URL, but how can I enable this?

Answer 1

Just faced similar issue with my project, if anyone is still struggling with it, you have to provide proper rules for your Cloud Storage from the Firebase console. Checkout this link to get full detail of the rools.

If you are uploading any object on your storage, you will require to add write rule under Firebase console > Storage > Rules.

Answer 2

You have to set Storage Security Rules, read more about this here

Answer 3

You need to use the getDownloadURL method. This will allow you to obtain the URL needed to download the image or for reference in your own html.

See the reference documentation below:

https://firebase.google.com/docs/storage/web/download-files#download_data_via_url

Answer 4

The last couple of days I have been trying to understand Firebase Storage rules and I don't know why but when I separate rules for writing and for reading like this for example:

allow write: if request.auth != null && request.resource.size < 3 * 1024 * 1024;
allow read: if true;

the code works great and I can write and read using getDownloadURL(), but when I use them together like this:

allow read, write: if request.auth != null && request.resource.size < 3 * 1024 * 1024;

I got the same error as you:

{
  "error": {
  "code": 403,
  "message": "Permission denied. Could not perform this operation"
  }

}

I can write when using them together, but when I try to read the file using getDownloadURL(), the issue appears. Maybe you could try separating the rules as I mention and see if it works. I hope it solves your problem. Also, don't forget that the rules are live after 5 minutes from the moment you set them. Good luck.