Home index.esm2017.js:370 Uncaught (in promise) FirebaseError: Missing or insufficient permissions in ReactJs

Questions

index.esm2017.js:370 Uncaught (in promise) FirebaseError: Missing or insufficient permissions in ReactJs

December 27, 2021

Complete error

Uncaught (in promise) FirebaseError: Missing or insufficient permissions.
    at index.esm2017.js:10913
    at Y.<anonymous> (index.esm2017.js:10865)
    at qb (eventtarget.js:351)
    at D (eventtarget.js:481)
    at Z.wa (webchannelbasetransport.js:369)
    at sc (webchannelbase.js:2193)
    at tc (channelrequest.js:941)
    at M.k.Ia (channelrequest.js:619)
    at M.k.gb (channelrequest.js:596)
    at qb (eventtarget.js:351)

Get
https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel?database=projects%2Fnetflixclone-001%2Fdatabases%2F(default)&gsessionid=Il1qOZrt3xwI9HsitxL5j4_GdibS-ga9&VER=8&RID=rpc&SID=MgLGFVuM420X7FPF_SYqrg&CI=0&AID=0&TYPE=xmlhttp&zx=fhlml28c0sd1&t=1
net::ERR_FAILED 200

Rules(cloud firestone)

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

seedData Code(data.js)

export function seedDatabase(firebase) {
    function getUUID() {
      // eslint gets funny about bitwise
    //    eslint-disable 
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
          const piece = (Math.random() * 16) | 0;
          const elem = c === 'x' ? piece : (piece & 0x3) | 0x8;
          return elem.toString(16);
      });
      /* eslint-enable */
    }
  
    /* Series
      ============================================ */
    // Documentaries
    firebase.firestore().collection('series').add({
      id: getUUID(),
      title: 'Tiger King',
      description: 'An exploration of big cat breeding and its bizarre underworld, populated by eccentric characters.',
      genre: 'documentaries',
      maturity: '18',
      slug: 'tiger-king',
    });
    firebase.firestore().collection('series').add({
      id: getUUID(),
      title: 'Amanda Knox',
      description: 'Amanda Marie Knox is an American woman who spent almost four years in an Italian prison.',
      genre: 'documentaries',
      maturity: '12',
      slug: 'amanda-knox',
    });

firebase.prod.js class

import Firebase from 'firebase/compat/app'
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

// 1) when seeding the database you'll have to uncomment this!
import { seedDatabase } from '../data';

const firebaseConfig = {
    apiKey: "AIzaSyA2UprKTo5hBGbTPRfa6fsdCV51_N5e4x8",
    authDomain: "netflixclone-001.firebaseapp.com",
    projectId: "netflixclone-001",
    storageBucket: "netflixclone-001.appspot.com",
    messagingSenderId: "758173033410",
    appId: "1:758173033410:web:d2fe8782399979e90f6c5b"
  };

  const firebase = Firebase.initializeApp(firebaseConfig);

// 2) when seeding the database you'll have to uncomment this!
seedDatabase(firebase);
// 3) once you have populated the database (only run once!), re-comment this so you don't get duplicate data

export { firebase };

All other pages working fine

>Solution :

Your security rules just do not allow anyone to read or write to your database. If your set your rule to true as shown below, it should allow your to write:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /series/{document} {
      allow read, write: if true;
    }
  }
}

Now the problem is anyone on the internet can read or write to your series collection. It’s hard for me to write rules for this since there’s no detail about who can read/write to this collection. I’d recommend reading about Firestore Security Rules to restrict access to authorized users only.