Настройка вашего первого проекта ReactJS и Firebase Auth

В наше время безопасность очень важна для веб-сайтов и приложений. Иногда разработчики создают свой собственный бэкенд, включающий собственные методы безопасности. Другие разработчики используют различные облачные платформы, чтобы не беспокоиться о логике безопасности, и эти платформы помогают разработчикам с наиболее безопасными способами аутентификации пользователей.

Сейчас мы рассмотрим, как вы можете использовать аутентификационный сервис Firebase для защиты вашего react APP.

Настройка Firebase

Сначала вам нужно будет настроить наш собственный проект Firebase через Firebase Console. Чтобы начать, перейдите в браузере на Firebase Console. Убедитесь, что вы вошли в свой аккаунт Google.

Теперь нажмите на Добавить проект и следуйте простым инструкциям. Когда откроется приборная панель, нажмите на Аутентификация на боковой панели и нажмите на Начать работу, чтобы включить модуль. Теперь вам будут представлены различные варианты аутентификации. Нажмите на Email/Password, включите его и сохраните. Мы вернемся к этому позже, а сначала давайте создадим наше приложение для реакта.

Настройка проекта React

Перейдите в терминал и используйте npx create-react-app appname, чтобы создать новое приложение react.
Далее установим firebase и react router dom: npm install firebase react-router-dom react-firebase-hooks

Интеграция Firebase в наше приложение React

Теперь вернемся к панели Firebase Console, щелкнем на Project Settings. Нажмите на третью иконку (</>), чтобы настроить наш проект Firebase для веб. Здесь вы увидите файл config. Скопируйте конфиг. Создайте новый файл в папке src с именем firebase.js, импортируйте модули firebase и вставьте сюда файл config.
Далее мы инициализируем наше приложение и сервисы, чтобы мы могли использовать Firebase во всем нашем приложении. Это будет использовать наш конфиг для распознавания проекта и инициализации модулей аутентификации и базы данных.

С этим приложением react вы можете начать создавать формы входа и регистрации и использовать модуль аутентификации Firebase.

Оцените статью
Procodings.ru
Добавить комментарий