We Keep Coding

Difficulties with CORS access and writing data into firebase firestore

I am trying to use firestore (which is new for me) in javascript but I am facing a CORS error and I am a little bit stucked. I just want my js code to send data from input to firebase firestore. But CORS access isn't allowing me to do this. And no data is written in the firebase firestore. There are only CORS errors in the console. I would be glad if anyone helps me with this issue
<form id="contactForm" action="#" class="bg-light p-4 p-md-5 contact-form">
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<input type="text" id="email" class="form-control" placeholder="Your Email">
</div>
<div class="form-group">
<input type="text" id="subject" class="form-control" placeholder="Subject">
</div>
<div class="form-group">
<textarea name="" id="message" cols="30" rows="7" class="form-control" placeholder="Message"></textarea>
</div>
<div class="form-group">
<input type="submit" onclick="writeData()" value="Send Message" class="btn btn-primary py-3 px-5">
</div>
</form>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-storage.js"></script>
<script>
var firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXX",
measurementId: "XXXXXXXXXXXXXXXXXXXXX"
};
firebase.initializeApp(firebaseConfig);
// Initialize Firebase
firebase.analytics();
var db = firebase.firestore();
function writeData() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let subject = document.getElementById("subject").value;
let message = document.getElementById("message").value;
db.collection("FormMessage").set({
name: name,
email: email,
subject: subject,
message: message
})
.then(function () {
console.log("Document successfully written!");
})
.catch(function (error) {
console.error("Error writing document: ", error);
});
}
</script>

For me, i got this error in my vite dev server with vue. This was because of my https everywhere extension. If you have an extension like this, try to disable it.

Uncaught TypeError: submitBtn.addEventListner is not a function

<form class="modal-content" id="bookingForm">
<div class="formContainer">
<h1>Booking Form</h1>
<p>Please fill in this form to Book The Trip.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required id="email">
<label><b>Package</b></label>
<input type="text" id="packageFields" name="teste2">
<label for="psw"><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="name" required id="name">
<label for="psw-repeat"><b>Phone No.</b></label>
<input type="tel" placeholder="Enter Phone No." name="psw-repeat" required id="phone">
<label for="psw-repeat"><b>Date Of Journey</b></label>
<input type="date" placeholder="Enter Phone No." name="psw-repeat" required id="date">
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="submit" class="signupbtn">Confirm Booking</button>
<button type="button" onclick="document.getElementById('bookingForm').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</div>
</form>
</script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="/__/firebase/7.14.5/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="/__/firebase/7.14.5/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="/__/firebase/7.14.5/firebase-auth.js"></script>
<script src="/__/firebase/7.14.5/firebase-firestore.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="bookingSubmit.js"> </script>
This Is The Html And The JavaSript Is Given Below:
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "hxxxxxxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxx.firebaseio.com",
projectId: "xxxxxxxxx",
storageBucket: "xxxxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxx",
appId: "x:xxxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxx",
measurementId: "G-xxxxxxxxxx"
};
//reference messages collection
var firestore = firebase.firestore();
const submitBtn = document.querySelector(".signupbtn");
let email = document.querySelector('#email');
let packageFields = document.querySelector('#packageFields');
let name = document.querySelector('#name');
let phone = document.querySelector('#phone');
let date = document.querySelector('#date');
const db = firestore.collection("BookingData");
submitBtn.addEventListner('click', function(){
let userEmailInput = email.value;
let userPackageInput = packageFields.value;
let userNameInput = name.value;
let userPhoneInput = phone.value;
let userDateInput = date.value;
db.doc()
.set({
email:userEmailInput,
package:userPackageInput,
name:userNameInput,
phone:userPhoneInput,
date:userDateInput
})
.then(function(){
console.log("Data Saved");
})
.catch(function(error){
console.log(error);
});
});
I am trying to Store The Data Of My Contact Form in firebase. But Its Giving The Error
Uncaught TypeError: submitBtnis null
at bookingSubmit.js:27
I Am putting the script at the end then why is it giving this error?
What is its cause and how to solve it...??

You should add an id on your element rather than a class.
<button type="submit" id="signupbtn" class="signupbtn">Confirm Booking</button>
const submitBtn = document.querySelector("#signupbtn");
Also there is a typo in the addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
It should be
submitBtn.addEventListener('click', function(e){
//Remove default form submit behaviour.
e.preventDefault();
//...
and not
submitBtn.addEventListner('click', function(){ //Typo in addEventListner

You are using:
const submitBtn = document.querySelector("#signupbtn");
to select
<button type="submit" class="signupbtn">Confirm Booking</button>
You either need to select based on class name: ".signupbtn" or set an ID and not a class on the element.

Firebase: not working (.auth() is not a function, firebase is not declared, etc)

My renderer.js code:
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "some API key",
authDomain: "some auth domain",
databaseURL: "some database url",
projectId: "some project id",
storageBucket: "some storagebucket",
messagingSenderId: "some messaging sender id",
appId: "some app id",
measurementId: "some measurement id"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var bcont = document.getElementById('bcont');
bcont.addEventListener('click',function(){
var firstname = document.getElementById('fn').value;
var lastname = document.getElementById('ln').value;
var email = document.getElementById('email').value;
var password = document.getElementById('pass1').value;
var cpassword = document.getElementById('pass2').value;
firebase.auth().createUserWithEmailAndPassword(email,password).catch(function(error){
if(error != null){
console.log(error.message);
return;
}
alert('Success');
})
});
index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<link rel="stylesheet" href="../assets/css/main.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<div class="bbg">
<div class="full">
<div class="left">
<div>
<t id="welcome">Welcome to</t>
<div>
<t id="title">This Thing</t>
<br>
<br>
<t id="signuptitle">Signup</t>
<img id="fimg" src="../assets/images/fpimg.png">
</div>
</div>
</div>
<div class="right">
<div class="wbg">
<div>
<br/>
<t class="formtext">First Name</t>
</div>
<input id="fn" class="input">
<br/>
<div>
<t class="formtext">Last Name</t>
</div>
<input id="ln" class="input">
<br/>
<div>
<br/>
<t class="formtext">Email Address</t>
</div>
<input id="email" class="input">
<br/>
<div>
<br/>
<t class="formtext">Password</t>
</div>
<input id="pass1" class="input" type="Password">
<br/>
<div>
<t class="formtext">Confirm Password</t>
</div>
<input id="pass2" class="input" type="Password">
<br/>
<br/>
<button id="bcont" class="b_cont"><b>Continue</b></button>
<br/>
<br/>
<br/>
<t class="textfooter">Already have an account? <t class="a-login"> Login</t></t>
</div>
<!--<script>
function continueCheck(){
if(document.getElementById('pass1').textContent != document.getElementById('pass2').textContent){
document.getElementById('pass1').style.borderColor = '#e60200';
document.getElementById('pass2').style.borderColor = '#e60200';
}
}
</script>-->
</div>
</div>
</div>
<!-- You can also require other files to run in this process -->
<script src="renderer.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
</body>
</html>
I get the error in the console of Uncaught Reference Error: firebase is not defined.
How would I be to fix this?
Also:
How can I store first and last name as well as email + password?
Please note: this is the correct link and I have only the Email/Password sign-in method enabled.
Not sure what to do here, any help would be appreciated!

You should put your includes in the right order:
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
<script src="renderer.js"></script>
So renderer.js knows firebase exists.

Firebase Authentication redirecting to a blank page after sign in

Apps script sidebar redirects to a blank page after authenticating with Firebase Auth.
My Firebase Auth Implementation redirects to a blank page on apps script sidebar.
I implemented the code below from the official guide
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Firebase Auth App</title>
<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "<project-id>.firebaseapp.com",
databaseURL: "https://<project-id>.firebaseio.com",
projectId: "<project-id>",
storageBucket: "<project-id>.appspot.com",
messagingSenderId: "6073*******"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<h2>Login Form</h2>
<form action="">
<div class="container">
<label for="email"><b>Email Address</b></label>
<input type='text' placeholder='Enter Username' id='email' value='johndoe#foo.bar'>
<br>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" id="psw" required>
<br>
<button onclick="login()">Login</button>
</div>
</form>
<script>
function login() {
var email = document.getElementById("email").value;
var password = document.getElementById("psw").value;
if (email.length < 3 || password.length < 8) {
return
}
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
});
}
</script>
</body>
</html>
is there an explanation for this behavior?

using Javascript and firebase in angular

i'm trying to use firebase in angular but don't know why my localhost cannot function with my javascript.
It functions well if i put all the code in index.html but i just wondered why it cannot function in my contact.component.html when i using localhost.
looks like my javascript cannot function in html
enter image description here
//here is my main.js
// Initialize Firebase (ADD YOUR OWN DATA)
var config = {
apiKey: "...",
authDomain: "listing-ed9ac.firebaseapp.com",
databaseURL: "https://listing-ed9ac.firebaseio.com",
projectId: "listing-ed9ac",
storageBucket: "listing-ed9ac.appspot.com",
messagingSenderId: "122342013620"
};
firebase.initializeApp(config);
// Reference messages collection
var messagesRef = firebase.database().ref('messages');
// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);
// Submit form
function submitForm(e) {
e.preventDefault();
// Get values
var name = getInputVal('name');
var company = getInputVal('company');
var email = getInputVal('email');
var phone = getInputVal('phone');
var message = getInputVal('message');
// Save message
saveMessage(name, company, email, phone, message);
// Clear form
document.getElementById('contactForm').reset();
}
// Function to get get form values
function getInputVal(id) {
return document.getElementById(id).value;
}
// Save message to firebase
function saveMessage(name, company, email, phone, message) {
var newMessageRef = messagesRef.push();
newMessageRef.set({
name: name,
company: company,
email: email,
phone: phone,
message: message
});
}
//here is my contact.component.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try</title>
</head>
<body>
<section id="showcase">
<div class="container">
<h1>
Contact Us
</h1>
</div>
</section>
<html>
<body>
<div class="container">
<h1 class="brand"><span>Car</span> Rental</h1>
<div class="wrapper animated bounceInLeft">
<div class="company-info">
<h3>Car Rental</h3>
<p>
Get in touch with us via the Contact Form. Car Rental will be in touch with you shortly.
</p>
</div>
<div class="contact">
<h3>Email Us</h3>
<div class="alert">Your message has been sent</div>
<form id="contactForm">
<p>
<label>Name</label>
<input type="text" name="name" id="name" required>
</p>
<p>
<label>Company</label>
<input type="text" name="company" id="company">
</p>
<p>
<label>Email Address</label>
<input type="email" name="email" id="email" required>
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone" id="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5" id="message"></textarea>
</p>
<p class="full">
<button type="submit">Submit</button>
</p>
</form>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="main.js"></script>
</body>
</html>
<section id="showcase2">
<div class="container">
<p>
HAWK RENT A CAR (M) SDN BHD
</p>
<p>
No 4 Jalan SS13/3E,Subang Jaya Industrial Estate, 47500 Subang Jaya,Selangor Darul Ehsan
</p>
<p>
Tel: 1300886488(Within Malaysia) / +603-56316488
</p>
<p>
Fax : +603-56356466
</p>
<p>
Email: reservations#hawkrentacar.com.my
</p>
</div>
</section>
</body>
</html>
<footer>
<p>Copyright © 2017 Designed by ckyong </p>
</footer>

It old question but lot of newbies to Angular (2+) might face this.
The code snippets shared only work with pure JavaScript (vanilla JavaScript).
For Angular the different way, install angularfire2 module, and proceed. The syntax is different in the angularfire2 module.
If I am right the TypeScript using angularfire2 will be converted to equivalent JavaScript (similar to your code you shared)