We Keep Coding

Authenticate with firebase owner before pulling data down

So I have this code written out:
var temp_photo = storageRef.child('user_photos/'+snap.key+'/')
var y = r.insertCell(17).innerHTML = snap.val().photo_url;
temp_photo.getDownloadURL().then(downloadURL => {
console.log(downloadURL);
//var y = r.insertCell(17).innerHTML = '<img src="'+downloadURL+'" width="50" height="50" />';
})
works fine, it shows the image url in firebase:
user_photos/07KMSXj5QBYHj55555558bSLIkK2/D41FB90B-1111-5555-2222-22F86D69883F.jpg
this is the correct path to the image, the problem is, im not trying to display the url, i want to display the actual image, any help with this?
my configs are set up correct like this:
var firebaseConfig = {
apiKey: "55555",
authDomain: "MY-APP.firebaseapp.com",
databaseURL: "https://MY-APP.firebaseio.com",
projectId: "MYAPP",
storageBucket: "APP.appspot.com",
messagingSenderId: "44444",
appId: "1:5555555:web:5555555"
};
firebase.initializeApp(firebaseConfig);
And my firebase security set up like this:
I think it has something to do with permission, these are mine set now:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read
allow write//: if request.auth != null;
}
}
}
I console.log the downloadURL and get the following printed
It looks like its throwing a 404 error
[Error] Failed to load resource: the server responded with a status of 404 () (user_photos/07KMSXj5QBYHj55555558bSLIkK2, line 0)
looks like its failing to get user_photos/07KMSXj5QBYHj55555558bSLIkK2
but it should be getting a full url (the image in the folder):
user_photos/07KMSXj5QBYHj55555558bSLIkK2/D41FB90B-1111-5555-2222-22F86D69883F.jpg
Here is also an image of what gets logged:
I think I need to authenticate the user before It can get the downloadURL
I have something like this:
firebase.initializeApp(firebaseConfig);
var email="my#gmail.com";
var password="mypassword";
//Sign In User with Email and Password
firebase.auth().signInWithEmailAndPassword(email, password)
with the following set up:
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.3/firebase-auth.js"></script>
getting an error that auth() is not a function?

TypeError: firebase.firestore () is not a function web javascript

I am trying to upload an image on firebase cloud storage with web javascript. I am getting "firebase.firestore () is not a function" on my console. Am I going any wrong way?
I have done insert and fetch data on firebase database. But I have to stop for upload image on firebase cloud storage.
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-firestore.js"></script>
var firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX",
databaseURL: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX"
};
// Initialize Firebase
var defaultProject = firebase.initializeApp (firebaseConfig);
// Get a reference to the database service
var fileName = selectedFile.name;
var storageRef = firebase.firestore ().ref ('image' + fileName).put (selectedFile);

updating node on the computer seemed to have fixed the issue. I updated it to v16.15.1

change
firebase.firestore ().ref ('image' + fileName).put (selectedFile);
to
firebase.storage().ref('image' + fileName).put (selectedFile);

I receive: firebase.database is not a function error when trying to connect my form to the database

I'm trying to connect my contact form to a firebase database and i keep getting the firebase.database is not a function error continuously.
I'm also using parcel-bundler for this project and also getting these errors:
at Object.parcelRequire.firebase.js (firebase.js:44)
at newRequire (firebase.js:44)
at firebase.js:44
at firebase.js:44
I really don't know what I'm doing wrong, after looking at similar problems none of them could provide a solution.
This is how I am linking my files:
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
<script src="./firebase.js"></script>
<script src="./main.js"></script>
</body>
This is the code from my firebase.js file:
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaS*************r48uEU",
authDomain: "k********irebaseapp.com",
databaseURL: "https://*******irebaseio.com",
projectId: "k******",
storageBucket: "k**********m",
messagingSenderId: "984****903",
appId: "1:9843179**********3734705af"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var messageRef = firebase.database().ref("messages");
//grab a form
document.querySelector(".contact-form").addEventListener("submit", submitForm);
function submitForm(e) {
e.preventDefault();
// get values
var name = getInputVal("name");
var email = getInputVal("email");
var number = getInputVal("phone");
var message = getInputVal("message");
saveMessage(name, email, number, message);
}
function getInputVal(id) {
return document.getElementById(id).value;
}
function saveMessage(name, email, number, message) {
var newMessageRef = messageRef.push();
newMessageRef.set({
name: name,
email: email,
number: number,
message: message
});
}
Any help will be deeply appreciated, thanks guys.

You're currently only including this for Firebase:
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
This only contains the definition of FirebaseApp, and doesn't include Firebase Authentication (firebase.auth()) or Firebase Realtime Database (firebase.database()). To include those, be sure to include the correct scripts for that too:
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-database.js"></script>

Javascript - Cannot instantiate firebase-firestore

Trying to follow the google Getting Started With Cloud Firestore on the Web - Firecasts
For some reason I'm getting this error:
Uncaught Error: Cannot instantiate firebase-firestore - be sure to load firebase-app.js first.
But I believe I have everything done as it should be. What is wrong with this?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-firestore.js"></script>
</head>
<body>
<h1 id="hotDogOutput">Hot dog status:</h1>
<input type="textfield" id="latestHotDogStatus">
<button id="saveButton">Save</button>
<script src="./app.js"></script>
</body>
</html>
Javascript
// Initialize Firebase
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
};
firebase.initializeApp(config);
const firestore = firebase.firestore();
const settings = {/* your settings... */ timestampsInSnapshots: true};
firestore.settings(settings);
const docRef = firestore.doc("samples/sandwichData");
const outputHeader = document.querySelector("#hotDogOutput");
const inputTextField = document.querySelector("#latestHotDogStatus");
const saveButton = document.querySelector("#saveButton");
saveButton.addEventListener("click", function () {
const textToSave = inputTextField.value;
console.log("I am going to save " + textToSave + " to Firestore");
docRef.set({
hotDogStatus: textToSave
}).then(function() {
console.log("Status Saved!");
}).catch(function(error) {
console.log("Got an error: ", error)
});
})

Either import the entire firebase.js or just firebase-app.js followed by firebase-firestore.js. What's happening here is that the firebase-firestore.js expects firebase-app.js (The core Firebase client) and not the entire library.
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-firestore.js"></script>
Helpful Guide:
https://firebase.google.com/docs/web/setup

If you are using real time database, then add only these two script srcs:
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-database.js"></script>

Getting an Error on console while saving data in firebase firestore

here is my Javascript code. its simply copy from the firebase Docs
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"/></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: ".",
authDomain: ".",
databaseURL: ".",
projectId: ".",
storageBucket: ".",
messagingSenderId: ".[enter image description here][1]"
};
firebase.initializeApp(config);
// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();
function submitCountry(){
console.log('in funtion');
db.collection("cities").doc("asdasLA").set({
name: "Los Angeles",
state: "CasdasA",
stasdaate: "CasdasdasA",
stasaasddaate: "CAasd",
country: "USA"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
}
</script>
when i refresh my page it show the uncaught error.
{code: "app/duplicate-service", message: "Firebase: Firebase service
named 'firestore' already registered (app/duplicate-service).", name:
"firestore", stack: "firestore: Firebase: Firebase service named
'fires…m/firebasejs/5.3.0/firebase-firestore.js:1:326255"} firebase #
index.esm.js:17591 (anonymous) # index.esm.js:41 index.esm.js:17591
Uncaught Error: Cannot instantiate firebase-firestore - be sure to
load firebase-app.js first.
after clicking my save button it shows the error mention below.
when i use the same code on simple project without any JS or Bootstrap it works fine but same code i placed in My real project with Bootstrap it shows errors
[Intervention] Slow network is detected. See for more details.
Fallback font will be used while loading:

By doing
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"/></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
you load the 'firestore' Firebase service twice, see the doc: https://firebase.google.com/docs/web/setup
You should either do
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
or
<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-firestore.js"></script>
Also note that in your code you have mixed versions (i.e. 5.4.2 and 5.3.0). Most probably something to avoid.
Following your comment below, in order to check that it writes correctly to the db, modify you code as follows and just open the HTML page (the set() method will be triggered automatically)
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-firestore.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: ".",
authDomain: ".",
databaseURL: ".",
projectId: ".",
storageBucket: ".",
messagingSenderId: ".[enter image description here][1]"
};
firebase.initializeApp(config);
// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();
db.collection("cities").doc("asdasLA").set({
name: "Los Angeles",
state: "CasdasA",
stasdaate: "CasdasdasA",
stasaasddaate: "CAasd",
country: "USA"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
}
</script>