skip to Main Content

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:

  1. I am using Firebase SDK version 8.0.0.
  2. The user authentication workscorrectly, and the onAuthStateChanged callback is triggered as expected.

Any help or guidance would be greatly appreciated!

2

Answers


  1. Chosen as BEST ANSWER

    I found the issue myself.

    My problem was that I changed the name of the firestore database from (default) to something else. I have now restored the name of the database to (default) and I don't have this issue again.


  2. @M4trix Dev

    Where was the default database reference located?

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search