Next.js встречает Firebase и mobx | II
Эпизод 2 | Аутентификация Firebase
В предыдущей статье мы создали простое приложение, которое автоматически показывает случайное приветственное сообщение. Мы использовали только mobx и next.js и еще не трогали firebase.
В этой статье мы добавим аутентификацию через провайдера google oauth firebases и будем отслеживать состояние пользователя в магазине mobx. Это очень похоже на все другие решения, предлагаемые firebase (facebook, github, twitter, custom) - не стесняйтесь спрашивать, есть ли у вас проблемы.
Создание хранилища аутентификации
Включить поставщиков аутентификации в firebase
Аутентификация с помощью firebase чрезвычайно проста: включив нужных поставщиков аутентификации в консоли firebase, вы практически готовы к работе.
Подключите наше приложение
Все, что нам нужно сделать сейчас, - это инициализировать наше приложение и убедиться, что оно инициализировано только один раз:
Теперь мы можем начать аутентификацию наших пользователей:
Это было слишком просто!… Так что давайте перенесем аутентификацию в хранилище mobx и будем прислушиваться к изменениям состояния аутентификации вместо того, чтобы выполнять обещание. Таким образом, мы можем постоянно сохранять состояние аутентификации на страницах и даже перезагружать страницу, поскольку прослушиватель authStateChanged срабатывает автоматически!
Мы создали наблюдаемый пользовательский объект, в котором мы храним пользовательские данные - теперь мы можем просто использовать его везде и изменять наши представления в зависимости от состояния пользователя.
Разве это не круто? ❤
Теперь мы можем в основном использовать шаблон внедрения, как описано в предыдущей статье, и встроить наблюдаемый пользовательский объект где-нибудь на странице - например, виджет аватара, который отображает изображение пользователя в Google +.
Забрать
Использовать firebase для базовой аутентификации до смешного просто - в основном это однострочный интерфейс, и даже если добавить приправы с помощью mobx и next.js-SSR, все не усложняется.
Вы можете найти репозиторий git в этом состоянии с тегом v.0.0.2.
Разное
В прошлый раз мы не добавляли линтер, но как мы все знаем:
Линтинг важен!
Так что давай сделаем это сейчас! С next.js вы можете использовать любой линтер, который вам нравится. Чтобы упростить задачу, давайте возьмем standard.js, который используется next.js внутри компании. Просто установите модуль через:
npm install standard --save-dev
Теперь вы можете использовать префикс практически для каждого сценария npm, который вам нравится, с помощью withstandard &&, и он будет содержать ваш код перед запуском! Я лично рекомендовал бы вместо этого использовать eslint with airbnb, так как он поставляется с множеством хороших рекомендаций по шаблонам кода реакции. Я особенно большой поклонник jsx-a11y, который помогает вам с расширенными возможностями в приложениях React. Установка немного сложнее, поскольку требует гораздо больше зависимостей, чем standard.js, но я бы сказал, что оно того стоит. Просто следуйте инструкциям по npmjs, и все готово.
В следующем эпизоде мы будем использовать базу данных firebase для хранения пользовательских данных и создания некоторых правил проверки. Следите за обновлениями и не забудьте подписаться ❤
