Недавно получил заказ на фрилансе: Сделать аутентификацию через magic link, сохранить пользователя в firestore и сделать еще десять тысяч манипуляций со сторонним сервисом. В этой статье оставим аутентификацию через firebase.
Пререквизиты.
- Начальные знания react.
- Начальные знания node js и npm.
Next.js
Создаём проект на next.js.
npx create-next-app firebase-auth
Возможно вы уже пользовались npx, но не знали что она делает. Сейчас расскажу.
npx – утилита для запуска бинарников npm пакетов. Чтобы запускать локальные зависимости из node_modules мы обычно пишем:
./node_modules/.bin/<название команды>
Писать две директории, тем более какому-нибудь новичку – неудобно. Гораздо проще написать:
npx <навзание команды>
По-умолчанию npx сначала смотрит есть ли команда в переменной $PATH или локально. Если нет, то он устанавливает её из центрального кэша и запускает. C npx разобрались, теперь Next.js.
Next.js – реакт фрейворк, который не требует настроек для проекта. "Под капотом" уже есть: роутинг, ssr, babel, typescript, иструмент для оптимизации картинок. Есть даже возможность создавать своё API на next.js. Базовое наименование роутинга для этого тоже предусмотрено.
Firebase – облачный сервер с инструментами для облегчения разработки. Туда входят: разные методы аутентификации, база данных, инcтрументы для гугл аналитики, A/B тестирования и много разных функций.
Прежде чем начнём писать код, установим необходимые зависимости:
npm install firebase
Напишем, как наша программа должна работать.
- На странице auth пользователь вводит свой email, нажимает на кнопку sign in и на почту ему должна прийти ссылка с приглашением.
- Когда пользователь перешел по ссылке сохраняем его токен в localstorage.
- На странице dashboard проверяем: есть ли токен в localstorage. Если нет , делам редайрект на страницу auth.
Всё, начинаем писать код! Начнем с настройки firebase. Инструкция будет в кантинках.
- Заходим на вкладку authentification, нажимаем get started. Видим список провайдеров.
- В правом углу у пройвадера Email/Password нажимаем на карандаш и в открывши. В окне, которое открылось включаем все настройки включаем все настройки и нажимаем save.
Заходим в настройки и регистрируем приложение.
Далее создаем файл firebase.js, копируем кусок с настройками и экпортируем firebase.
Далее буду объяснять только основные места. По реакту ходить не буду, думаю сами разберетесь, там легко.
В index.js пишем такой код.
- 30-34 строчка – проверяем, если есть токен, переходим в dashboard
- C 16 по 26 строчку – логика для отправки формы. С помощью функции firebase.auth().sendSignInLinkToEmail ссылку на почту. Первый аргумент функции – почта, второй – объект с настройками. Ключ url – ссылка, на которую перебросит пользователя при подтверждении. Указываем на dashboard. Ключ handleCodeInApp при отправке почты должен быть true. Подробнее о настройках.
- В 20 строчке сохраняем почту в localStorage. Она нам понадобиться в файле dashboard.js
- setSending – функция для управления загрузкой при отправке. setMessage – для сообщения, чтобы понимать работоспособность.
Круто. Ссылку для подтверждения отправили. Теперь создаем файл dashboard.js с таким кодом:
Здесь у нас есть логика входа и логика выхода. Начнем с логики входа. Выполняется она сразу после первого монтирования компонента с 20 по 46 строчку. Мы сначала посмотрим на код с 28 по 48 строчку кода.
- 28 строчка – проверяем есть ли у нас token и, с помощью firebase.auth().currentUser смотрим, нет ли у нас вошедшего пользователя.
- На 29 сточке проверяем: ссылка ли это для входа через почту.
- На 30 строчке вызываем функцию fbSignIn, в которой есть асинхронная функция для входа: firebase.auth().signInWithEmailLink(email, window.location.href); Как раз здесь нам она и нужна. Помните мы сохранили ранее в index.js. А сейчас мы её взяли из localStorage на 21 строчке. В этой функции почта идет первым аргументом, вторым идет наш url.
- На 33 строчке мы берем токен у пользователя, который зашел. Cохраняем в localstorage.
- На 44 строчке, если у нас есть token мы просто убираем загрузку и никаких редайректов c помощью router.push тут нет.
- Логика выхода при клике на кнопку начинается на 9 строчке. Удаляем token из localstorage и перебрасываем пользователя на станицу регистрации.
Теперь можно запустить и проверить приложение с помощью npm run dev.
Здесь мы узнали основные функции для аутентификации у firebase, немного о next.js, npx. Что самое главное – написали прототип приложения, который можно использовать в будущем. Снизу оставляю ссылку на код
https://github.com/exoriri/passwordless-auth-article.
Надеюсь было полезно. Пока!