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; 2 Answers
If your using your own firestore, goes to the admin console and change database rule to to:
allow read, write: if true;
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 .... } } 
