I am trying to set up Firebase authentication and Firestore in my web application. The user authentication works fine, but when I try to add a document to Firestore, I encounter a 400 error with the message Connection WebChannel transport errored.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Firebase Test</title>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-firestore.js"></script>
</head>
<body>
<script>
// Firebase configuration
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Authentication state observer
firebase.auth().onAuthStateChanged(function(user) {
if (!user) {
console.log("No user is signed in.");
window.location.href = '/login';
} else {
console.log("User is signed in:", user);
// Firestore reference
const db = firebase.firestore();
// Add a document to Firestore
db.collection("test").add({
name: "Test",
time: new Date()
})
.then((docRef) => {
console.log("Document written with ID:", docRef.id);
})
.catch((error) => {
console.error("Error adding document:", error);
});
}
});
</script>
</body>
</html>
In the browser console, I see the following error messages:
User is signed in
firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel?database=projects%2Ftask-aces%2Fdatabases%2F(default)&gsessionid=DtgfmiAfriWSngJvBdKhoCyS1jS1A2ZM_tw0QEdp13s&VER=8&RID=rpc&SID=WOLNzv6Mk5zewit_TB4L4w&CI=0&AID=0&TYPE=xmlhttp&zx=83fwhscdlzxy&t=1:1
Failed to load resource: the server responded with a status of 400 ()
logger.ts:115 [2024-07-24T13:13:01.811Z] @firebase/firestore: Firestore (8.0.0): Connection WebChannel transport errored: pr
I have checked my Firestore rules and ensured that they allow read and write access to authenticated users. Here are my current Firestore rules:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
I have also verified that my Firebase configuration parameters are correct. What could be causing this issue, and how can I resolve it?
Additional Information:
- I am using Firebase SDK version 8.0.0.
- The user authentication workscorrectly, and the onAuthStateChanged callback is triggered as expected.
Any help or guidance would be greatly appreciated!