Firestoreをウェブアプリで使う

まだドキュメント化されていないっぽいところもあったので、メモしておく。

まず、Cloud Firestoreのルールを次のように変更しておく。

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }
  }
}

肝はallow read, write: if request.auth.uid != null;のところ。 デフォルトだと

allow read, write: false;

となっていて、全ての書き込み/読み込みが制限されているので、 認証したアカウントのみ書き込み/読み込みをさせたい場合は falseをrequest.auth.uid != nullと書き換えなければならない。

次にコードを書かなければならないわけだけど、まだ日本語の スタートガイド には書いてないところがあるっぽくて罠だった。 まずはプロジェクトのトップindex.tsとかに Firestoreの初期化コードを埋め込んでおく必要がある。

const firestore = firebase.firestore();
const firestoreSettings = {
  timestampsInSnapshots: true,
};
firestore.settings(firestoreSettings);

この初期化コードは全てのFirestore`関連のメソッドを実行する前に実行しなければならない。 以上をやっておかないと画像のように怒られる。

あとはデータを書き込めばOK。

database.collection('users').doc('user_id_1').set({
  username: 'test',
  email: 'test@example.com',
});

例ではusersコレクションに

{
  'user_id_1': {
    'username': 'test',
    'email': 'test@example.com'
  }
}

というデータを追加している。