Защитите свое приложение Gatsby, используя аутентификацию Firebase

TL;DR

В этом руководстве вы узнаете, как настроить поток аутентификации с помощью Firebase в вашем приложении Gatsby и развернуть его на хостинге Netlify. После выполнения этого руководства у вас будет работающее приложение Gatsby с:

  • Полноценные процессы входа и регистрации.
  • Безопасная аутентификация по электронной почте/паролю.
  • Сброс пароля
  • Защищенная страница профиля пользователя.
  • Развертывание в Netlify

Работающее демо-приложение доступно здесь. Предоставляется полный исходный код.

О Гэтсби

Созданный в 2015 году, Gatsby представляет собой генератор статических сайтов с открытым исходным кодом, построенный поверх Node.js с использованием React и GraphQL. Он предоставляет более 2500 плагинов для создания статических сайтов на основе таких источников, как документы Markdown, MDX, изображения и многочисленные системы управления контентом, такие как WordPress, Drupal и другие. Это происходит молниеносно благодаря тому, что на стороне сервера JavaScript преобразуется в статические файлы сайта, которые минимизированы и могут обслуживаться через сеть доставки контента.

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

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

Отправная точка

Нашей отправной точкой является простой поток аутентификации, доступный в папке примеров Gatsby. Я разветвил проект Gatsby и создал здесь отправную точку с простой аутентификацией: https://github.com/mlomboglia/simple-auth.

Просто клонируйте проект:

$ git clone https://github.com/mlomboglia/simple-auth
$ cd simple-auth

Я предполагаю, что у вас уже установлен NodeJS. Если нет, вы можете установить его здесь:



Загрузить | Node.js
Node.js® – это среда выполнения JavaScript, созданная на базе JavaScript-движка Chrome V8.nodejs.org



Обновите до последней версии Gatsby

В корневой папке вашего проекта

$ npm install gatsby@latest --legacy-peer-deps

Настройка Firebase

Firebase Authentication предоставляет серверные службы, простые в использовании SDK и готовые библиотеки пользовательского интерфейса для аутентификации пользователей в вашем приложении. Он поддерживает аутентификацию с использованием паролей, телефонных номеров, популярных поставщиков федеративных удостоверений, таких как Google, Facebook и Twitter, и т. д.

Firebase Authentication тесно интегрируется с другими сервисами Firebase и использует отраслевые стандарты, такие как OAuth 2.0 и OpenID Connect, поэтому его можно легко интегрировать с вашим настраиваемым бэкендом.

Для этой демонстрации я настрою поставщика аутентификации по электронной почте/паролю. Доступны многие другие варианты.

Откройте консоль Firebase.

Добавьте новый проект, выберите имя и создайте проект:

Нажмите на веб-значок, чтобы добавить новое веб-приложение:

Скопируйте элементы конфигурации Firebase и сохраните их на потом.

Я добавлю их как переменные окружения.

Нажмите «Аутентификация».

Включите опцию «Электронная почта/пароль».

В корневой папке вашего проекта установите Firebase SDK.

$ npm i firebase

Компонент Firebase

Теперь давайте создадим компонент Firebase.

Откройте свою любимую IDE. Я использую код Visual Studio.

Создайте папку Firebase на своем src/components.

Создайте Firebase.js файл:

Переменные среды

Gatsby имеет встроенную поддержку загрузки переменных среды в браузер и функции.

Чтобы загрузить их в Node.js, добавьте следующий фрагмент кода в начало файла gatsby-config.js:

require("dotenv").config({
   path: `.env.${process.env.NODE_ENV}`, 
})

В процессе разработки Gatsby будет загружать переменные среды из файла с именем .env.development. Для сборок он будет загружаться из .env.production.

Создайте файл env.development в корневой папке проекта.

Добавьте следующие переменные:

GATSBY_FIREBASE_API_KEY=<from firebase console config>
GATSBY_FIREBASE_AUTH_DOMAIN=<from firebase console config>
GATSBY_FIREBASE_DATABASE_URL=<from firebase console config>
GATSBY_FIREBASE_PROJECT_ID=<from firebase console config>
GATSBY_FIREBASE_STORAGE_BUCKET=<from firebase console config>
GATSBY_FIREBASE_MESSAGING_SENDER_ID=<from firebase console config>
GATSBY_FIREBASE_APP_ID=<from firebase console config>
GATSBY_FIREBASE_MEASUREMENT_ID=<from firebase console config>

Добавьте .env* файлов в .gitignore

Файлы переменных среды не следует фиксировать в Git, поскольку они часто содержат секреты, которые небезопасно добавлять в Git. Вместо этого добавьте .env.* в файл .gitignore и настройте переменные среды вручную в Gatsby Cloud и локально.

Контекстный API реакции

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

Подробнее о Context можно прочитать в Документации React.

Контекст

Создайте папку Auth внутри папки компонентов.

Создайте файл AuthContext.js.

Чтобы все наши компоненты в нашем приложении стали потребителями контекста, нам нужно обернуть наш пользовательский компонент <AuthProvider> вокруг корневого элемента Gatsby.

Давайте используем вспомогательный функциональный компонент wrapRootElement в нашем файле AuthContext.js, который экспортирует наш компонент <AuthProvider>, обернутый вокруг реквизита { element }, который будет передан нашей функции wrapRootElement. Все, что нам нужно сделать сейчас, это использовать gatsby-browser.js для импорта (и немедленного экспорта) нашей функции wrapRootElement.

Откройте gatsby-browser.js в каталоге проекта и добавьте:

Положение дел

Компонент «Статус» покажет, аутентифицирован ли пользователь или нет.

Отредактируйте index.js в папке Status:

Маршрутизация

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

Используя библиотеку @reach/router, вы можете создавать маршруты, доступные только авторизованным пользователям. Эта библиотека используется Гэтсби под капотом, поэтому вам даже не нужно ее устанавливать.

Сначала создайте gatsby-node.js в корневом каталоге вашего проекта. Вы определите, что любой маршрут, начинающийся с /app/, является частью вашего контента с ограниченным доступом, и страница будет создаваться по запросу:

Теперь мы собираемся создать страницу в нашей папке ./src/pages/ с именем app.js, которая будет импортировать наши компоненты и использовать помощник из библиотеки @reach/router для обработки динамической маршрутизации только для клиента. Создайте файл в ./src/pages/app.js, который будет выглядеть так:

Логин Маршрут

Для компонента Login я буду использовать метод signInWithEmailAndPassword, доступный в библиотеке firebase/auth:

Создайте Login.js в папке компонентов

Регистрация Маршрут

Чтобы зарегистрировать пользователя, мы можем использовать метод createUserWithEmailAndPassword, доступный в компоненте firebase/auth:

Создайте Register.js в папке компонентов

Сбросить пароль Маршрут

Аналогично для сброса пароля, я буду использовать sendPasswordResetEmail

Создайте Reset.js:

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

Компонент частного маршрута

Компонент <PrivateRoute /> проверит, аутентифицирован ли пользователь или нет. Если текущий пользователь существует, он загрузит закрытый компонент.

Создайте PrivateRoute.js в папке компонентов.

Безопасный маршрут профиля

Маршрут профиля будет загружен, если пользователь аутентифицирован.

Создайте Profile.js в папке components.

Заголовок

На своем Header/index.js скорректируйте ссылку на <Link to=”/app/profile” className={header__link}>

Тестирование

Теперь мы готовы протестировать приложение

Запустите приложение, используя $ gatsby develop

Открыть http://localhost:8000/

Зарегистрируйте нового пользователя, войдите в систему, чтобы перейти к экрану профиля.

Рабочее демо-приложение доступно здесь

Полный исходный код доступен здесь:



GitHub — mlomboglia/gatsby-auth-firebase: Процесс аутентификации Gatsby с Firebase
Процесс аутентификации Gatsby с Firebase. Внесите свой вклад в разработку mlomboglia/gatsby-auth-firebase, создав…github.com



Развертывание сети

Давайте развернем наше приложение на Netlify.

Зафиксируйте весь свой код в своем любимом провайдере Git, таком как Github.

Создайте учетную запись Netlify (регистрация бесплатна), если у вас ее нет.

Шаг 1: Добавьте свой новый сайт

Нажмите кнопку Добавить новый сайт → Импортировать из шаблона.

Шаг 2. Установите связь с вашим поставщиком Git (или поддерживаемым инструментом контроля версий)

Я использую GitHub. Отправьте свое репо на GitHub, так что все, что нам нужно сделать, это связать Netlify с GitHub. Нажмите кнопку GitHub, как показано на снимке экрана выше.

Шаг 3: Авторизуйте Netlify

Если это не авторизовано, разрешите Netlify и GitHub общаться друг с другом, нажав кнопку «Авторизовать».

Шаг 4: выберите репозиторий

Теперь, когда вы подключили Netlify и GitHub, вы можете увидеть список своих репозиториев Git. Выберите репозиторий, который вы хотите развернуть, из списка. Нажмите Развернуть сайт.

Через несколько минут вы увидите свой новый сайт в списке.

Шаг 5: Настройте параметры

Нажмите «Настройки сайта» → «Сборка и развертывание» → «Среда».

Добавьте свои переменные среды, как они есть в файле env.development.

Шаг 6: Создайте свой сайт

Восстановите свой сайт!

Шаг 7. Авторизуйте свой домен в Firebase

Теперь нам нужно авторизовать новый домен в Firebase.

Перейдите в консоль Firebase → Аутентификация → Настройки.

Нажмите «Добавить домен» и добавьте домен развернутого приложения Netlify в список авторизованных.

Шаг 8: Протестируйте свое приложение в Netlify

Щелкните URL-адрес своего приложения в Netlify, и у вас должна быть полная рабочая версия потока аутентификации Gatsby с развернутым Firebase.

Сделанный!