В этой статье мы создадим логин пользователя, используя Next.js с перехватчиками React. И мы защитим наше приложение с помощью функции аутентификации Firebase, которая позволяет только авторизованным пользователям получать доступ к частной странице.
Список моментов, на которых мы остановимся в этой статье:
- Настройка Next.js
- Компонент React
- Реагировать на крючок
- Аутентификация Firebase
- Сторонняя аутентификация с Google
Примечание. Для этого в нашей системе должны быть установлены Node.js и npm
Настройка Next.js
При создании проекта Next.js нам необходимо установить модуль create-next-app, который обеспечивает начальную настройку и настройку по умолчанию. Установите create-next-app командой:
npm install -g create-next-app
После завершения установки запустите проект Next.js в вашем локальном каталоге, где нам нужно создать проект, с помощью команды:
npx create-next-app next-login-firebase
После завершения установки переходим в нашу созданную папку:
cd next-login-firebase
Теперь мы закончили настройку нашего проекта Next.js.
Следующим шагом будет установка пакета Firebase и react-firebaseui.
npm i firebase react-firebaseui --save
Конфигурация Firebase для аутентификации
Firebase помогает нам с безопасным входом в систему, предоставляя методы мульти-аутентификации, такие как адрес электронной почты / пароль, Google, Facebook, Twitter и т. Д.
Перейдите на https://firebase.google.com/ и войдите со своими учетными данными.
После успешного входа в консоль Firebase мы создадим наш проект, нажав кнопку «Добавить проект», заполните форму имени проекта и следуйте инструкциям мастера:
Чтобы интегрировать наш проект Firebase в наш проект Next.js, перейдите в настройки проекта и найдите «Установка и конфигурация SDK», выберите радио «Конфигурация». Нам нужно будет скопировать фрагмент, который нужно добавить в код нашего проекта.
После создания проекта нажмите «Аутентификация» в левой части. Мы включим аутентификацию провайдера с помощью электронной почты / пароля и Google:
Написать код
В корневой папке создайте новый файл config.js с приведенным ниже кодом и сохраните его.
Откройте файл pages / index.js и отредактируйте с помощью приведенного ниже кода.
Для следующего шага установите пакет «js-cookie» командой:
npm i js-cookie
Создайте новый файл auth / userCookie.js, напишите следующий код:
Затем мы должны создать auth / useUser.js для обработки состояния пользователя, напишите следующий код:
Создайте файл с именем «auth / withAuth.js» для обработки изменения статуса авторизации и перенаправления на подписывающие страницы:
Создайте новую частную страницу с именем «pages / private.js», эта страница будет отображать электронную почту и кнопку выхода, если пользователь входит в систему.
На последнем этапе создайте новый файл «pages / signin.js» для визуализации канала входа. Это пример использования «react-firebaseui».
Наш код:
Больше контента на plainenglish.io
