Учебное пособие по реализации 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.