Fix the Error “Permission denied. 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”

TypeScript is an open-source and free programming language, which is a JavaScript superset. It improves developers’ and programmers’ experience as it extends JavaScript. It allows programmers to maintain the project’s safety. With Firebase, programmers build design apps we well as grow their user base. Firebase cloud storage is a well-known simple, powerful yet cost-effective storage service. When working with it, you may get the error “Permission denied. 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”. Check out how the error pops up

How the error appears

When you try to upload a file to Firebase Storage using Firebase, you get up with the following error message:

Uncaught (in promise) FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown) { “error”: { “code”: 400, “message”: “Permission denied. 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.” } }

This error is happening from the ‘console.log(“ERROR”, err);, when you are using the following TypeScript script:

import { projectStorage } from "@/firebase/config";
import { ref, watchEffect } from "vue";
import {
  ref as storageRef,
  uploadBytesResumable,
  UploadTaskSnapshot,
  UploadTask,
  getDownloadURL,
  StorageError,
} from "firebase/storage";

const useStorage: any = (file: File) => {
  const error = ref<StorageError | null>(null);
  const url = ref<string | null>(null);
  const progress = ref<number | null>(null);
  watchEffect(() => {
    // references
    const storageReference = storageRef(projectStorage, "images/" + file.name);
    // upload file
    const uploadTask: UploadTask = uploadBytesResumable(storageReference, file);
    // update progess bar as file uploads
    uploadTask.on(
      "state_changed",
      (snapshot: UploadTaskSnapshot) => {
        console.log("SNAPSHOT", snapshot);
      },
      (err) => {
        error.value = err;
        console.log("ERROR", err);
      },
      async () => {
        // get download URL & make firestore doc
        const downloadUrl = await getDownloadURL(storageReference);
        url.value = downloadUrl;
        console.log("DOWNLOADURL", downloadUrl);
      }
    );
  });
  return { progress, url, error };
};
export default useStorage;

As you have seen how you land up in the error warning. You must be wondering why you are getting this error and how to fix it. Check out how to fix it

How To Fix the Error “Permission denied. 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”

In case you are getting the console error, all you have to do is to tap (second blue) the Post 400 error shown on your console, which brings a tab called Network. You keep scrolling through it till you find a red error, which shows a more detailed error like:

Permission denied. 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.

If you think it occurs because of the rules of Firebase Storage, then you need to double sure about the rules before you continue. The prime cause of the error is missing the esoteric [email protected] permission that is in the Google Cloud Console.

Solution

To handle the error in an exceptional way, you need to follow the below steps

• Visit the page https://console.cloud.google.com
• Pick the project you are currently working on in the top blue bar (perhaps you are required to change to all tabs to check the project you are using)
• Choose ‘Cloud Storage’ by scrolling the left menu
• You need to choose all buckers, then in the top right corner, tap ‘Show INFO panel’
• Next, click ‘ADD PRINCIPAL’
• In the last step, on the New Principal box, add ‘[email protected] to assign the role of ‘Storage Admin’. Save it.

The issue is resolved.

Conclusion

We highlighted the solution to fix the error “Permission denied. 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”. The solution is simple and easy to apply whenever you get this error warning.

I hope it helps!