Firebase предоставляет набор готовых к использованию сервисов для быстрого прототипирования. Более того, он предоставляет такие библиотеки, как firebaseui-web-react и firebaseui-web, чтобы разработчики могли загружать свои приложения. В этой статье я расскажу, как быстро создать потоки аутентификации Firebase с помощью этих двух библиотек, и поделюсь своим мнением о компромиссах.
Для начала вам нужно создать приложение React и проект Firebase. Добавьте Firebase в проект React, следуя этому документу. Теперь, когда вы настроили проект и Firebase, давайте начнем добавлять пользовательский интерфейс аутентификации Firebase.
Шаг 1. Установите библиотеку
npm install --save react-firebaseui
Шаг 2. Используйте библиотеку
Шаг 3. Устраните проблему совместимости
Вы, наверное, заметили, что в приведенном выше коде мы импортируем модули firebase по таким путям, как firebase/compat/app. Это связано с тем, что библиотека несовместима с последней версией Firebase v9 JS SDK. Большинство проблем уже решено с помощью модулей совместимости. Последний шаг — снова инициализировать приложение firebase с той же конфигурацией, которую вы использовали для инициализации приложения с SDK v9.
Теперь страница будет успешно загружена.
Шаг 4. Включите методы аутентификации в консоли Firebase
Если вы нажмете «Войти через Facebook» или «Войти с телефона», появятся ошибки типа «Ошибка (авторизация/конфигурация не найдена)». Вы можете перейти в консоль Firebase и включить соответствующие методы аутентификации.
Шаг 5. Настройте параметры аутентификации
Помните, что вы всегда можете настроить параметры для определенных методов аутентификации. Например, вы можете настроить reCAPTCHA для входа в телефон так, чтобы он был невидимым (должен признаться, что вызовы reCAPTCHA сложны, я часто проваливаю тест).
Хороший! Теперь у вас есть работающий поток авторизации.
Заключение
Библиотека предоставляет быстрый способ создания потоков аутентификации почти для всех основных методов аутентификации. Если вы просто хотите что-то прототипировать, библиотека — отличный инструмент для повышения вашей скорости.
Однако вы также должны знать о недостатках библиотеки. В частности, как я уже упоминал ранее, он не полностью совместим с веб-SDK v9. Также кажется, что в краткосрочной перспективе он не получит поддержку v9 SDK. Что еще более важно, пользовательский интерфейс не является полностью настраиваемым.
На этом я закончу статью здесь. Спасибо, что прочитали мою первую историю на Medium.
