Как настроить зависимости аутентификации

Модульная структура Firebase JS SDK позволяет вам лучше контролировать процесс создания приложения. Это позволяет настраивать зависимости для вашей платформы и оптимизировать размер пакета, удаляя ненужные функции.

Инициализировать библиотеку Auth можно двумя способами: с помощью функции getAuth() и функции initializeAuth(). Первая, getAuth(), содержит все, что нужно приложению, чтобы использовать все функции библиотеки Auth. Однако при этом в приложение добавляется много кода, который может быть не нужен. Кроме того, может быть добавлен код, который не поддерживается на целевой платформе, что приведет к ошибкам. Чтобы избежать этих проблем, можно использовать initializeAuth(), который принимает карту зависимостей. Функция getAuth() просто вызывает initializeAuth() со всеми указанными зависимостями. Ниже приведен пример кода, который в браузере выполняет те же функции, что и getAuth():

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,
});

Настройте зависимости

Не все приложения используют семейство функций signInWithPopup или signInWithRedirect. Многим приложениям не нужна гибкость, которую обеспечивает indexedDB, или возможность поддерживать как indexedDB, так и localStorage, если один из них недоступен. В таких случаях в getAuth() по умолчанию содержится много неиспользуемого кода, который без причины увеличивает размер пакета. Вместо этого они могут настроить зависимости. Например, если в вашем приложении для аутентификации используются только ссылки, отправляемые по электронной почте, и localStorage достаточно (поскольку вы не используете веб-скрипты или service worker), вы можете значительно сократить объем кода, инициализировав Auth следующим образом:

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
});

Благодаря этому коду вы удалили три больших зависимости, которые не нужны вашему приложению, и значительно сократили объем трафика, который используют ваши пользователи при посещении сайта.

Рекомендации для разных платформ

Во многих случаях вам нужно вручную определить зависимости Auth, чтобы избежать ошибок при инициализации. Функция getAuth() предполагает использование определенной платформы. Для точки входа по умолчанию это среда браузера, а для точки входа Cordova – среда Cordova. Но иногда потребности вашего приложения противоречат этим предположениям. Например, для скриптов веб-воркеров и сервисных воркеров реализация getAuth() по умолчанию извлекает код, который считывает данные из объекта window, что приводит к ошибкам. В таких случаях необходимо настроить зависимости. Ниже приведен код, который подходит для инициализации библиотеки Auth в контексте service worker:

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
});

Этот код указывает Auth инициализировать с постоянным хранилищем indexedDB (доступно в контекстах рабочих процессов) и опустить зависимость popupRedirectResolver, которая предполагает наличие контекста DOM.

Существуют и другие причины, по которым может потребоваться вручную определить зависимости от определенных платформ. Если при инициализации Auth задать поле popupRedirectResolver, в некоторых случаях библиотека выполнит дополнительные действия. В мобильных браузерах библиотека автоматически открывает iframe для вашего домена Auth. Это делается для удобства пользователей, но может повлиять на производительность, поскольку дополнительный код загружается при запуске приложения. Чтобы избежать этого, используйте initializeAuth() и вручную передайте зависимость browserPopupRedirectResolver функциям, которым она нужна:

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);

Если бы мы указали browserPopupRedirectResolver в зависимостях для initializeAuth(), третий параметр в вызове signInWithRedirect() не понадобился бы. Но если перенести эту зависимость на вызов signInWithRedirect(), то первоначальное снижение производительности во время инициализации будет устранено. Перенос зависимости имеет свои недостатки, но важно то, что вы можете принимать решения о них, инициализируя библиотеку вручную.

Когда использовать специальную инициализацию

Таким образом, при использовании собственной инициализации вы получаете гораздо больше контроля над тем, как приложение использует Auth SDK. Стандартная функция getAuth() подходит для большинства случаев. Для большинства приложений достаточно getAuth(). Однако есть много причин, по которым вам может понадобиться перейти на управление зависимостями вручную:

  • В приложениях, где размер пакета и время загрузки имеют решающее значение, инициализация Custom Auth может сократить объем данных на несколько килобайт. Кроме того, это позволяет сократить время первоначальной загрузки, поскольку зависимости переносятся на момент использования, а не инициализации.
  • Для кода, который выполняется в контекстах, отличных от DOM (например, в веб- и сервисных работниках), необходимо использовать initializeAuth(), чтобы избежать ошибок.