Firebaseの認証を使ってみた話

要約

Firebase Authenticationを使って、Reactアプリケーションで簡単にユーザー認証を実装しました。この記事では、その手順を詳しく説明します。同じ機能をReact/Spring Bootで実装するよりもはるかに簡単だったので、備忘録として記載します。

やりたいこと

ポートフォリオサイトの管理者認証のために、Firebase Authenticationを使用して1つのユーザーを作成し、そのユーザーで認証すること。

使用した機能

・Firebase Authentication
（※ユーザー作成機能は今回実施しておりません）

現状

Firebaseやfirebasetoolsのインストールおよびログインが済んでいることが前提です。必要であれば、手順1,2を実施後、以下のコマンドを実行してください。

npm install -g firebase-tools
npm install firebase
firebase login
firebase init

手順

1.Firebaseプロジェクトの設定

まず、Firebaseコンソールからプロジェクトを作成し、ウェブアプリを追加します。Firebaseコンソールで表示される設定情報（APIキーやプロジェクトIDなど）をコピーしておきます。

2.Firebaseの設定ファイルを作成

次に、Firebaseの設定を行います。
・firebase-config.ts

import { initializeApp } from "firebase/app";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

// Firebaseプロジェクトの設定
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth, signInWithEmailAndPassword };

3.ログインコンポーネントの作成

・Login.tsx

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { auth, signInWithEmailAndPassword } from "../../firebase-config"; // firebase-configからauthをインポート

const Login: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const navigate = useNavigate();

  useEffect(() => {
    // CSRFトークンの取得などの初期設定
  }, []);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      // 認証処理
      const userCredential = await signInWithEmailAndPassword(auth, username, password);
      const user = userCredential.user;
      if (user) {
        localStorage.setItem("isAuthenticated", "true");
        localStorage.setItem("username", username); // ユーザー名などの情報を保存
        navigate("/admin");
      } else {
        setError("ログインに失敗しました");
      }
    } catch (error) {
      console.error("ログインエラー:", error);
      setError("ログインに失敗しました");
    }
  };

  return (
    <div className="login-container">
      <div className="login-form">
        <h1>ログイン</h1>
        {error && <p>{error}</p>}
        <form onSubmit={handleLogin}>
          <div className="form-group">
            <label htmlFor="username">ユーザー名</label>
            <input
              type="text"
              id="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />
          </div>
          <div className="form-group">
            <label htmlFor="password">パスワード</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword.next(value)}
              required
            />
          </div>
          <div className="form-group">
            <button type="submit">ログイン</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Login;

4.ユーザの作成

Firebaseコンソールを開きます。
https://console.firebase.google.com/

左のタブにある、Authenticationをクリック
ユーザタブにある「ユーザを追加」を押下して設定

5.動作確認

npm start 

ログイン画面で認証すると認証が完了です！！！
isAuthenticatedをtrueにセットしてReact上で認証されているステータスにできます！

 try {
      // 認証処理
      const userCredential = await signInWithEmailAndPassword(auth, username, password);
      const user = userCredential.user;
      if (user) {
        localStorage.setItem("isAuthenticated", "true");
        localStorage.setItem("username", username); // ユーザー名などの情報を保存
        navigate("/admin");
      } else {
        setError("ログインに失敗しました");
      }
    } catch (error) {
      console.error("ログインエラー:", error);
      setError("ログインに失敗しました");
    }
  };

まとめ

Firebase Authenticationを使ってReactアプリケーションに認証機能を実装する方法を説明しました。同じ機能をSpring Bootで実装するよりもはるかに簡単で、迅速に開発できました。Firebaseの強力な機能と使いやすさを活用して、さらに効率的に開発を進めていきましょう。

今後もFirebaseを活用し、開発の進捗や新たな発見を共有していきます。お楽しみに！

作成したポートフォリオはこちら↓
https://kaneharaweb.com/