—

Примечание! Эта статья также доступна на:

Огромное спасибо переводчикам ❤

—

Эй, ты! Рад вас видеть!

Я хотел написать простое руководство по быстрой аутентификации с помощью Firebase и React.

Я буду очень прямолинеен и прямо к делу. Я не буду рассматривать такие крайние случаи, как аутентифицированные маршруты или правильное отображение сообщений об ошибках.

В этом руководстве мы внесем только минимальные изменения, необходимые для использования базовой аутентификации Google.

Мы будем использовать несколько проектов с открытым исходным кодом:

Настройка разработки

Убедитесь, что вы установили:

Вот и все.

Загрузите образец проекта

Мы собираемся использовать create-react-app для начальной загрузки проекта.

Выполните следующие команды в своем терминале:

# bootstrap a new react application
npx create-react-app react-firebase-authentication
# access the project
cd ./react-firebase-authentication
# start project in development mode
npm start

Настройка Firebase

Начните создавать проект Firebase, если у вас его еще нет.

Перейдите на страницу аутентификации.

Перейдите на вкладку «Метод входа» и убедитесь, что у вас включен Google в качестве поставщика услуг входа.

Прокрутите немного вниз и убедитесь, что у вас localhost в качестве авторизованного домена:

Вверху страницы аутентификации нажмите кнопку «Веб-настройка».

Он будет отображаться в таком модальном окне:

Скопируйте переменную config и вставьте ее в файл с именем firebaseConfig.js. Экспортируйте его позже. Это должно выглядеть примерно так:

const config = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***",
};
export default config;

Храните этот файл в src/firebaseConfig.js.

Теперь мы собираемся установить библиотеки Firebase и компонент высшего порядка через NPM.

Выполните следующую команду:

npm install --save firebase react-with-firebase-auth

Код

Теперь мы, наконец, можем приступить к самой крутой части.

В настоящее время ваше приложение является приложением CRA по умолчанию, в котором нет ничего интересного. Мы изменим компонент src/App.js.

Вставьте эти четыре импорта в начало файла:

import withFirebaseAuth from 'react-with-firebase-auth'
import * as firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './firebaseConfig';

Инициализируйте приложение Firebase, используя конфигурацию:

const firebaseApp = firebase.initializeApp(firebaseConfig);

Настройте поставщиков, которых мы хотим поддерживать, и получите доступ к библиотеке аутентификации:

const firebaseAppAuth = firebaseApp.auth();
const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider(),
};

Оберните экспорт компонента App, используя withFirebaseAuth HOC:

export default withFirebaseAuth({
  providers,
  firebaseAppAuth,
})(App);

Теперь мы можем получить доступ к свойствам, предоставляемым withFirebaseAuth HOC в компоненте App.

Он предоставляет нам user, error и некоторые методы signIn и signOut в качестве свойств.

Итак, мы можем добавить это к нашему методу рендеринга:

const {
  user,
  signOut,
  signInWithGoogle,
} = this.props;

И измените разметку, чтобы попросить пользователя войти или выйти:

return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      {
        user 
          ? <p>Hello, {user.displayName}</p>
          : <p>Please sign in.</p>
      }
      {
        user
          ? <button onClick={signOut}>Sign out</button>
          : <button onClick={signInWithGoogle}>Sign in with Google</button>
      }
    </header>
  </div>
);

Вот и все!

Если вы отметите https: // localhost: 3000, вы, вероятно, увидите следующее:

Затем вы можете нажать кнопку «Войти с помощью Google», чтобы открыть модальное окно входа в Google.

После предоставления доступа вы увидите что-то вроде этого:

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

Вот и все!

Надеюсь, вам понравился этот небольшой урок. Я сделал это за ночь, когда мне было совершенно нечего делать, и я просто хотел поделиться чем-то крутым.

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

Вы можете найти полученный исходный код здесь: https://github.com/armand1m/react-firebase-authentication-medium

Спасибо за чтение, cya! ❤