【Firebase】Authentication/認証の使い方｜Googleアカウントとemail・パスワードによるログイン方法を実例で解説

npx create-next-app@latest test-auth

cd test-auth
npm install firebase

mkdir lib
ni lib/firebase.js

NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSy...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-app.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-app-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-app.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:12345:web:abc123

import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore"; //Firestoreの読み込み
import { getAuth } from "firebase/auth";　// Authも使う場合

//process.envで環境変数を読み込む
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Next.jsは開発中に何度もリロードされるため、二重初期化を防ぐこの書き方が推奨されます
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

const db = getFirestore(app);
const auth = getAuth(app);

export { app, db, auth };

"use client";

import { useState, useEffect } from "react";
import { auth } from "@/lib/firebase";
import { 
  signInWithEmailAndPassword, 
  createUserWithEmailAndPassword, 
  signInWithPopup, 
  GoogleAuthProvider, 
  signOut, 
  onAuthStateChanged 
} from "firebase/auth";

export default function AuthPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState(null);

  // 1. ログイン状態の監視
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  // 2. メール/パスワードでサインアップ・ログイン
  const handleEmailLogin = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
    } catch (error) {
      // ユーザーが存在しない場合は新規登録を試みる例
      if (error.code === 'auth/user-not-found') {
        await createUserWithEmailAndPassword(auth, email, password);
      } else {
        alert("エラー: " + error.message);
      }
    }
  };

  // 3. Googleログイン
  const handleGoogleLogin = async () => {
    const provider = new GoogleAuthProvider();
    try {
      await signInWithPopup(auth, provider);
    } catch (error) {
      alert("Googleログインエラー: " + error.message);
    }
  };

  // 4. ログアウト
  const handleLogout = () => signOut(auth);

  if (user) {
    return (
      <div style={{ padding: "20px" }}>
        <h1>こんにちは、{user.displayName || user.email}さん</h1>
        <button onClick={handleLogout}>ログアウト</button>
      </div>
    );
  }

  return (
    <div style={{ padding: "20px", maxWidth: "400px" }}>
      <h2>ログイン / 新規登録</h2>
      
      {/* メールログインフォーム */}
      <form onSubmit={handleEmailLogin} style={{ marginBottom: "20px" }}>
        <input 
          type="email" 
          placeholder="メールアドレス" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
          style={{ display: "block", marginBottom: "10px", width: "100%" }}
        />
        <input 
          type="password" 
          placeholder="パスワード" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
          style={{ display: "block", marginBottom: "10px", width: "100%" }}
        />
        <button type="submit" style={{ width: "100%" }}>メールでログイン</button>
      </form>

      <hr />

      {/* Googleログインボタン */}
      <button onClick={handleGoogleLogin} style={{ width: "100%", marginTop: "20px", backgroundColor: "#4285F4", color: "white", border: "none", padding: "10px" }}>
        Googleでログイン
      </button>
    </div>
  );
}

"use client";

import { useState, useEffect } from "react";

const [データを入れる変数, データを更新する関数] = useState(初期値);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState(null);

import { auth } from "@/lib/firebase";
import { 
  signInWithEmailAndPassword, 
  createUserWithEmailAndPassword, 
  signInWithPopup, 
  GoogleAuthProvider, 
  signOut, 
  onAuthStateChanged 
} from "firebase/auth";

import { useState, useEffect } from "react";
import { 
  signInWithEmailAndPassword, 
  createUserWithEmailAndPassword, 
  signInWithPopup, 
  GoogleAuthProvider, 
  signOut, 
  onAuthStateChanged 
} from "firebase/auth";




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

useEffect(() => {
  ページロード後に実行する処理
  return クリーンアップ関数
}, [監視対象]);

useEffect(() => {
  ページロード後に実行する処理
  return クリーンアップ関数
}, [監視対象]);

const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });

const unsubscribe = onAuthStateChanged(対象のプロジェクト, (ユーザー) => { 実行する処理 });

  // メールログイン・登録
  const handleAuth = async (e) => {
    e.preventDefault();
    try {
      // ログインを試行
      await signInWithEmailAndPassword(auth, email, password);
    } catch (error) {
      // ユーザーがいない場合は新規登録
      if (error.code === 'auth/user-not-found' || error.code === 'auth/invalid-credential') {
        try {
          await createUserWithEmailAndPassword(auth, email, password);
        } catch (err) {
          alert("認証エラー: " + err.message);
        }
      } else {
        alert("エラー: " + error.message);
      }
    }
  };

await signInWithEmailAndPassword(auth, email, password);

await createUserWithEmailAndPassword(auth, email, password);

        } catch (err) {
          alert("認証エラー: " + err.message);
        }
      } else {
        alert("エラー: " + error.message);
      }

await signInWithPopup(auth, new GoogleAuthProvider());

await signInWithRedirect(auth, new GoogleAuthProvider());

if (user) {
  return <div>ログイン済みの画面の内容</div>;
}

return <div>ログイン前の画面の内容</div>;

  // ログイン済みの表示
  if (user) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50">
        <div className="p-8 bg-white shadow-md rounded-lg text-center">
          <p className="text-xl mb-4 font-bold">{user.email} でログイン中</p>
          <button onClick={() => signOut(auth)} className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition">
            ログアウト
          </button>
        </div>
      </div>
    );
  }