JavaScript: аутентификация с помощью React Firebase

У меня был хороший опыт работы с React & React Native и Firebase. React — отличный движок просмотра, а Firebase улучшает его с помощью аутентификации пользователей, управления базами данных и аналитики.

Вот очень простой пример, чтобы начать аутентификацию пользователя с помощью Firebase & React.

Я уже настроил шаблон, если вы хотите посмотреть, вы можете клонировать репозиторий Github здесь. (Не забудьте разместить свою собственную конфигурацию firebase в App.js)

Настраивать

Установить

Во-первых, вы должны настроить свой проект для аутентификации firebase. Если нет, установите клиент firebase.

yarn add firebase 
# Or 
npm i firebase

Установите @react-firebase/auth

yarn add @react-firebase/auth 
# or 
npm i @react-firebase/auth

Получите конфигурацию Firebase

Измените PROJECT_NAME на название вашего проекта и возьмите конфигурацию firebase здесь:

https://console.firebase.google.com/project/PROJECT_NAME/settings/general

Ваш конфиг должен выглядеть так:

// Firebase Config 
const config = {
     apiKey: "API_KEY",   
     projectId: "PROJECT_ID",   
     databaseURL: "DATABASE_URL",   
     authDomain: "AUTH_DOMAIN",   
     // OPTIONAL   
     storageBucket: "STORAGE_BUCKET",   
     messagingSenderId: "MESSAGING_SENDER_ID" 
};

использование

Импортировать firebase и firebase/auth

import firebase from "firebase/app"; 
import "firebase/auth";

Разместите компонент FirebaseAuthProvider на верхнем уровне приложения. (Где угодно, если он выше других компонентов аутентификации).

<FirebaseAuthProvider firebase={firebase} {…config}> 
// my app code 
</FirebaseAuthProvider>

Ваш код должен выглядеть так:

После обертывания приложения с помощью FirebaseAuthProvider вы можете выбрать обертку внутреннего дочернего дерева с компонентами FirebaseAuthConsumer & IfFirebaseAuthed & IfFirebaseAuthedAnd.

Если вам понравилась эта статья, поделитесь ею и похлопайте 👏 👏. Спасибо!