Uncaught Error in Snapshot Listener: Firebaseerror: Missing or Insufficient Permissions
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...
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 ....
}
}
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
