I am trying to move my images from front-end static react folder to firestore I want those images to follow security rules, how to upload those images in a way that now one can access them unless authenticated ? can I do this manually by adding the to firestore using firebase console then adding path to donwload ? will this link then be protected ?
import { getStorage, ref } from "firebase/storage";
// Create a reference with an initial file path and name
const storage = getStorage();
const pathReference = ref(storage, 'images/someImg.jpg');
// Create a reference from a Google Cloud Storage URI
const gsReference = ref(storage, 'gs://bucket/imgPath/someImg.jpg');
// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');
match /b/{bucket}/o {
match /imgPath/{allImages=**} {
// Read from storage !!
allow read :
if request.auth != null // Authorized
}
}
also if I get the the file on demand, will this have count as read ?
getDownloadURL(ref(storage, 'images/stars.jpg'))
.then((url) => {
// `url` is the download URL for 'images/stars.jpg'
// This can be downloaded directly:
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = (event) => {
const blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();
// Or inserted into an <img> element
const img = document.getElementById('myimg');
img.setAttribute('src', url);
})
.catch((error) => {
// Handle any errors
});