การใช้ Firebase Authentication กับ Next.js – ล็อกอินง่ายๆ ด้วย Google, Email, GitHub

อยากให้เว็บ Next.js ของเรามีระบบล็อกอินด้วย Google, Email หรือ GitHub ไหม? 🔑
Firebase Authentication เป็นตัวช่วยที่ ฟรี, ใช้งานง่าย, และ ปลอดภัย

วันนี้เราจะมาทำระบบ Sign-up & Login ด้วย Firebase Auth ใน Next.js แบบครบๆ พร้อมโค้ดตัวอย่าง! 🚀

🎯 เราจะทำอะไรบ้าง?

✅ สมัครสมาชิก & ล็อกอินด้วย Email/Password
✅ ล็อกอินด้วย Google, GitHub
✅ จัดการ Session ด้วย Firebase
✅ ใช้ Firebase SDK ใน Next.js

💡 ไม่ต้องทำระบบ Auth เอง! Firebase จัดการให้หมด แค่เขียนโค้ดเชื่อมต่อก็ใช้ได้เลย 🔥

🔥 ตั้งค่า Firebase Authentication

🛠️ 1. สมัคร Firebase และสร้างโปรเจกต์

1. เข้าไปที่ Firebase Console
2. กด "Add Project" → ตั้งชื่อโปรเจกต์ → กด "Continue"
3. กด "Enable Google Analytics" หรือ ปิดก็ได้ → กด "Create Project"

🔑 2. เปิดใช้งาน Authentication

1. ไปที่ "Build" → "Authentication"
2. กด "Get Started"
3. ไปที่ "Sign-in method"
4. เปิดการใช้งาน Email/Password, Google, GitHub

🔗 3. ตั้งค่า Web API Key

1. ไปที่ "Project settings" (ไอคอนรูปเฟือง)
2. ไปที่ "General" → "Your apps" → กด "Web app"
3. ตั้งชื่อแอป → กด "Register app"
4. คัดลอก Firebase Config ไว้

⚙️ ติดตั้ง Firebase SDK ใน Next.js

1. สร้างโปรเจกต์ Next.js

    npx create-next-app my-firebase-auth
    cd my-firebase-auth
    npm install firebase

2. สร้างไฟล์ firebase.js เพื่อเชื่อมต่อ Firebase

📌 โค้ด: lib/firebase.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",
};

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

💡 อย่าลืมเปลี่ยน YOUR_API_KEY เป็นค่าจริงจาก Firebase!

✉️ สมัครสมาชิก & ล็อกอินด้วย Email/Password

📌 โค้ด: pages/auth.js

import { useState } from "react";
import { auth } from "../lib/firebase";
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

export default function AuthPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");

  const signUp = async () => {
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      setMessage("Signup successful!");
    } catch (error) {
      setMessage(error.message);
    }
  };

  const login = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      setMessage("Login successful!");
    } catch (error) {
      setMessage(error.message);
    }
  };

  return (
    <div>
      <h1>Firebase Auth</h1>
      <input type="email" placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={signUp}>Sign Up</button>
      <button onClick={login}>Login</button>
      <p>{message}</p>
    </div>
  );
}

✅ กรอก Email & Password แล้วสมัครหรือล็อกอินได้เลย!

🔵 ล็อกอินด้วย Google

📌 โค้ด: pages/auth.js (เพิ่มปุ่ม Google Sign-in)

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

const loginWithGoogle = async () => {
  try {
    const provider = new GoogleAuthProvider();
    await signInWithPopup(auth, provider);
    setMessage("Login with Google successful!");
  } catch (error) {
    setMessage(error.message);
  }
};

// เพิ่มปุ่ม Login with Google
<button onClick={loginWithGoogle}>Login with Google</button>;

✅ กดปุ่ม → เลือกบัญชี Google → ล็อกอินสำเร็จ!

🛡️ จัดการ Session ด้วย Firebase

Firebase มี onAuthStateChanged ให้เราตรวจสอบว่าผู้ใช้ล็อกอินอยู่หรือไม่

📌 โค้ด: pages/index.js

import { useEffect, useState } from "react";
import { auth } from "../lib/firebase";
import { onAuthStateChanged, signOut } from "firebase/auth";

export default function Home() {
  const [user, setUser] = useState(null);

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

  return (
    <div>
      <h1>Welcome {user ? user.email : "Guest"}</h1>
      {user ? (
        <button onClick={() => signOut(auth)}>Logout</button>
      ) : (
        <a href="/auth">Go to Login</a>
      )}
    </div>
  );
}

✅ ถ้าล็อกอินอยู่จะแสดง Email ของผู้ใช้
✅ ถ้ายังไม่ล็อกอินจะแสดงปุ่ม Go to Login

🚀 ทดสอบระบบ

1. รันเซิร์ฟเวอร์ npm run dev
2. เปิด http://localhost:3000/auth
3. ลองสมัครสมาชิก & ล็อกอิน
4. เช็คหน้าแรก ว่ามี Session หรือไม่?

🎉 เรียบร้อย! Firebase Auth ใช้งานได้แล้ว!

🎯 สรุป

✅ ใช้ Firebase Authentication ใน Next.js ได้ง่ายๆ
✅ รองรับ Email/Password, Google, GitHub
✅ Session จัดการอัตโนมัติ ด้วย Firebase SDK
✅ ใช้ onAuthStateChanged เช็กสถานะผู้ใช้

🚀 พร้อมใช้ในโปรเจกต์จริง! แค่เพิ่ม UI สวยๆ และ Database ก็เปิดให้คนใช้ได้เลย!