Firebaseの設定

2023年1月10日 22:05

Firebaseを下記のURLから設定する

URLの画面にアクセスしたら「使ってみる」をクリックする．
次に，「プロジェクトの作成」または「プロジェクトを追加」をクリックして，Firebaseのプロジェクトの設定を行う．

Material UIのインストール

下記のリンクのInstallationに従ってMaterial UIをインストールする．

npm install @mui/material @emotion/react @emotion/styled

または，

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps

マテリアルUIのアイコンをインストール

Firebaseのインストール

npm install firebase

npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

GoogleでのSignInする．

Firebaseの「web」というボタンをクリックする．

FirebaseのAuthenticationを設定する．

任意で好きな認証情報を有効にする．

認証情報の設定をする．

認証の有無を確認するためのhooksをインストールする

npm install --save react-firebase-hooks

エラーの対応

TS2345: Argument of type 'firebase.default.auth.Auth' is not assignable to parameter of type 'import("G:/CLUSTER_UNITY/creators_apartment/__PROGRAMS/react-main/node_modules/@firebase/auth/dist/auth-public").Auth'.
  Property 'beforeAuthStateChanged' is missing in type 'firebase.default.auth.Auth' but required in type 'import("G:/CLUSTER_UNITY/creators_apartment/__PROGRAMS/react-main/node_modules/@firebase/auth/dist/auth-public").Auth'.

下記の書き方を変更する．

const [user] = useAuthState(auth);

const [user] = useAuthState(auth as any);

FireStoreのデータベースを作成する
-> 「データベースの作成」-> ロケーション「asia-northeast3」として設定する
「コレクションの開始で始める」

Firebaseの読み込み書き込みの設定

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

keyのエラー回避

この記事が気に入ったらサポートをしてみませんか？