【2021年最新】React×firebaseにて「Uncaught (in promise) FirebaseError: Missing or insufficient permissions.」エラーが出力される原因とその対策

react×firebaseにてCloudFirestoreを使用した際にエラーが出力された。

エラーの内容はこちら↓

Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

問題と原因

エラー内容を見ると有効なパーミッション（権限）が無いよ！と言われている。

CloudFirestoreのルール設定が必要になるみたい。

それを設定する画面は以下の通りである。

FirebaseConsole→FIrestore Database→ルール

↓FirebaseConsole画面へのURL
ログイン – Google アカウント

これを見るとCloudFirestoreに対してのアクセスが一切許されていない（if false）ということが分かる。

課題と解決方法

アクセスの許可をしてあげれば良いということになる。

解決したコードはこちら↓

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

ただしこちらを設定するとサイトアクセス者の誰もがCloudFirestoreを操作できるということになってしまうため、開発環境のみで使用することをかなり強くオススメします。

本番環境ではログインしてくれたユーザー、特定のコレクションのみアクセスを許可するなど、設定を進めていく必要があるみたいです。

ルールの記法もあるみたいなので、今後紹介していければと思います。

参考URL

Uncaught (in promise) FirebaseError: Missing or insufficient permissions. · Issue #369 · google-home/smart-home-nodejs

Hi, can anyone help me fix this error, I'm having a lot of trouble with firebase

github.com

終わり