Firebase storage security rules 400 error issue "Permission denied. Could not access bucket xxxxx-****.appspot.com"

I keeps getting message error from firebase link saying 400 error with my firebase storage upload in my react project when trying to upload photo... everything were working fine before and uploads images successfully, but now it stop uploading of photo giving the following error, i don't know where the problem is...

The link that prompt out in inspect

POST https://firebasestorage.googleapis.com/v0/b/xxxxx-****.appspot.com/o?name=usertemp%2F0rdrGK4MRDRptAMCc3mHDveytJv1%2F0rdrGK4MRDRptAMCc3mHDveytJv1.jpg 400 ()

Here is the error from the link response

{
  "error": {
    "code": 400,
    "message": "Permission denied. Could not access bucket xxxxx-****.appspot.com. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources."
  }

Here is my security

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth!=null;
    }
  }
}

I still tried changing the match to /b/xxxxx-****.appspot.com/o with still no success

This is due to a missing permission. You need to check whether you have

[email protected]

as a member with a "Storage Admin" role. If you don't have one, then add it. That would fix the issue.

Here's the step on how you can check and add permissions.

• Go to Cloud console
• Navigate to Storage
• Select your bucket then click show info panel.

You can also add the missing permission in the IAM & Admin if you want.

This error happend when you are trying to upload image before creating Firebase Storage which is specific for file uploading.

Could not access bucket xxxxx-****.appspot.com. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources

Thats why you are facing the error with message Please Enable Firebase Storage for your bucket because Firebase Storage act as default location for bucket media upload.

{
  "error": {
    "code": 400,
    "message": "Permission denied. Could not access bucket xxxxx-****.appspot.com. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources."
  }

What to do?

Just Go to your project Firebase console >> Storage >> and Just Click GET STARTED

I noticed that this problem was occurring on projects which didn't have the Firebase* APIs and Services enabled on the Google App Engine dashboard (see screenshot below). So I manually enabled the APIs related to firebase storage.

I don't understand why some APIs and services are enabled automatically for some projects and not for others. There doesn't seem to be specific instructions on the Firebase - GCP integration steps that talk about needing to explicitly enable the firebase APIs.

This other SO thread was helpful to shed light on this apparent inconsistency

I have solve this by going to Storage > Rules and set read,write to true :

From this:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if false; //set this to true
    }
  }
}

Change into this:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true; // true
    }
  }
}

If it doesn't work a little troubleshoot might help; try uploading an image/file on your storage by clicking Upload File button. And try re-uploading the file from your script/code to see if it works. Then delete the sample file you uploaded. Make sure that allow read, write: is true : allow read, write: if true;

Note: This is for test development only, change the rules later on production.