Firebase uploadBytes call returning 403 despite user authorized

Question

This is my current code:

async newCollectionRequest({ commit }, data) {
  try {
    console.log(data);
    const location = `/pending-images/${data.collectionName}/${data.image.name}`;
    console.log(location);

    const storage = getStorage();
    const storageRef = ref(storage, location);

    // 'file' comes from the Blob or File API
    await uploadBytes(storageRef, data.image);
    console.log('Uploaded a blob or file!');
    return true;
  } catch (error) {
    throw error.message;
  }
},

It seems to be working, but only in that I'm getting a 403 response when attempting to upload the image. I'm unsure why I'm getting a 403 in the first place though as I've implemented authentication on the app, and I've confirmed the user is logged in when trying to take this action. This is my firebase rule:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

I'm not sure why this is resulting in a 403 error

Answer 1

You have posted a firestore.rules file. You are using Firebase storage. You must create a storage.rules file in the root of your Firebase project (the same place you have your firestore.rules file) and add something like:

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

This will grant full read/write access to any authenticated user. You can read more about storage rules here.