Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions

Question

I'm trying get data of posts displayed from firebase by using onSnapshot listener but its showing this Firebase Error. Could someone help with this error

App.js:

import { useState, useEffect } from 'react';
import './App.css';
import loggo from './icons/loggo.svg';
import Post from './Components/Post.js';
import { db } from './firebase';

function App() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    db.collection('posts').onSnapshot(snapshot => {
      setPosts(snapshot.docs.map(doc => doc.data()));
    })
  }, []);

  return (
    <div className="App">
      <div className="app_header">
        <img className="header_Image" src={loggo} alt="insta" />
      </div>
      {
        posts.map(post => (
          <Post username={post.username} caption={post.caption} imageUrl={post.imageUrl} />
        ))
      }
    </div >
  );
}
export default App;

Answer 1

If your using your own firestore, goes to the admin console and change database rule to to:

allow read, write: if true;

Answer 2

snapshot listener needs at minimum read permission. (which includes both get and list) so your rules for "post" collection should be at at minimum :

allow read;

since it is a post collection I assume you want to allow write permission to only authenticated users :

allow write : if request.auth != null;

so all together would be :

 rules_version = '2';
 service cloud.firestore {
    match /databases/{database}/documents {

      //A read  is : get and list, 
      //A write is : create, update, and delete. you can separate them if you want

      match /posts/{post} {  //this applies to post collection
         allow read;
         allow write : if request.auth != null;
      }

      // other collections ....
    }
 }