firebase - snapshot listener: FirebaseError: Missing or insufficient permissions

Question

I have a problem with Fairbase that I am unable to resolve. I want to use Firebase in React, but I get this error: "snapshot listener: FirebaseError: Missing or insufficient permissions."

This is the command of Fairbase I ran:

firebase.js:

import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIz********cVU",
    authDomain: "so******.com",
    projectId: "soc*****468b",
    storageBucket: "so******ot.com",
    messagingSenderId: "12*****87",
    appId: "1:12*****12",
    measurementId: "G*****X1"
};

firebase.initializeApp(firebaseConfig);
export default firebase;

chat component - here I use firebase:

class chat extends Component {
    
    componentDidMount() {
        this.test();
    }


    test = () => {
        const ref = firebase.firestore().collection("users");
        ref.onSnapshot((querySnapshot) => {
            const items = [];
            querySnapshot.forEach((doc) => {
                items.push(doc.data());
            })
            console.log(items)
        })

    }

    render() {

        return (

            <section>
               <div>CHAT</div>
            </section>
        );
    }
}

And these are the rules I currently have in Firebase

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

When I changed the rules like this:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      //allow read, write: if request.auth != null;
      allow read, write: if true;
    }
  }
}

It worked but I really do not want it to be open, I do not want anyone to be able to access my firebase.

I'd love to help, I've been sitting on this for a few days, please.

Thank you

Answer 1

You have initialized the app with your firebaseConfig but that does not mean that you are authenticated to make requests yet and since your firebase rules are stating that read and write is only enabled if request.auth != null, meaning if you have an authenticated user making the request, you will get locked out of Firestore.

So in order to fix that you need to implement authentication with Firebase to be able to query your Firestore, I advise you to take a look at the example for doing sign-in with email and password in this documentation, there are also links in that same documentation for Google sign-in, Facebook sign-in, Anonymous sign-in and others, so you can check which one will suit better your app's needs.