プロジェクトを追加

プロジェクト名決める
アナリティクスはなくてもよい

ウェブアプリに Firebase を追加

webをクリック
名前を決める
このアプリの Firebase Hosting デプロイするならチェック入れる

Authentication

必要ならここを設定

使いたいAuthを選択
有効にする
プロジェクトのサポートメールを選択

Cloud Firestoreを使う

ロケーションを選択
テストモードで開始する
ルール設定でデータを保存する期間を変える場合はif文以降を消す

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {

    // This rule allows anyone with your Firestore database reference 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
    // all client requests to your Firestore database will be denied until you Update
    // your rules
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2024, 2, 25);
    }
  }
}

: if request.time < timestamp.date(2024, 2, 25); の部分

プロジェクトの設定

SDK の設定と構成の設定の通りやる

npm install firebase でインストール

src/firebase.tsを作成
次に Firebase を初期化し、使用するプロダクトの SDK の利用を開始します。をコピーして貼る
そのままGitHubにあげると危ないのでdot.envを用意する
dbの設定
Google認証の設定
exportする

firebase.ts

// dbの設定
import { getFirestore } from "firebase/firestore/lite";
// Google認証の設定
import { getAuth, GoogleAuthProvider } from "firebase/auth";

......

// dbの設定
const db = getFirestore(app);
// Google認証の設定
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
// exportする
export { db, auth, provider };