I'm working on my first ReactJS project and I'm trying to upload image to firebase but whenever I try to upload I get notification in the browser "Firebase Storage: User does not have permission to access 'images/${image.name}'. (storage/unauthorized)" however, I'm logged in using firebase authenticaion. Any help will be appreciated
My firebase settings are
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
function to upload
const handleUpload = () => {
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
"state_changed",
(snapshot) => {
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes * 100)
);
setProgress(progress);
},
(error) => {
console.log(error);
alert(error.message);
},
() => {
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then(url => {
db.collection("posts").add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
caption: caption,
imageUrl: url,
username: username
});
setProgress(0);
setCaption("")
setImage(null);
})
}
)
}
This is my firebase function
import firebase from 'firebase/compat';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
const firebaseConfig = { // Have the firebase config here
apiKey: "XXXXXX",
authDomain: "XXXX",
databaseURL: "XXXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "1:XX:X"
};
// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);
// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export { auth, db, storage };
The rules you posted above are cloud firestore rules. Not firebase storage rules.
Your firebase storage rules should look like this:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
This would permit only authenticated access.
To view firebase storage rules: Storage -> Rules.