Учебное пособие по реализации OAuth и аутентификации по электронной почте (без пароля) с использованием NextAuth.js.

NextAuth.js - это библиотека для простой и безопасной реализации аутентификации OAuth и по электронной почте / без пароля в приложениях Next.js. . N̶e̶x̶t̶A̶u̶t̶h̶.̶j̶s̶ У2 был выпущен в июне 2020 г., и в настоящее время ̶ v3 НАХОДИТСЯ В СТАДИИ ̶d̶e̶v̶e̶l̶o̶p̶m̶e̶n̶t̶.̶ Частое Улучшений свидетельство GOOD ̶p̶r̶o̶d̶u̶c̶t̶.̶

Давайте попробуем NextAuth.js v3!

Что мы будем:

  • Создайте новое приложение Next.js
  • Используйте NextAuth.js с SQLite
  • Войти через Google

Создайте приложение Next.js

Создайте новое приложение Next.js, используя create-next-app, которое в этом руководстве называется next-auth-app:

yarn create next-app next-auth-app

Запустите dev сервер и посмотрите результат в своем браузере:

cd next-auth-app
yarn dev

Затем мы построим простую основу для реализации аутентификации.

Замените файл index.js в каталоге pages следующим образом:

Создайте компонент Макет, который будет общим для всех страниц:

Создайте компонент Заголовок:

Взглянем на страницу:

Используйте NextAuth.js

Давайте добавим аутентификацию с NextAuth.js в приложение Next.js.

Конфигурация

Сначала установите next-auth:

yarn add next-auth

Затем добавьте маршрут API:

  • Создайте каталог с именем auth в pages/api.
  • Создайте файл с именем [...nextauth].js в pages/api/auth.

Затем создайте файл верхнего уровня с именем .env.local и настройте переменные среды:

NEXTAUTH_URL=http://localhost:3000
GOOGLE_ID=<YOUR GOOGLE ID>
GOOGLE_SECRET=<YOUR GOOGLE SECRET>
FACEBOOK_ID=
FACEBOOK_SECRET=
TWITTER_ID=
TWITTER_SECRET=
GITHUB_ID=
GITHUB_SECRET=
EMAIL_SERVER=smtp://username:[email protected]:587
EMAIL_FROM=NextAuth <[email protected]>
DATABASE_URL=sqlite://localhost/:memory:?synchronize=true

В этом руководстве в качестве примера мы войдем в систему с помощью Google. Выполните Настройка OAuth 2.0, чтобы создать идентификатор клиента OAuth 2.0. URL-адрес обратного вызова установлен как {server}/api/auth/callback/{provider}. Для Google OAuth используйте http://localhost:3000/api/auth/callback/google.

Если вы используете вход по электронной почте, правильно установите EMAIL_SERVER и EMAIL_FROM. Дополнительные сведения о настройке SMTP-сервера см. В разделе Электронная почта в документации NextAuth.js.

Если вы хотите использовать Gmail для отправки электронных писем, см. Использование Gmail - Nodemailer.

Кроме того, для использования входа по электронной почте и сохранения данных пользователя необходимо указать базу данных. Для SQLite установите sqlite://localhost/:memory:?synchronize=true, как указано выше.

Установить sqlite3:

yarn add sqlite3

Добавить крючок

Добавьте хук useSession(), предоставленный NextAuth.js, в components/header.js и обновите его следующим образом:

Дисплей переключается в зависимости от того, вошел ли пользователь в систему или нет.

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

Также создайте защищенную страницу для вошедшего в систему пользователя:

Добавить провайдера

Использование поставляемого React <Provider> позволяет экземплярам useSession() совместно использовать объект сеанса между компонентами, используя React Context под капотом.

Это повышает производительность, снижает количество сетевых вызовов и предотвращает мерцание страницы при рендеринге. Настоятельно рекомендуется, и его можно легко добавить на все страницы в приложениях Next.js с помощью pages/_app.js.

Как отмечено в документации NextAuth.js. Следуйте этому, чтобы создать страницу _app.js и добавить <Provider>:

Вот и все!

Войти через Google

Теперь давайте войдем с помощью Google OAuth.

Сначала перезапустите сервер dev, чтобы загрузить переменные среды. Затем перейдите к http://localhost:3000/ и нажмите кнопку Sign in:

Попробуйте войти в систему с помощью Google. После успешного входа вы должны увидеть:

Щелкните значок аватара, чтобы перейти на страницу профиля:

Потрясающие! Нам удалось реализовать аутентификацию с помощью всего нескольких строк кода.

Что еще проверить:

  • выход
  • Войти с помощью электронной почты

Кстати, если вы попытаетесь войти в систему с помощью Google (например, [email protected]) после входа в систему с помощью электронной почты (например, [email protected]) и создания учетной записи, результат будет следующим:

И наоборот, если вы сначала войдете в систему с помощью Google, а затем войдете с тем же адресом электронной почты в следующий раз, вы войдете в систему с помощью Google. Это не приведет к созданию дублирующих учетных записей. Отлично!

Заключение

Реализация аутентификации - одна из самых сложных задач, особенно для новичков в программировании. В частности, вы должны уделять пристальное внимание безопасности. NextAuth.js ориентирован на безопасность и очень прост в использовании. Оно того стоит!

Вы можете найти код этого руководства на GitHub.

Первоначально опубликовано на https://kjmczk.dev.