1 Buat Project Firebase

2 Aktifkan Layanan Firebase

3 Inisialisasi SDK

// Terminal — install dependencies
npm install firebase

// src/firebase.js — konfigurasi utama
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey:            "AIzaSy...",           // dari Firebase Console
  authDomain:        "amanah-kemenag-jember.firebaseapp.com",
  projectId:         "amanah-kemenag-jember",
  storageBucket:     "amanah-kemenag-jember.appspot.com",
  messagingSenderId: "123456789",
  appId:             "1:123456789:web:abc123"
};

const app = initializeApp(firebaseConfig);
export const auth           = getAuth(app);
export const db             = getFirestore(app);
export const storage        = getStorage(app);
export const googleProvider = new GoogleAuthProvider();

4 Fungsi Auth & CRUD

// Login Google
export async function loginGoogle() {
  const res     = await signInWithPopup(auth, googleProvider);
  const userDoc = await getDoc(doc(db, "users", res.user.uid));
  return { user: res.user, role: userDoc.data()?.role || "viewer" };
}

// Simpan Register Nikah + hash otomatis
export async function saveRegisterNikah(data) {
  const hash = await sha256(JSON.stringify(data));
  return await addDoc(collection(db, "registerNikah"), {
    ...data, hash,
    status:    "terverifikasi",
    createdAt: serverTimestamp(),
    createdBy: auth.currentUser.uid
  });
}

// SHA-256 native browser (tanpa library tambahan)
export async function sha256(text) {
  const buf = await crypto.subtle.digest("SHA-256",
    new TextEncoder().encode(text));
  return "sha256:" + [...new Uint8Array(buf)]
    .map(b => b.toString(16).padStart(2,"0")).join("");
}

5 Security Rules Firestore

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    function isAuth()   { return request.auth != null; }
    function role()     { return get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role; }
    function satker()   { return get(/databases/$(database)/documents/users/$(request.auth.uid)).data.satker; }
    function isAdmin()  { return role() == "kabupaten"; }

    match /registerNikah/{id} {
      allow read: if isAuth();
      allow create, update: if isAuth() && (isAdmin() ||
        (role() == "kua" && request.resource.data.kua == satker()));
      allow delete: if isAdmin();
    }
    match /ijazah/{id} {
      allow read: if isAuth();
      allow create, update: if isAuth() && (isAdmin() ||
        (role() == "madrasah" && request.resource.data.madrasah == satker()));
      allow delete: if isAdmin();
    }
    match /users/{uid} {
      allow read:  if isAuth();
      allow write: if isAdmin() || request.auth.uid == uid;
    }
  }
}

⚙ Environment Variables (Firebase + Netlify)

Untuk menyimpan konfigurasi Firebase secara aman (jangan hardcode di HTML!):

📄 File netlify.toml (Konfigurasi Lanjutan)

# netlify.toml — letakkan di root folder project

[build]
  publish = "dist"           # folder output build
  command = "npm run build"  # perintah build

[build.environment]
  NODE_VERSION = "18"

# Redirect untuk SPA (React Router)
[[redirects]]
  from   = "/*"
  to     = "/index.html"
  status = 200

# Custom headers untuk keamanan
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options        = "DENY"
    X-XSS-Protection       = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy        = "strict-origin-when-cross-origin"
    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://*.firebaseapp.com https://*.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://*.googleapis.com https://*.firebaseio.com wss://*.firebaseio.com;"

🔐 Domain Kustom (Opsional)

✅ Checklist Sebelum Go-Live

• File index.html ada di root atau folder publish yang dikonfigurasi
• Firebase Config menggunakan environment variables (bukan hardcode)
• Authorized domains di Firebase Auth sudah ditambahkan domain Netlify
• Security Rules Firestore sudah dipublish (bukan test mode)
• Storage Rules sudah dikonfigurasi
• netlify.toml dikonfigurasi (terutama redirects untuk SPA)
• Environment variables semua terisi di Netlify dashboard
• Uji coba login Google dari domain Netlify (bukan localhost)
• Verifikasi operasi CRUD dari domain production
• Backup data Firestore awal sudah diisi via Firebase Console