DEV Community

Cover image for Cara Menggunakan Firebase API: Panduan Integrasi Lengkap (2026)
Walse
Walse

Posted on • Originally published at apidog.com

Cara Menggunakan Firebase API: Panduan Integrasi Lengkap (2026)

Anda sedang membangun aplikasi. Pengguna perlu masuk. Data perlu disinkronkan secara real-time. Berkas perlu penyimpanan. Anda bisa menyiapkan server, mengonfigurasi basis data, dan mengelola infrastruktur selama berminggu-minggu. Atau Anda bisa menggunakan Firebase.

Coba Apidog hari ini

Firebase mendukung lebih dari 1,5 juta aplikasi termasuk The New York Times, Duolingo, dan Alibaba. Pengembang memilihnya karena menghilangkan kompleksitas backend. Fokus pada fitur, bukan pemeliharaan server. Namun, API Firebase punya keunikan: alur autentikasi sering membingungkan, aturan basis data rawan jebakan, dan Cloud Functions membutuhkan pemahaman trigger yang tepat.

Panduan ini membahas implementasi nyata integrasi Firebase, termasuk kode, tips, dan jebakan yang harus dihindari.

Artikel ini akan membahas autentikasi, operasi basis data, Cloud Functions, dan penyimpanan secara praktis. Anda akan mendapatkan contoh kode siap pakai dan strategi menghindari masalah di lingkungan produksi.

💡Pengujian API Firebase menjadi lebih mudah dengan alat klien API yang tepat. Apidog memungkinkan Anda mengatur endpoint, menguji alur autentikasi, dan berbagi koleksi dengan tim. Kami akan menunjukkan di mana alat ini cocok dalam alur kerja Anda.

Apa Itu API Firebase dan Mengapa Itu Penting?

Firebase adalah kumpulan layanan backend yang diakses melalui SDK terpadu dan endpoint REST, bukan satu API tunggal.

Layanan Inti Firebase

Layanan Tujuan Jenis API
Autentikasi Masuk pengguna dan identitas SDK + REST
Basis Data Firestore Basis data dokumen NoSQL SDK + REST
Basis Data Realtime Sinkronisasi real-time JSON SDK + REST
Cloud Storage Penyimpanan file dan CDN SDK + REST
Cloud Functions Komputasi tanpa server CLI Deployment
Hosting Hosting web statis CLI Deployment
Cloud Messaging Notifikasi push HTTP v1 API

Kapan Menggunakan Firebase

Gunakan Firebase jika:

  • Membutuhkan sinkronisasi real-time (chat, kolaborasi, live update)
  • Ingin tanpa server (tanpa maintenance infrastruktur)
  • Membuat aplikasi mobile/web (SDK multi-platform)
  • Butuh dukungan offline (SDK handle caching)
  • Ingin autentikasi built-in (Google, Apple, email, telepon)

Jangan gunakan Firebase jika:

  • Membutuhkan kueri relasional kompleks (lebih cocok PostgreSQL)
  • Ada persyaratan data residency yang ketat
  • Butuh SQL penuh
  • Biaya pada skala besar lebih penting dari kecepatan development

Arsitektur API Firebase 

┌─────────────────────────────────────────────────────────┐
│                    Aplikasi Anda                         │
├─────────────────────────────────────────────────────────┤
│  Firebase SDK (Klien)                                    │
│  - Otomatis menangani token autentikasi                  │
│  - Mengelola cache offline                               │
│  - Pendengar real-time                                   │
└─────────────────────────────────────────────────────────┘
                          │
                          │ HTTPS + WebSocket
                          ▼
┌─────────────────────────────────────────────────────────┐
│                   Backend Firebase                       │
├──────────────┬──────────────┬──────────────┬────────────┤
│   Layanan    │  Basis Data  │   Layanan    │ Fungsi     │
│    Auth      │   Firestore  │   Penyimpanan│  Runtime   │
└──────────────┴──────────────┴──────────────┴────────────┘
Enter fullscreen mode Exit fullscreen mode

SDK klien mengabstraksi HTTP. Semua operasi mentranslasi ke REST API dengan autentikasi JWT.

Autentikasi Firebase: Penyiapan Lengkap

Autentikasi adalah fondasi integrasi Firebase. Lakukan langkah berikut:

Langkah 1: Buat Proyek Firebase

  1. Buka Firebase Console
  2. Klik “Tambahkan proyek”, isi nama proyek (tanpa spasi)
  3. (Opsional) Aktifkan Google Analytics
  4. Klik “Buat proyek”, tunggu provisioning selesai

Langkah 2: Daftarkan Aplikasi

Web:

const firebaseConfig = {
  apiKey: "AIzaSyDxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abc123def456"
};
import { initializeApp } from 'firebase/app';
const app = initializeApp(firebaseConfig);
Enter fullscreen mode Exit fullscreen mode

iOS:

Unduh GoogleService-Info.plist dan tambahkan ke Xcode project.

Android:

Unduh google-services.json ke folder app/, tambahkan pada build.gradle (lihat kode pada artikel).

Langkah 3: Aktifkan Metode Autentikasi

  • Di Firebase Console → Authentication → Sign-in method
  • Aktifkan Email/Password, Google, Apple, atau Telepon sesuai kebutuhan

Langkah 4: Implementasi Alur Autentikasi

Pendaftaran Email/Password:

import {
  createUserWithEmailAndPassword,
  getAuth,
  updateProfile
} from 'firebase/auth';

const auth = getAuth(app);

async function signUp(email, password, displayName) {
  try {
    const userCredential = await createUserWithEmailAndPassword(
      auth,
      email,
      password
    );
    await updateProfile(userCredential.user, { displayName });
    return userCredential.user;
  } catch (error) {
    // Handle error dengan switch error.code
  }
}
Enter fullscreen mode Exit fullscreen mode

Masuk Email/Password:

import { signInWithEmailAndPassword, signOut } from 'firebase/auth';

async function signIn(email, password) {
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  return userCredential.user;
}
async function logOut() {
  await signOut(auth);
}
Enter fullscreen mode Exit fullscreen mode

Masuk Google (Web):

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

async function signInWithGoogle() {
  const provider = new GoogleAuthProvider();
  provider.addScope('email');
  provider.addScope('profile');
  const result = await signInWithPopup(auth, provider);
  return result.user;
}
Enter fullscreen mode Exit fullscreen mode

Langkah 5: Proteksi Route dengan Status Autentikasi 

import { onAuthStateChanged } from 'firebase/auth';

onAuthStateChanged(auth, (user) => {
  if (user) {
    window.location.href = '/dashboard';
  } else {
    window.location.href = '/login';
  }
});
Enter fullscreen mode Exit fullscreen mode

Kesalahan Umum Autentikasi

  • Tidak menangani refresh token: Selalu verifikasi token pada setiap request server.
  • Mengekspos kredensial admin di klien: Jangan pernah membundel kunci akun layanan di aplikasi klien.
  • Melewatkan verifikasi email: 
import { sendEmailVerification } from 'firebase/auth';
async function sendVerificationEmail(user) {
  await sendEmailVerification(user);
}
Enter fullscreen mode Exit fullscreen mode

Basis Data Firestore: Operasi dan Kueri

Firestore adalah NoSQL database. Data disimpan sebagai dokumen dalam koleksi.

Struktur Data 

proyek-anda (root)
└── users (koleksi)
    ├── userId123 (dokumen)
    │   ├── nama: "John"
    │   ├── email: "john@example.com"
    │   └── posts (subkoleksi)
    │       ├── postId1 (dokumen)
    │       └── postId2 (dokumen)
Enter fullscreen mode Exit fullscreen mode

Inisialisasi Firestore 

import { getFirestore } from 'firebase/firestore';
const db = getFirestore(app);
Enter fullscreen mode Exit fullscreen mode

Operasi CRUD

Buat Dokumen

import { collection, addDoc, setDoc, doc } from 'firebase/firestore';
// Auto ID
await addDoc(collection(db, 'users'), userData);
// Custom ID
await setDoc(doc(db, 'users', userId), userData);
Enter fullscreen mode Exit fullscreen mode

Baca Dokumen

import { getDoc, getDocs, query, where, orderBy, limit } from 'firebase/firestore';

async function getUser(userId) {
  const docSnap = await getDoc(doc(db, 'users', userId));
  if (docSnap.exists()) return docSnap.data();
  throw new Error('Pengguna tidak ditemukan');
}

// Query koleksi
const q = query(
  collection(db, 'users'),
  where('role', '==', 'admin'),
  orderBy('createdAt', 'desc'),
  limit(10)
);
const querySnapshot = await getDocs(q);
Enter fullscreen mode Exit fullscreen mode

Perbarui Dokumen

import { updateDoc, increment, arrayUnion, arrayRemove } from 'firebase/firestore';

await updateDoc(doc(db, 'users', userId), {
  loginCount: increment(1),
  tags: arrayUnion('premium'),
});
Enter fullscreen mode Exit fullscreen mode

Hapus Dokumen

import { deleteDoc } from 'firebase/firestore';
await deleteDoc(doc(db, 'users', userId));
Enter fullscreen mode Exit fullscreen mode

Pendengar Real-Time 

import { onSnapshot } from 'firebase/firestore';
const unsubscribe = onSnapshot(doc(db, 'users', userId), (doc) => {
  console.log('Update:', doc.data());
});
Enter fullscreen mode Exit fullscreen mode

Aturan Keamanan Firestore

Konfigurasikan di Firebase Console → Firestore → Rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    function isAuthenticated() {
      return request.auth != null;
    }
    function isOwner(userId) {
      return request.auth.uid == userId;
    }
    match /users/{userId} {
      allow read: if isAuthenticated();
      allow create: if isAuthenticated() && isOwner(userId);
      allow update, delete: if isOwner(userId);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Batasan Query

  • Tidak ada kueri OR (gunakan beberapa kueri dan gabungkan di klien)
  • Tidak ada wildcard search
  • Query komposit butuh indeks manual

Contoh Query OR:

const activeQuery = query(
  collection(db, 'tasks'),
  where('status', '==', 'active')
);
const pendingQuery = query(
  collection(db, 'tasks'),
  where('status', '==', 'pending')
);
const [activeSnap, pendingSnap] = await Promise.all([
  getDocs(activeQuery),
  getDocs(pendingQuery)
]);
Enter fullscreen mode Exit fullscreen mode

Cloud Functions: Backend Tanpa Server

Cloud Functions menjalankan kode backend pada event database/HTTP/schedule.

Penyiapan 

npm install -g firebase-tools
firebase login
firebase init functions
Enter fullscreen mode Exit fullscreen mode

Fungsi HTTP (Endpoint API) 

// functions/index.js
const { onRequest } = require('firebase-functions/v2/https');
const admin = require('firebase-admin');
admin.initializeApp();
const db = admin.firestore();

exports.getUserProfile = onRequest(async (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  const token = (req.headers.authorization || '').split('Bearer ')[1];
  if (!token) return res.status(401).json({ error: 'Tidak sah' });
  try {
    const decodedToken = await admin.auth().verifyIdToken(token);
    const userDoc = await db.collection('users').doc(decodedToken.uid).get();
    if (!userDoc.exists) return res.status(404).json({ error: 'Pengguna tidak ditemukan' });
    res.json({ success: true, data: { id: decodedToken.uid, ...userDoc.data() } });
  } catch (error) {
    res.status(401).json({ error: 'Token tidak valid' });
  }
});
Enter fullscreen mode Exit fullscreen mode

Deploy:

firebase deploy --only functions:getUserProfile
Enter fullscreen mode Exit fullscreen mode

Panggil dari klien:

async function getUserProfile(token) {
  const response = await fetch(
    'https://us-central1-your-app.cloudfunctions.net/getUserProfile',
    {
      headers: { 'Authorization': `Bearer ${token}` }
    }
  );
  return await response.json();
}
Enter fullscreen mode Exit fullscreen mode

Pemicu Database 

const { onDocumentWritten } = require('firebase-functions/v2/firestore');

exports.onUserUpdate = onDocumentWritten('users/{userId}', async (event) => {
  const before = event.data?.before?.data();
  const after = event.data?.after?.data();
  if (before?.email !== after?.email) {
    // Logika notifikasi atau lainnya
  }
});
Enter fullscreen mode Exit fullscreen mode

Fungsi Terjadwal (Cron Jobs) 

const { onSchedule } = require('firebase-functions/v2/scheduler');
exports.dailyCleanup = onSchedule('every 24 hours', async (event) => {
  // Hapus notifikasi lama
});
Enter fullscreen mode Exit fullscreen mode

Konfigurasi Lingkungan 

firebase functions:config:set stripe.secret="sk_test_xxx"
Enter fullscreen mode Exit fullscreen mode 
const config = require('firebase-functions/config');
const stripe = require('stripe')(config.stripe.secret);
Enter fullscreen mode Exit fullscreen mode

Cloud Storage: Unggah & Kelola File

Gunakan untuk upload gambar/user file dengan CDN otomatis.

Siapkan Aturan Penyimpanan 

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
      allow delete: if request.auth.uid == userId;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Unggah File (Klien) 

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
const storage = getStorage(app);

async function uploadProfileImage(userId, file) {
  const storageRef = ref(storage, `users/${userId}/profile/${file.name}`);
  const uploadTask = uploadBytesResumable(storageRef, file);
  return new Promise((resolve, reject) => {
    uploadTask.on('state_changed', null, reject, async () => {
      const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
      resolve(downloadURL);
    });
  });
}
Enter fullscreen mode Exit fullscreen mode

Unduh File 

import { getDownloadURL } from 'firebase/storage';
async function getProfileImage(userId) {
  const imageRef = ref(storage, `users/${userId}/profile/avatar.png`);
  try {
    return await getDownloadURL(imageRef);
  } catch (error) {
    if (error.code === 'storage/object-not-found') return null;
    throw error;
  }
}
Enter fullscreen mode Exit fullscreen mode

Hapus File 

import { deleteObject } from 'firebase/storage';
async function deleteProfileImage(userId) {
  const imageRef = ref(storage, `users/${userId}/profile/avatar.png`);
  await deleteObject(imageRef);
}
Enter fullscreen mode Exit fullscreen mode

Menguji API Firebase dengan Apidog

Firebase menyediakan REST API untuk semua layanan. Uji endpoint secara langsung untuk debugging dan validasi.

Impor API REST Firebase

  1. Buka Apidog
  2. Buat proyek baru: "Firebase API"
  3. Impor spesifikasi OpenAPI dari dokumentasi Firebase, atau tambahkan endpoint manual.

Contoh Endpoint Firestore:

POST https://firestore.googleapis.com/v1/projects/{projectId}/databases/(default)/documents
Authorization: Bearer {oauth2_token}
Content-Type: application/json

{
  "fields": {
    "name": { "stringValue": "John" }
  }
}
Enter fullscreen mode Exit fullscreen mode

Contoh Endpoint Auth:

POST https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key={api_key}
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "secret123",
  "returnSecureToken": true
}
Enter fullscreen mode Exit fullscreen mode

Uji Alur Autentikasi

  • Buat request "Masuk", setel method POST, isi email/password.
  • Simpan token respons ke variabel lingkungan, gunakan {{token}} pada request berikutnya.

Debug Aturan Keamanan

Gunakan Firebase Emulator Suite:

firebase emulators:start
# Akses Firestore lokal di http://localhost:8080
Enter fullscreen mode Exit fullscreen mode

Praktik Terbaik Produksi

1. Penanganan Kesalahan 

async function firestoreWithRetry(operation, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try { return await operation(); } catch (error) {
      if (error.code === 'unavailable' || error.code === 'deadline-exceeded') {
        await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
        continue;
      }
      throw error;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Optimalkan Kueri

Tambahkan indeks komposit untuk kueri multi-bidang:

const q = query(
  collection(db, 'posts'),
  where('category', '==', 'tech'),
  where('views', '>', 1000),
  orderBy('views', 'desc')
);
Enter fullscreen mode Exit fullscreen mode

Firestore akan memberikan tautan untuk membuat indeks jika diperlukan.

3. Operasi Batch 

import { writeBatch } from 'firebase/firestore';

async function bulkUpdate(userIds, updates) {
  const batch = writeBatch(db);
  userIds.forEach(id => batch.update(doc(db, 'users', id), updates));
  await batch.commit();
}
Enter fullscreen mode Exit fullscreen mode

Maksimal 500 operasi per batch.

4. Pantau Biaya

Layanan Tingkat Gratis Berbayar
Firestore 50K baca/hari $0,036/100K baca
Penyimpanan 5GB $0,023/GB
Fungsi 2M pemanggilan $0,40/1M
Auth 10K/bulan $0,0055/100K

Atur peringatan anggaran di Google Cloud Console.

5. Amankan Akun Layanan 

// Jangan expose file .json di klien!
admin.initializeApp({
  credential: admin.credential.cert(require('./serviceAccountKey.json'))
});

// Hanya gunakan di backend/server
const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});
Enter fullscreen mode Exit fullscreen mode

6. Tangani Skenario Offline 

import { enableMultiTabIndexedDbPersistence } from 'firebase/firestore';
enableMultiTabIndexedDbPersistence(db).catch((err) => {
  // Handle error sesuai kode
});
Enter fullscreen mode Exit fullscreen mode

Masalah Umum & Solusi API Firebase

Masalah 1: PERMISSION_DENIED

  • Cek security rules di Firebase Console
  • Verifikasi request.auth.uid
  • Uji aturan dengan Rules Playground

Masalah 2: Token Kedaluwarsa 

const user = auth.currentUser;
if (user) await user.getIdToken(true);
Enter fullscreen mode Exit fullscreen mode

Masalah 3: Cold Start Cloud Functions 

exports.keepWarm = onSchedule('every 60 seconds', async () => {
  await fetch('https://your-function.cloudfunctions.net/health');
});
Enter fullscreen mode Exit fullscreen mode

Masalah 4: Query Kosong

  • Cek urutan dan keberadaan index di Firebase Console > Indexes

Studi Kasus Dunia Nyata

Fintech: Notifikasi Transaksi Real-Time

Notifikasi transaksi real-time dengan Firestore + Cloud Functions menurunkan tiket support tentang transaksi "tertunda" hingga 40%.

E-commerce: Sinkronisasi Inventaris

Inventori web/iOS/Android sinkron dengan listener Firestore. Offline support memastikan proses tetap jalan walau tanpa koneksi.

SaaS: Autentikasi Multi-Tenant

Klaim kustom Auth + Firestore tenant config = akses berbasis peran, multi organisasi, data terisolasi, satu kodebase.

Kesimpulan

Integrasi API Firebase mencakup:

  • Autentikasi: Email, Google, Apple, JWT
  • Firestore: Database NoSQL, listener real-time, aturan keamanan
  • Cloud Functions: Backend event/HTTP tanpa server
  • Storage: Upload file via CDN

Anda sudah melihat alur autentikasi, operasi database, deployment fungsi, pengelolaan file, serta best-practice produksi: error handling, batching, offline support, dan security.

FAQ

Apakah Firebase gratis untuk digunakan?

Ya, Firebase punya tier gratis (Spark): 5GB storage, 50K read Firestore/hari, 2M Cloud Function calls, 10K Auth user/bulan. Paket Blaze bayar sesuai pemakaian.

Bisakah saya menggunakan Firebase dengan basis data yang sudah ada?

Bisa. Gunakan Firebase Extensions untuk sync ke PostgreSQL/MySQL/MongoDB, atau panggil API eksternal dari Cloud Functions.

Bagaimana cara migrasi dari Firebase ke platform lain?

Ekspor data via Firestore export atau Firebase CLI. Untuk data besar, gunakan pipeline Dataflow. Migrasi tergantung struktur data.

Apakah Firebase mendukung GraphQL?

Tidak native. Gunakan pihak ketiga seperti firestore-graphql atau buat layer GraphQL via Cloud Functions + Apollo Server.

Bisakah saya menggunakan Firebase on-premise?

Tidak. Firebase hanya tersedia di Google Cloud. Alternatif open source: Appwrite, Supabase, Nhost.

Bagaimana menangani upload file >100MB?

Gunakan resumable upload (SDK sudah handle). Untuk file sangat besar, gunakan Google Cloud Storage langsung dengan signed URL.

Apa yang terjadi jika saya melebihi batas query Firestore?

Query akan error FAILED_PRECONDITION. Tambah index atau restrukturisasi query. Firestore memberi tautan langsung untuk create index.

Apakah Firebase patuh GDPR?

Ya, Firebase menawarkan compliance GDPR. Aktifkan data residency, sediakan export/delete data user, tanda tangan Data Processing Amendment Google.

Top comments (0)