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

user_14723594 0
Viewed 4936

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;
web-development-server firebase reactjs javascript
2 Answers

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

allow read, write: if true;

user_31263230

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 ....
    }
 }
user_109735140
Related