初めに
今回の目標は、Reactで作る
・認証機能（ログイン・ログアウト）の実装
・PWA化
・ルーティング
を最初からやっていきます。
ここからアプリケーションの開発に取り掛かるようなイメージです。
作業開始
１,アプリケーションの立上げ＋必要なパッケージなどをインストール
２,firebaseの設定＋組み込み
３,確認
1,アプリケーションの立ち上げ準備
npm create vite@latest プロジェクト名 -- --template react
cd プロジェクト名
npm install
npm install vite-plugin-pwa --save-dev
npm install firebase
npm install react-router-dom
これで新規アプリケーションを作り、PWA、firebaseの準備、ルーテイングの準備完了
2,firebaseの設定＋組み込み
①プロジェクトを作成
名前任意、googleアナリティクスはどちらでもOK
②アプリの作成
プロジェクト押下するとアプリの追加ボタンがあるのでそこでアプリを追加（名前任意）
③google認証の設定
Authentication押下
はじめる押下
Sign-in-methodタブになっていることを確認し、追加プロバイダ内の[Google]を押下
[有効にする]、サポートメールを設定し保存(プロジェクトの公開名はそのままでOK)
④Cloud Firestoreの設定
Cloud Firestore押下
データベースの作成押下
本番モードチェックして、次へ
ローケーションを選択（asiaがつくところならどこでもいい気が）有効にするを押下
コレクションを追加を押下（DBみたいなもの）
コレクション名任意、ドキュメントIDは自動ID押下、フィールドがnullでOK
最後にルールタブを押下、allow read, write: if false;のfalseをtrueにする。
※これがないと書き込みが許可されず、保存の際にエラーになる。
⑤Reactに連携する設定
Firebaseの設定ボタン押下して[プロジェクトの設定]画面に遷移
スクロールするとマイアプリの設定があるのでそこのnpmにラジオボタンを選択する。
下にスクロールするとたくさんコードが書かれていると思うのでそこで一旦エディターを開く。
新しく作ったプロジェクトの直下srcの中にfirebase.jsファイルを作成して以下のコードを貼り付ける。
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "アプリごとによって異なる",
authDomain: "アプリごとによって異なる",
projectId: "アプリごとによって異なる",
storageBucket: "アプリごとによって異なる",
messagingSenderId: "アプリごとによって異なる",
appId: "アプリごとによって異なる"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// 追加の記述
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
const db = getFirestore(app);
export {auth, provider, db}; // 別ファイルで使えるようにexport
そしてfirebaseの画面に戻って色々書かれていたコードの６行のみをコピーして書き換える。
（"アプリごとによって異なる"に当たるコードのみを上書きする（firebase.js））
３,確認
project名
|-firebase.js
|-index.html
|-src
|-App.jsx
|-main.jsx
|-assets
|-conponents
|-Login.jsx
|-Top.jsx
LoginとTopのコンポーネントを作成する
import React from "react";
import { getAuth, signInWithPopup, GoogleAuthProvider,
setPersistence, browserLocalPersistence } from "firebase/auth";
import { auth, provider } from "../firebase";
import { useNavigate } from "react-router-dom";
const Login = ({ }) => {
const signInWithGoogle = async () => {
try {
await setPersistence(auth, browserLocalPersistence);
await signInWithPopup(auth, provider);
} catch (error) {
console.error(error);
}
};
return (
<div>
<p>ログインして始める</p>
<button onClick={signInWithGoogle}>Googleでログイン</button>
</div>
);
};
export default Login;
const Top = ({ handleLogout }) => {
return (
<>
<div>Top</div>
<button onClick={handleLogout}>ログアウト</button>
</>
)
}
export default Top
App.jsxにルーティングなど設定
import { useEffect, useState } from 'react'
import './App.css'
import Login from '../components/Login'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Top from '../components/Top'
import { auth } from '../firebase'
function App() {
const [user, setUser] = useState(null);
// 認証状態の監視
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((user) => {
setUser(user);
});
return () => unsubscribe();
}, []);
// ログアウト機能
const handleLogout = () => {
auth.signOut();
};
if (!user) {
return <Login />;
}
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={
<Top
handleLogout={handleLogout}/>
} />
</Routes>
</BrowserRouter>
</>
)
}
export default App
これができたらサーバーを立ち上げて画面で確認
npm run dev
【ルーティング、Google認証の動作確認】
上記コマンドをプロジェクトフォルダの中で実行すると
Local:
Network:
2つのアドレスが出ると思うので
どっちでもOKなので画面で確認。
Googleの認証ができるか？
認証が終わったらTOP画面が出てくるのか？
【PWAの確認】
スマホでネットワーク：のURLにアクセル
ホーム画面に追加をスマホの機能で実行
ホーム画面に出てきたアプリを押下してPWAが実装できているか確認