Menyesuaikan Dependensi Auth

Desain modular Firebase JS SDK memberi Anda kontrol yang jauh lebih besar terkait cara pembuatan aplikasi. Fleksibilitas ini memungkinkan Anda menyesuaikan dependensi untuk platform yang Anda gunakan dan mengoptimalkan ukuran paket dengan menghapus fitur yang tidak diperlukan.

Ada dua cara untuk menginisialisasi library Auth, yakni menggunakan fungsi getAuth() dan fungsi initializeAuth(). Fungsi pertama, getAuth(), menyediakan semua hal yang dibutuhkan aplikasi Anda untuk memanfaatkan semua fitur yang ditawarkan library Auth. Kelemahan fungsi ini adalah mengambil banyak kode yang berpotensi tidak digunakan oleh aplikasi Anda. Fungsi ini mungkin juga mengambil kode yang tidak didukung di platform yang Anda targetkan, sehingga dapat menyebabkan error. Untuk menghindari masalah tersebut, Anda dapat menggunakan initializeAuth(), yang mengambil peta dependensi. Fungsi getAuth() hanya memanggil initializeAuth() dengan semua dependensi yang ditentukan. Sebagai ilustrasi, berikut adalah fungsi yang setara dengan getAuth() di lingkungan browser:

import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, browserSessionPersistence, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence, browserSessionPersistence],
  popupRedirectResolver: browserPopupRedirectResolver,
});

Menyesuaikan dependensi

Tidak semua aplikasi menggunakan kelompok fungsi signInWithPopup atau signInWithRedirect. Banyak aplikasi yang tidak memerlukan fleksibilitas yang disediakan oleh indexedDB, atau tidak memerlukan kemampuan untuk mendukung indexedDB dan localStorage jika tidak tersedia. Dalam kasus ini, getAuth() default menyertakan banyak kode tidak terpakai yang meningkatkan ukuran paket tanpa alasan yang jelas. Padahal aplikasi ini dapat disesuaikan dependensinya. Misalnya, jika aplikasi Anda hanya menggunakan autentikasi link email dan localStorage sudah memadai (karena Anda tidak menggunakan skrip web atau pekerja layanan), Anda dapat menghapus banyak kode yang tidak diperlukan dengan menginisialisasi Auth seperti ini:

import {initializeAuth, browserLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: browserLocalPersistence,
  // No popupRedirectResolver defined
});

Dengan kode ini, Anda telah menghapus tiga dependensi besar yang tidak diperlukan aplikasi, sehingga secara signifikan mengurangi jumlah bandwidth yang digunakan pengguna setiap kali mereka mengunjungi situs Anda.

Pertimbangan khusus platform

Dalam banyak kasus, Anda perlu menentukan dependensi Auth secara manual untuk menghindari error saat inisialisasi. Fungsi getAuth() mengasumsikan platform tertentu. Untuk titik entri default, yaitu lingkungan browser dan titik entri Cordova, merupakan lingkungan Cordova. Namun, terkadang kebutuhan aplikasi tertentu berbenturan dengan asumsi tersebut. Misalnya untuk skrip web dan pekerja layanan, penerapan default untuk getAuth() akan mengambil kode yang melakukan operasi baca dari objek window, yang akan menyebabkan error. Dalam kasus tersebut, Anda perlu menyesuaikan dependensi Anda. Kode berikut cocok untuk menginisialisasi library Auth dalam konteks pekerja layanan:

import {initializeAuth, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: indexedDBLocalPersistence,
  // No popupRedirectResolver defined
});

Kode ini memerintahkan Auth untuk melakukan inisialisasi dengan persistensi indexedDB (yang tersedia dalam konteks pekerja) dan menghilangkan dependensi popupRedirectResolver, yang mengasumsikan bahwa konteks DOM tersedia.

Namun, ada alasan lain mengapa Anda sebaiknya menentukan dependensi secara manual pada platform tertentu. Dengan menentukan kolom popupRedirectResolver dalam inisialisasi Auth, untuk beberapa kasus, library akan melakukan pekerjaan tambahan saat inisialisasi. Di browser seluler, library akan otomatis membuka iframe ke domain Auth Anda secara preemtif. Hal ini dilakukan untuk memberikan pengalaman yang lancar bagi sebagian besar pengguna, tetapi dapat memengaruhi performa karena harus memuat kode tambahan tepat saat aplikasi dimulai. Perilaku ini dapat dihindari dengan menggunakan initializeAuth() dan meneruskan dependensi browserPopupRedirectResolver secara manual ke fungsi yang membutuhkannya:

import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});

// Later
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);

Jika browserPopupRedirectResolver telah disediakan dalam dependensi ke initializeAuth(), parameter ketiga dalam panggilan ke signInWithRedirect() tidak akan diperlukan. Namun, dengan memindahkan dependensi tersebut ke panggilan signInWithRedirect() secara langsung, hit performa awal selama proses inisialisasi akan dihapus. Memang akan ada konsekuensi jika dependensi dipindahkan. Namun, setidaknya Anda dapat mengambil keputusan untuk menghadapi konsekuensi tersebut dengan menginisialisasi library secara manual.

Kapan sebaiknya menggunakan inisialisasi kustom

Sebagai rangkuman, inisialisasi kustom memberi Anda kontrol yang jauh lebih besar terhadap penggunaan Auth SDK oleh aplikasi Anda. Anda dapat memulai dengan fungsi getAuth() standar yang cocok dengan sebagian besar kasus penggunaan. Untuk sebagian besar aplikasi, Anda mungkin hanya memerlukan getAuth(). Namun, ada banyak alasan mengapa Anda sebaiknya (atau perlu) beralih ke pengelolaan dependensi manual:

  • Untuk aplikasi yang sangat mengutamakan ukuran paket dan waktu pemuatan, inisialisasi Auth kustom dapat mengurangi ukuran data secara signifikan. Inisialisasi kustom juga dapat mengurangi waktu pemuatan awal dengan memindahkan dependensi ke waktu penggunaan, bukan waktu inisialisasi.
  • Untuk kode yang dijalankan dalam konteks non-DOM (seperti web dan pekerja layanan), initializeAuth() harus digunakan untuk menghindari error.