Firebase Setup Guide
วิธีแก้ไข Error: auth/invalid-api-key
Firebase Configuration Required
คุณต้องตั้งค่า Firebase credentials ใน .env.local ก่อนใช้งาน
1
สร้าง Firebase Project
1. ไปที่ Firebase Console
2. คลิก Add project หรือเลือก project ที่มีอยู่
3. ตั้งชื่อ project (เช่น "butler-app")
4. ทำตามขั้นตอนจนเสร็จ
2
ดึง Firebase Configuration
1. คลิกไอคอนเฟือง ⚙️ → Project Settings
2. เลื่อนลงมาที่ Your apps
3. คลิก Web icon </>
4. ตั้งชื่อ app (เช่น "Butler Web")
5. คลิก Register app
6. คัดลอก configuration values
3
เพิ่มใน .env.local
แก้ไขไฟล์ .env.local ในโปรเจค:
# Firebase Configuration NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyXXXXXXXXX... NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789012 NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789012:web:abcdef... # GraphQL API Endpoint NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://test-api-production-6bbe.up.railway.app/graphql
⚠️ สำคัญ: เปลี่ยนค่าต่างๆ เป็นค่าจริงจาก Firebase Console ของคุณ
4
Enable Authentication Methods
Email/Password
- ไปที่ Authentication → Sign-in method
- คลิก Email/Password
- เปิดใช้งาน Enable
- คลิก Save
Google Sign-In
- คลิก Google provider
- เปิดใช้งาน Enable
- เลือก Support email
- คลิก Save
Facebook Sign-In (Optional)
ดูคู่มือเต็มใน FIREBASE_SETUP_GUIDE.md
5
Restart Development Server
หลังจากแก้ไข .env.local ต้อง restart server:
# หยุด server (Ctrl+C) # เริ่มใหม่ pnpm dev