Як створити логін 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, щоб уникнути їхнього оприлюднення.
Якщо у вас виникли запитання, дайте мені знати в коментарях нижче!