firebase Error : FirebaseError: Missing or insufficient permissions - reactjs

Question

so I'm getting these Errors out of nowhere, I worked with the code yesterday and everything was fine.
This is like a social Media platform and
yesterday I could display the Posts, and today I can't. I can still take pictures and save it in the Firebase DB that works fine but it won't post itself at the feed.
This is the Code:
function Profile(props) {
const classes = useStyles();
const [reason, setReason] = React.useState('');
const [open, setOpen] = React.useState(false);
const handleChange = (event) => {
setReason(event.target.value);
};
const handleClose = () => {
setOpen(false);
};
const handleOpen = () => {
setOpen(true);
};
const [userPosts, setUserPosts] = useState([]);
const [user, setUser] = useState(null);
const [following, setFollowing] = useState(false)
useEffect(() => {
const { currentUser, posts } = props;
console.log({ currentUser, posts });
if (props.route.params.uid === firebase.auth().currentUser.uid) {
setUser(firebase.auth().currentUser);
setUserPosts(posts);
}else{
firebase.firestore()
.collection("users")
.doc(props.route.params.uid)
.get()
.then((snapshot) =>{
if(snapshot.exists){
setUser(snapshot.data())
}else{
console.log('does not exist')
}
})
firebase.firestore()
.collection("posts")
.doc(props.route.params.uid)
.collection("userPosts")
.orderBy("creation", "asc")
.get()
.then((snapshot) =>{
let posts = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return{id, ...data}
})
setUserPosts(posts)
})
}
if(props.following.indexOf(props.route.params.uid) > -1){
setFollowing(true);
}else{
setFollowing(false)
}
},[props.route.params.uid, props.following]);
const onFollow = () =>{
firebase.firestore()
.collection("following")
.doc(firebase.auth().currentUser.uid)
.set({
following : [props.route.params.uid]
})
}
const onLogout = () =>{
firebase.auth().signOut();
}
if (user === null) {
return <View />;
}
return (
<div className={classes.div}>
<div >
<Avatar alt="Ana Pädagogin" className={classes.avatar} />
<Typography className={classes.text} > {user.name} </Typography>
<Typography className={classes.text} > {user.email} </Typography>
{props.route.params.uid !== firebase.auth().currentUser.uid ? (
<Container>
{following ? (
<Button
className={classes.btn}
size="large"
variant="outlined"
onClick={() => onUnFollow()}
>Following</Button>
) :
(
<Button
className={classes.btn}
size="large"
variant="outlined"
onClick={() => onFollow()}
>Follow</Button>
)}
</Container>
) : <Button
className={classes.btn}
size="large"
variant="outlined"
onClick={() => onLogout()}
>Logout</Button>}
<Card>
{/* //Verspätung */}
<CardContent>
<Typography variant="h5" className={classes.cardTyp}> Verspätung </Typography>
<Container className={classes.cardContainer}>
<TextField
id="time"
label="Zeit"
type="time"
className={classes.cardTime}
defaultValue="07:30"
InputLabelProps={{
shrink: true,
}}
inputProps={{
step: 300, // 5 min
}}
/>
<Button className={classes.cardBtn}>Absenden</Button>
</Container>
</CardContent>
{/* //Krankenmledungen */}
<CardContent className={classes.cardKrankmeldung}>
<Typography variant="h5" className={classes.cardTyp}> Krankenmledungen </Typography>
<Container className={classes.cardContainer}>
<TextField
id="date"
label="Von"
type="date"
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
<TextField
id="date"
label="bis"
type="date"
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
</Container>
<Button className={classes.cardBtn}>Absenden</Button>
</CardContent>
{/* //Verspätung Abolung*/}
<CardContent>
<Typography variant="h5" className={classes.cardTyp}> Verspätung Abholung</Typography>
<Container className={classes.cardContainer}>
<TextField
id="time"
label="Zeit"
type="time"
defaultValue="07:30"
InputLabelProps={{
shrink: true,
}}
inputProps={{
step: 300, // 5 min
}}
/>
<Button className={classes.cardBtn}>Absenden</Button>
</Container>
</CardContent>
</Card>
</div>
</div>
)
}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser,
posts: store.userState.posts,
following: store.userState.following
});
export default connect(mapStateToProps, null)(Profile);

Answer 1

As Frank van Puffelen pointed out your problem lies in Firebase Firestore security rules.
If you can save post on db, it seems that you have write permission but not read permission on that collection.
You can test how changing security rules affect this problem by first enabling all reads and writes to that collection
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /yourCollectionName/{ID}{
allow read, write: if true;
}
}
}
, and then restricting the collection as you need.
Check these guides to apply needed modifications and best practices to your security rules.
https://firebase.google.com/docs/firestore/security/get-started
https://firebase.google.com/docs/firestore/security/rules-structure