FirebaseError: Missing or insufficient permissions with react js

Question

firebase permission denied with these rules: This rule allows anyone on the internet to view, edit, and delete all data in your Firestore database. It is useful for getting started, but it is configured to expire after 30 days because it leaves your app open to attackers. At that time, all client requests to your Firestore database will be denied. Make sure to write security rules for your app before that time, or else your app will lose access to your Firestore database

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

    match /{document=**} {
      allow read, write: if false;
        }
      }
   } 

screen shot of browser console

output of the redux state in h3 tag

code of reducer:

import { GET_ALL_SCREAM, LOADING } from "../types";
import { db } from "../../firebase/config";
const initialState = {
  data: [],
  loading: false,
  error: {},
};
export default function (state = initialState, action) {
  switch (action.type) {
    case GET_ALL_SCREAM:
      db.collection("screams")
        .get()
        .then((data) => {
          let screams = [];
          data.forEach((doc) => {
            screams.push({
              id: doc.id,
              ...doc.data(),
            });
          });
          return { ...state, loading: false, date: screams };
        })
        .catch((err) => {
          console.error(err);
          return { ...state, loading: false, error: { ...err.response } };
        });
        console.log("error is in somewhere");
        return { ...state, loading: false, error: { "error": "something went wrong" } };
    case LOADING:
      return { ...state, loading: true };
    default:
      return state;
  }
}

Answer 1

Makes the changes in your database rules like the following one.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}