firebaseの初期設定 @yukilulu0229

プロジェクトを追加

• プロジェクト名決める

• アナリティクスはなくてもよい

ウェブアプリに 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 };