知識ゼロからWEB開発までの道 vol.2 【認証機能】

はじめに

この記事では、React知識ゼロの筆者が、Reactを用いたWEBサービスを開発するまでの手順を公開しています。
筆者のプログラミングスキルはPythonを高専教育で習得したレベルです。
特別な知識はありません。

vol.1はこちら⬇︎
https://zenn.dev/acntechjp/articles/ec9beb5521ef4a

認証機能の追加

アプリにGoogleの認証機能を構築します。
今回はFirebaseを利用して追加することにします。

あなたは優秀なWEB開発エンジニアです。
ReactのWEBアプリを開発しています。
FirebaseのGoogle認証機能を追加したいです。
初心者にもわかりやすく、手順を丁寧に具体的に記述して下さい。

※以下ChatGPT4oの回答を引用

Firebaseプロジェクトを作成する

1. Firebase Consoleにアクセス
   Firebase Console にアクセスし、Googleアカウントでログインします。
2. 新しいプロジェクトを作成
   • 「プロジェクトを追加」をクリック。
   • プロジェクト名を入力（例: my-app）。
   • 「続行」をクリックし、必要に応じてGoogle Analyticsを設定後、プロジェクトを作成します。

FirebaseでGoogle認証を有効化

1. プロジェクト設定を開く
   Firebaseコンソールの左側メニューから「認証」をクリックし、「Sign-in Method」タブを開きます。
2. Google認証を有効化
   • 「プロバイダを追加」で「Google」を選択。
   • 「有効」に切り替え、必要であればプロジェクトのサポートメールアドレスを設定。
   • 「保存」をクリック。

Firebase SDKをReactアプリに設定

1. Firebase SDKをインストール
   ターミナルを開き、以下のコマンドを実行します。

bash

npm install firebase

2. Firebase設定ファイルを追加
   Firebaseコンソールの「プロジェクト設定」→「SDKの設定と構成」から、Firebase設定オブジェクトをコピーします。
3. Firebaseの初期化
   srcフォルダにfirebase-config.jsを作成し、以下のコードを記述します。

firebase-config.js

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

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

// Firebaseを初期化
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Google認証のロジックを実装

1. ログイン用の関数を作成
   srcフォルダにauth.jsを作成し、以下を記述します。

auth.js

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "./firebase-config";

const provider = new GoogleAuthProvider();

export const signInWithGoogle = async () => {
  try {
    const result = await signInWithPopup(auth, provider);
    console.log(result.user); // ログインしたユーザー情報
  } catch (error) {
    console.error("Googleログインエラー:", error);
  }
};

ReactコンポーネントでGoogle認証を呼び出す

1. ログインボタンを作成
   HomeコンポーネントにGoogle認証ボタンを追加します。

home.js

import React from "react";
import { signInWithGoogle } from "../auth";

const Home = () => {
  return (
    <div>
      <h1>ホームページ</h1>
      <button onClick={signInWithGoogle}>Googleでログイン</button>
    </div>
  );
};

export default Home;

2. アプリを起動
   ターミナルで以下を実行してアプリを起動します。

bash

npm start

3. ログイン動作を確認
   アプリのホームページにアクセスし、「Googleでログイン」ボタンをクリックすると、Googleのログイン画面が表示され、認証が完了します。

認証状態を管理（オプション）

ユーザーのログイン状態を表示するには、onAuthStateChangedを使用します。

javascript

import React, { useEffect, useState } from "react";
import { auth } from "../firebase-config";
import { onAuthStateChanged } from "firebase/auth";

const Home = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  return (
    <div>
      <h1>ホームページ</h1>
      {user ? (
        <div>
          <p>こんにちは、{user.displayName}さん！</p>
        </div>
      ) : (
        <button onClick={signInWithGoogle}>Googleでログイン</button>
      )}
    </div>
  );
};

export default Home;

これで、ReactアプリにFirebaseのGoogle認証機能を追加できます！

実装してみた

ひとまず上記手順をベースに構築してみましたが、エラーでうまく動きませんでした。
手順通り作ったファイルの場所が良くなかったようです。
その場合は「動かないからフォルダ構成教えて」と聞くと教えてくれます。
不明点やエラーは適宜ChatGPTに聞いて、無事認証機能の追加ができました。
フッターも作成し、前回に比べてそれっぽい見た目になりました。

もちろんログアウトもできます。

最後に

認証機能の追加だけだとパッとしませんが、今後この機能を利用してアプリの利用者に制限をかける予定です。
せっかく認証機能追加したので、次は投稿フォームの作成をします。
指定したアカウントのみ投稿を可能にするようにする予定です。
次回に続きます。

過去の投稿

• 知識ゼロからWEB開発までの道 vol.1 【環境構築とサンプル作成】