Vue Firebase Storage delete image method is getting user does not have permission to access error

Question

Here is my delete method:

 async deleteAvatar(path) {
      console.log({ path });
      try {
        const imageRef = ref(storage, path);
        console.log({ imageRef });
        await deleteObject(imageRef);
      } catch (error) {
        console.log('File Delete Error');
        console.error(error);
      }
    },

Here are my console logs:

path: "/uploads/0QohgxJLyEdavJYQGziqHD9oqxJ2/profileImgs/1692216191041-Default-img.png"

Here are my security rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
        match /uploads/{userId}/profileImgs/{imageName}{
        allow read;
      allow write: if request.auth.uid == userId && request.resource.contentType.matches('image/.*')
    }
  }
}

Update If I take all restrictions off in rules it deletes. So I guess it's a rule thing?

Answer 1

You must change your security policies to permit users to remove their own file in order to resolve this.

You may also try this code below:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{userId}/profileImgs/{imageName}{
      allow read;
      allow write: if request.auth.uid == userId && request.resource.contentType.matches('image/.*');
      allow delete: if request.auth.uid == userId;
    }
  }
}

As long as their UID matches the userId in the path, users will be allowed to remove their own file as a result of this update. You should no longer have the "user does not have permission to access" problem when performing the delete operation after doing this.

Don't forget to thoroughly test the revised security rules to make sure they satisfy the security needs of your application while still enabling the required actions.

You may check this documentation for Firebase Security Rules - Best Practices and Advanced Use Cases.