Как создать логин Firebase и зарегистрироваться в React

Firebase — это система, которая предлагает разработчикам множество платформ для создания веб-приложений. Одним из основных элементов приложения является создание пользователей и предоставление им возможности входа в систему. Давайте посмотрим, как мы можем написать логин Firebase, который будет полным, но очень простым в реализации.

Создайте свое приложение Firebase

Сначала вам нужно создать проект приложения Firebase, поэтому перейдите в консоль Firebase и добавьте новый проект. Вы добавите приложение сюда.

https://console.firebase.google.com/

Он запустит помощника, который спросит у вас название проекта.

На следующем экране вас спросят, хотите ли вы включить аналитику. Отключите его и нажмите кнопку «Создать проект». Подготовка вашего проекта займет некоторое время, и после этого вы получите кнопку «Продолжить », которая приведет вас к обзору проекта.

Теперь вам нужно добавить приложение Firebase в проект Firebase. Имеет смысл? Проект Firebase позволяет вам содержать несколько приложений Firebase для iOS, Android, Web и Unity. А пока давайте создадим веб-приложение, так как мы будем использовать React для создания входа в Firebase.

Вам будет предложено назвать это приложение, и вам будут предоставлены ключи, которые вам нужно будет использовать для подключения к Firebase. Они будут выглядеть примерно так:

var firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "1234567890",
};

Мы будем использовать эти ключи в нашем приложении React для настройки провайдера, который позволит нам получить доступ к Firebase в любом компоненте провайдера.

Наконец, перейдите в раздел «Аутентификация» на левой боковой панели, на вкладке «Метод входа» и включите аутентификацию по электронной почте/паролю.

Готово!

Установите зависимости Firebase

Firebase доступен для разных стеков, включая JavaScript и Node.js, которые мы собираемся использовать сейчас. Мы собираемся установить только две зависимости с помощью npm:

• firebase, что позволит нам получить доступ к таким вещам, как authбиблиотека, которую мы будем использовать для входа в систему, а также для создания нового пользователя.
• reactfire, набор полезных инструментов для работы с Firebase в React. Мы будем использовать их useFirebaseAppдля подключения к контексту и доступа к Firebase.

Давайте установим их с помощью

npm i firebase reactfire

Структура приложения React будет очень простой:

|-- index.js
|-- App.js
|-- FirebaseUser
    |-- index.js

и они будут связаны следующим образом:

index.js --import--> ./App.js --import--> ./FirebaseUser

Настройте провайдера Firebase

Давайте напишем первый файл для входа и регистрации в Firebase! На самом деле нам не нужно его писать, потому что это должно быть добавлено в файл, в котором вы выдаете ReactDOM.render(), в нашем случае это будет index.js:

import { FirebaseAppProvider } from 'reactfire';

const firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "925199572988",
    appId: "1:123456789:web:12a34b56c78d90e"
};

Это импортирует FirebaseAppProviderи добавляет ключи конфигурации, которые вы ему передадите. Теперь вы можете обернуть корневой компонент, который в нашем случае находится Appу провайдера:

ReactDOM.render(, document.getElementById('root')
);

Большой! Теперь все перечисленные ниже компоненты смогут получить доступ к Firebase!

Используйте компонент входа и регистрации в Firebase

Давайте теперь напишем Appкомпонент, в который мы будем импортировать и использовать FirebaseUserкомпонент для создания и входа пользователя. Здесь нет ничего, что действительно связано с Firebase . Мы собираемся реализовать вход и регистрацию, используя один и тот же компонент, чтобы вы могли видеть, как мы можем повторно использовать код, поэтому в этом компоненте мы реализуем пару кнопок, которые при нажатии будут отображать FirebaseUserв режиме входа или режим регистрации:

import React, { useState } from 'react';
import FirebaseUser from './FirebaseUser';

function App() {
  const [ signInOrUp, setSignInOrUp ] = useState( '' );
  return (Firebase login
      {
        signInOrUp?(): (<>
             setSignInOrUp( 'signin') } >Log in with existing user
             setSignInOrUp( 'signup') } >Create a new user) }

  );
}

export default App;

Настройте вход в Firebase и зарегистрируйтесь

Мы создадим компонент для этого. Сначала нам нужно импортировать некоторые модули:

import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';

Мы сделаем useStateнесколько вещей, от знания того, аутентифицирован ли пользователь, до установки ошибок. Мы собираемся использовать useFirebaseAppхук для доступа к Firebase. Это возможно только потому, что мы настроили поставщика Firebase на предыдущем шаге, и он доступен только в той иерархии, в которой он был добавлен. Наконец, мы импортируем authбиблиотеку, чтобы мы могли вызывать методы Firebase для создания пользователей и входа в систему. Это эффективный способ, потому что мы загружаем только эту библиотеку, а не другие, как firestoreдля базы данных NoSQL или messagingдля сообщений и уведомлений.

Далее мы добавим быстрый хук для управления нашими полями ввода:

const useField =() => {
    const [ value, setValue ] = useState( '' );
    return { value, onChange: x => setValue( 'string' === typeof x? x: x.target.value) };
};

И, наконец, полный компонент, который мы разберем ниже, чтобы указать на наиболее интересные части, связанные с входом в Firebase и регистрацией.

function FirebaseUser ({ action = 'signin' }) {
    const email = useField();
    const password = useField();
    const [ auth, setAuth ] = useState( null );
    const [ error, setError ] = useState( '' );
    const firebase = useFirebaseApp();
    const setReceivedData = data => setAuth( data );
    const setReceivedError = error => setError( error.message );

    const signIn = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
    };

    const signUp = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .createUserWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
    };

    const manage = 'signin' === action? {
            success: `Logged in as ${ auth?.user.email ?? '' }`,
            method: signIn,
            label: 'Sign In'
        }: {
            success: `Signed up as ${ auth?.user.email ?? '' }`,
            method: signUp,
            label: 'Sign Up'
        };

    return ({
                auth? ({ manage.success }
                ): (<>

                            { manage.label }
                            {
                                error && { error }
                            }) }

    );
}

export default FirebaseUser;

Сначала мы подключаемся к экземпляру Firebase:

const firebase = useFirebaseApp();

Как указывалось ранее, это возможно, потому что мы ранее обернули Appкомпонент поставщиком Firebase. Теперь, когда мы подключены к Firebase, мы можем использовать authфункциональность и вызывать signInWithEmailAndPassword:

const signIn = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
};

В случае успеха он установит возвращаемые данные, а поля формы будут заменены на

Logged in as ${ auth?.user.email ?? '' }

Возвращаемые данные представляют собой большой объект с очень интересными свойствами, поэтому стоит добавить console.log()к нашей setReceivedData()функции, чтобы увидеть, что еще она включает.

Процесс создания пользователя аналогичен, за исключением того, что мы используем функцию createUserWithEmailAndPassword().

Вывод

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

Демонстрация входа и регистрации в Firebase.
Забавный факт: Chrome жалуется, что пароль 123456, который я использую для тестирования, скомпрометирован, и это правда.

Если вы сейчас вернетесь в приложение Firebase > Аутентификация > Пользователи, вы увидите нового пользователя (возможно, вам придется использовать кнопку обновления рядом с Добавить пользователя).

Напомним, основные шаги для интеграции Firebase в наше приложение React:

• настройте поставщика Firebase и оберните корневой компонент (или корень иерархии, где вы хотите его использовать)
• подключиться к провайдеру Firebase, используяuseFirebaseApp
• используйте функции аутентификации!

Проверьте репозиторий GitHub по адресу https://github.com/eliorivero/firebase-login-sign-up. Единственная разница в том, что я загружаю ключи для настройки Firebase из файла .env, чтобы не раскрывать их публично.

Если у вас есть какие-либо вопросы, дайте мне знать в комментариях ниже!