Аутентификация является ключевым компонентом разработки приложений. Это помогает защитить пользовательские данные и предотвратить злонамеренные действия. Проще говоря, он определяет достоверность личности пользователя, гарантируя, что только авторизованные пользователи могут получить доступ к приложению и его ресурсам.
Создание пользовательской системы аутентификации может занять много времени, и именно здесь NextAuth.js пригодится. Он обеспечивает безопасную поддержку аутентификации для приложений, созданных с помощью платформы Next.js.
Что такое NextAuth.js?
NextAuth.js представляет собой облегченную библиотеку с открытым исходным кодом, которая предоставляет аутентификация и авторизация поддержка приложений Next.js. Это позволяет разработчикам быстро и легко настраивать аутентификацию и авторизацию для своих приложений Next.js. Он предоставляет такие функции, как аутентификация с несколькими поставщиками, электронная почта и аутентификация без пароля.
Как NextAuth.js работает при аутентификации?
Решение для аутентификации NextAuth.js предоставляет клиентский API, который вы можете интегрировать в ваше приложение Next.js. Вы можете использовать его для аутентификации пользователей с помощью разных поставщиков входа, с которыми они создали учетные записи.
Под капотом пользователи перенаправляются на страницу входа провайдера. После успешной проверки подлинности поставщик возвращает данные сеанса, содержащие полезные данные пользователя. Затем эта полезная нагрузка может авторизовать доступ к приложению и его ресурсам.
Новые обновления функций в NextAuth.js (v4)
В декабре 2022 года NextAuth.js выпустила четвертую версию. Эта версия была улучшена по сравнению с предыдущей версией, v3, с новыми обновлениями и модификациями. Изменения в основном направлены на улучшение использования библиотеки в процессе аутентификации.
1. Обновления хука useSession
Вы можете использовать хук useSession, чтобы проверить, вошел ли пользователь в систему или нет. В этой новой версии хук useSession возвращает объект, который обеспечивает более простой способ проверки состояний благодаря добавлению параметра состояния. См. код ниже:
Импортировать { использовать сеанс } от"следующая аутентификация/реакция"экспортпо умолчаниюфункцияКомпонент() {
константа { данные: сеанс, статус } = useSession()если (положение дел "аутентифицированный") {
возвращаться<п>Выполнен вход как {session.user.email}п>
}
возвращаться<п> Не авторизован п>
}
2. Контекст SessionProvider становится обязательным
Новая четвертая версия требует использования контекста SessionProvider. Это означает, что вам придется обернуть свое приложение с помощью провайдера useSession. NextAuth.js рекомендует обернуть ваше приложение в _app.jsx файл.
Кроме того, метод clientMaxAge был заменен на refetchInterval. Это упростит периодическую загрузку сеанса в фоновом режиме.
Импортировать { Провайдер сеансов } от"следующая аутентификация/реакция"
экспортпо умолчаниюфункцияПриложение({
Компонент, pageProps: {сеанс, ...pageProps},
}) {
возвращаться (
<SessionProviderсеанс={сессия}refetchInterval={5 * 60}>
<Компонент {...pageProps} />SessionProvider>
)
}
3. Импорт поставщиков по отдельности
NextAuth.js предоставляет несколько сервисов провайдеров, которые можно использовать для входа пользователя. Они включают:
- Использование встроенных поставщиков OAuth (например, GitHub, Google).
- Использование провайдера электронной почты.
В этой новой версии вам необходимо импортировать каждого провайдера по отдельности.
Импортировать GoogleProvider от"следующая авторизация/поставщики/гугл"
Импортировать Auth0Provider от"следующая аутентификация/провайдеры/аутентификация0";4. Другие незначительные изменения
- Импорт на стороне клиента был переименован в next-auth/react с next-auth/client.
- Изменения в аргументах методов обратного вызова:
signIn({ пользователь, учетная запись, профиль, электронная почта, учетные данные})
сеанс ({ сеанс, токен, пользователь })
jwt({ токен, пользователь, учетная запись, профиль, isNewUser })
Начало работы с NextAuth.js в аутентификации
Чтобы интегрировать NextAuth.js в ваши приложения Next.js, выполните следующие действия:
- Создайте приложение Next.js, выполнив эту команду: npx создать следующее приложение
- Бегать npm установить следующую авторизацию в вашем терминале, чтобы установить NextAuth.js в ваше приложение Next.js.
- Посетить NextAuth.js официальной документации и выберите предпочитаемого провайдера из списка поддерживаемых. Затем создайте учетную запись в консоли разработчика выбранного вами провайдера и зарегистрируйте свое приложение Next.js.
- В консоли разработчика выбранного вами провайдера/ов укажите URL домашнего маршрута и URL перенаправления обратного вызова, сохраните изменения и скопируйте ID клиента и Секрет клиента.
- В корневом каталоге приложения Next.js создайте файл .env для хранения ID клиента и Секрет клиента.
- Наконец, в каталоге /pages/api создайте новую папку с именем авторизация. В папке auth создайте новый файл и назовите его [...nextauth].js. В созданный файл добавьте приведенный ниже код. В коде показан клиентский API NextAuth.js с использованием поставщика Google:
Импортировать GoogleProvider от"следующая авторизация/поставщики/гугл";
провайдеры: [
GoogleProvider({
ID клиента: процесс.env.GOOGLE_CLIENT_ID,
clientSecret: процесс.env.GOOGLE_CLIENT_SECRET
})
]
Теперь вы можете продолжить и создать страницу аутентификации входа. Вот рендеринг DOM для компонента входа:
Импортировать Реагировать от«реагировать»;
Импортировать { useSession, вход, выход } от"следующая аутентификация/реакция"экспортпо умолчаниюфункцияКомпонент() {
константа { данные: сеанс } = useSession()если (сеанс) {
возвращаться (
<>
<п> Выполнен вход как {session.user.email} п>
<кнопкапо щелчку={() => signOut()}>Выйтикнопка>
)
}
возвращаться (
<>
<п> Не авторизован п>
<кнопкапо щелчку={() => signIn()}>Войтикнопка>
)
}
useSession Хук обращается к текущему объекту сеанса пользователя. Когда пользователь входит в систему и проходит аутентификацию в Google, возвращается объект сеанса с полезной нагрузкой пользователя. Это позволяет Next.js отображать информацию о пользователе на стороне клиента приложения, в данном случае электронную почту.
Пользовательские системы аутентификации vs. Готовые к использованию решения, такие как NextAuth.js
Выбор между созданием пользовательской системы аутентификации и интеграцией готовой к использованию аутентификации решение, такое как NextAuth.js, важно учитывать стоимость, сложность и безопасность каждого решение.
Если у вас есть ресурсы и опыт для разработки пользовательской системы аутентификации, это может быть лучшим подходом для вас. Однако, если вы ищете готовое решение, простое в реализации, безопасное и экономичное, то NextAuth.js может быть хорошим выбором. В конечном итоге выбор будет зависеть от ваших потребностей и предпочтений.