【React】Firebaseの使い方
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(データベース、コレクション、データ)という順番で指定すればいいので、とてもわかりやすいです。