【React】Firebaseの使い方

React

ReactとFirebaseを使う方法を紹介します。

ReactとFirebaseを使う方法

手順1:firebaseでプロジェクト作成

firebaseにログインして、プロジェクトを作成します。

Firebaseのプロジェクト作成方法などが初めての場合、以下はVue.jsですが、Firebaseの部分は全く同じなので参考にしてみてください。

手順2:firebaseをインポート

npm install firebase

手順3:firebaseの設定を記述

create-react-appをしたら、
srcフォルダ直下にfirebase.jsを作成します。
firebaseでプロジェクトを作成すると、設定をコピーできます。

import { initializeApp } from "firebase/app";
  // 3. Authを使うので、以下をインポートする
  import { getAuth, GoogleAuthProvider } from "firebase/auth";
  // 4. firestoreを使うので、以下をインポートする
  import { getFirestore } from "firebase/firestore";

  const firebaseConfig = {
    apiKey: "指定された値",
    authDomain: "指定された値",
    projectId: "指定された値",
    storageBucket: "指定された値",
    messagingSenderId: "指定された値",
    appId: "指定された値",
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);

  // 4. authとfirebaseそれぞれ実行、インスタンス化
  const auth = getAuth(app);
  const provider = new GoogleAuthProvider();
  const db = getFirestore(app);

  // exportしてどこからでも使えるようにする
  export { auth, provider, db};

指定された値という部分は、Firebaseでコピーできます。
最初にFirebaseを初期化します。
もし、Firebaseの認証を使うなら、getAuthとGoogleAuthProviderが必要になります。

もし、firestoreだけ使うなら、getFirestoreをインポートします。

Firebaseでログインする

import { signInWithPopup } from "firebase/auth";
  import React from "react";
  import { useNavigate } from "react-router-dom";
  import { auth, provider } from "../firebase";

  const Login = ({ setIsAuth }) => {
    // ログインしたらホームに飛ばす
    const navigate = useNavigate();
    const loginWithGoogle = () => {
      // Googleでログイン
      signInWithPopup(auth, provider).then((result) => {
        // ログインするとコンソールにresultが表示される
        // console.log(result);

        // ローカルストレージに状態を保持
        localStorage.setItem("isAuth", true);
        setIsAuth(true); //ログインしたらtrueにする

        // homeにとばす
        navigate("/");
      });
    };
    return (
      <div>
        <p>ログインして始める</p>
        <button onClick={loginWithGoogle}>Googleでログイン</button>
      </div>
    );
  };

  export default Login;

signInWithPopupをインポートすると、ポップアップでGoogleのアカウントのサインインでログインすることができます。
firebase.jsで作成したauthとproviderをsignInWithPopupの引数に設定して使用します。

Firebaseでログアウトする

import { signOut } from "firebase/auth";
  import React from "react";
  import { useNavigate } from "react-router-dom";
  import { auth } from "../firebase";

  const Logout = ({ setIsAuth }) => {
    const navigate = useNavigate();
    const logout = () => {
      // ログアウト
      signOut(auth).then(() => {
        // ローカルストレージからisAuth削除
        localStorage.clear();
        setIsAuth(false); //状態を変更
      });
      // ログインにとばす
      navigate("/login");
    };
    return (
      <div>
        <p>ログアウトする</p>
        <button onClick={logout}>ログアウト</button>
      </div>
    );
  };

  export default Logout;

firebase/authからsignOutをインポートします。
firebase.jsで作成したauthをsignOutの引数に設定して使用します。

Firebaseのfirestoreを利用する(追加)

Firebaseで権限を変更する

rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        下をfalseからtrueにする
        allow read, write: if true;
      }
    }
  }

Firebaseのfirestore側で権限が設定されているので、
もし読み書きがfalse担っている場合はtrueにして権限を変更します。

jsファイルに記述する

import { addDoc, collection } from "firebase/firestore";
  import React, { useEffect, useState } from "react";
  import { useNavigate } from "react-router-dom";
  import { auth, db } from "../firebase";

  const CreatePost = ({ isAuth }) => {
    const [title, setTitle] = useState();
    const [postText, setPostText] = useState();

    const navigate = useNavigate();

    const createPost = async () => {
      // console.log(title);
      // console.log(postText);
      // 1. firestoreでpostsコレクション作成
      // 2. 以下処理
      await addDoc(collection(db, "posts"), {
        title: title,
        postText: postText,
        author: {
          username: auth.currentUser.displayName, //firebaseのプロパティ
          id: auth.currentUser.uid,
        },
      });
      // homeに飛ばす
      navigate("/");
    };

    // ログアウト状態でurlに直接アクセスされた場合にリダイレクトする
    useEffect(() => {
      if (!isAuth) {
        navigate("/login");
      }
    });

    return (
      <div>
        <div>
          <h1>記事を投稿する</h1>
          <div>
            <h2>タイトル</h2>
            <input
              type="text"
              placeholder="タイトルを記述"
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>
          <div>
            <h2>内容</h2>
            <textarea
              placeholder="内容を記述"
              onChange={(e) => setPostText(e.target.value)}
            ></textarea>
          </div>
          <button className="postButton" onClick={createPost}>
            投稿する
          </button>
        </div>
      </div>
    );
  };

  export default CreatePost;

firebase/firestoreからaddDocとcollectionをインポートします。
addDocの第一引数に、collectionを設定し、第二引数に追加するオブジェクトを設定します。
collectionの第一引数には、firestoreのdbを指定し、第二引数にコレクション名を指定します。
つまり、addDoc(データベース、コレクション、データ)という順番で指定すればいいので、とてもわかりやすいです。

React

Posted by devsakaso