Руководство по аутентификации без пароля с помощью NextAuth.js и MongoDB.
Беспарольная аутентификация позволяет пользователям входить на сайт без предоставления и регистрации пароля. Даже если его нельзя считать абсолютно безопасным (как и любой метод входа в систему), он полностью игнорирует выбор пользователем пароля, который обычно является самой слабой частью процесса входа в систему.
При входе без пароля для аутентификации используются так называемые факторы владения: одноразовый пароль, доступ к зарегистрированному устройству, биометрические данные и магические ссылки, отправляемые на электронную почту пользователя, которую мы и реализуем.
Рабочий процесс
В нашем случае (беспарольная аутентификация с помощью волшебной ссылки) пользователь предоставляет адрес электронной почты сервису/веб-сайту, на который он/она хочет войти, веб-сайт сгенерирует одноразовый токен, который будет отправлен на адрес электронной почты пользователя (внутри ссылка для входа) и хранится где-то на сервере.
Как только пользователь нажимает на ссылку, токен сравнивается с токеном на сервере, и если он совпадает, пользователь аутентифицируется. Пользователь также хранится на сервере, так что при следующих входах в систему с тем же адресом электронной почты пользователь будет распознан.
Чтобы интегрировать этот тип аутентификации в приложение Next.js, мы будем использовать NextAuth.js, решение аутентификации для Next.js, которое поддерживает широкий спектр методов аутентификации и поддержку базы данных, мы решили хранить данные на сервере MongoDB, поскольку, судя по нашим тестам, он выглядит более надежным и простым в реализации
Предпосылки
Для продолжения вам понадобятся:
- Базовые знания Next.js, особенно системы маршрутизации/страниц.
- Доступ к базе данных MongoDB может быть локальным или удаленным (например, MongoDB Atlas).
- Базовые знания по управлению пакетами Node.
- SMTP-сервер, к которому вы можете получить доступ для отправки электронных писем, вы можете использовать локальный или удаленный сервис (например, Mailjet или Sendinblue, если вы используете Google Workspace, вы также можете использовать Gmail SMTP)
Настройка приложения
Создайте новое приложение Next.js с помощью следующей команды:
npx create-next-app some-project-name
Установите необходимые модули:
npm install nodemailer npm install next-auth @next-auth/mongodb-adapter mongodb
Создайте секретный ключ (необязательно для разработки, но требуется для производства)
openssl rand -base64 32
На этом этапе вы можете настроить файл среды .env.local со всей необходимой конфигурацией:
Вам необходимо заполнить данные вашего SMTP-сервера, адрес электронной почты, с которого вы хотите отправлять электронные письма, строку подключения к вашему серверу MongoDB. Здесь вы можете добавить секретный ключ и базовый URL-адрес приложения.
Создайте файл pages/lib/mongodb.js, в соответствии с документацией и примером Next.js, это правильный способ подключения к серверу MongoDB и совместного использования подключения с приложением:
Теперь нам нужна страница, которая будет реагировать на все конечные точки API NextAuth.js (форма входа, ошибки, уведомление). Мы будем использовать общий маршрут Next.js, создав следующий файл: pages/api/auth/[...nextauth].js. Он автоматически отобразит предопределенные страницы NextAuth.js (подробнее о настройке позже).
В этом файле мы просто определяем, какой адаптер для хранения данных (MongoDB) и какие методы аутентификации мы будем использовать в нашем приложении (в данном случае мы используем только электронную почту, но мы можем добавить больше позже) и его конфигурацию. Мы также указали, что хотим использовать JWT, чтобы не запрашивать базу данных при каждом запросе.
Теперь мы готовы к тестированию аутентификации, если вы перейдете по следующему URL-адресу:
https://localhost:3000/api/auth/signin
вы увидите форму, запрашивающую вашу электронную почту (она использует стандартный интерфейс NextAuth.js):
Отправив свой адрес электронной почты, вы получите электронное письмо с кнопкой входа. Нажав на кнопку входа, вы вернетесь на сайт:
На данный момент рабочий процесс аутентификации работает правильно, но нам нужен способ проверить, аутентифицирован ли пользователь, защищена ли страница и так далее.
Для этого нам нужно обернуть все страницы нашего приложения в SessionProvider, который предоставляется NextAuth.js и будет обрабатывать сеанс пользователя и статус аутентификации. Для начала нам нужно изменить файл _app.js, чтобы включить SessionProvider, чтобы параметр сеанса был доступен на всем сайте и мог использоваться для проверки подлинности пользователя:
Затем мы можем изменить наш файл index.js простым способом, чтобы увидеть, аутентифицированы мы или нет:
В файле мы проверяем сеанс пользователя, если он присутствует, мы предполагаем, что пользователь аутентифицирован; signIn и signOut — это две предоставляемые конечные точки API NextAuth.js. Объект useSession также содержит статус, который может иметь 3 значения: loading | authenticated | unauthenticated, который также можно использовать для более точного управления тем, что отображать пользователю.
С помощью useSession отдельные страницы могут быть доступны только аутентифицированным пользователям, неавторизованным пользователям будет представлена форма входа, и они будут перенаправлены на страницу, которую они начали после успешного входа в систему:
Настройка
Все страницы NextAuth.js (формы входа, страницы ошибок, уведомления) и сообщения электронной почты можно настроить.
Страницы можно настроить, добавив раздел pages в [...nextauth].js:
Вам, вероятно, потребуется настроить страницу Sign In, просто создайте pages/auth/signin.js, которая отправит адрес электронной почты (и csfrToken) в конечную точку API подписи:
Настройка электронной почты по-прежнему будет происходить в [...nextauth].js, вам нужно будет передать функцию в sendVerificationRequestопцию EmailProvider():
Что дальше
NextAuth.js поддерживает большое количество служб аутентификации, вы можете расширить свою форму входа с помощью входа через социальные сети (например, Facebook, Twitter и Google). Он также поддерживает вход с произвольными учетными данными, если у вас уже есть база пользователей с данными для входа, вы можете подключить к ней NextAuth.js.
И вот оно. Спасибо за чтение.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
