NextJS 13: Аутентификация и приватные роуты
NextJS 13 предоставляет мощные возможности для реализации аутентификации и создания приватных роутов в вашем приложении.
Для начала работы с аутентификацией в NextJS 13, необходимо установить и настроить библиотеку NextAuth.js. Она предоставляет готовое решение для работы с различными провайдерами аутентификации, такими как Google, Facebook, GitHub, и другими. Установить NextAuth.js можно с помощью npm:
npm install next-auth
После установки необходимо настроить провайдеры аутентификации, добавить их конфигурацию в файл next-auth.config.js, а затем использовать hoc (higher order component) next-auth/client для создания приватных роутов в вашем приложении.
Пример использования next-auth/client для создания приватного роута:
import { useSession } from 'next-auth/client';
const PrivateRoute = () => {
const [session, loading] = useSession();
if (loading) {
return
}
if (!session) {
return
}
return
}
export default PrivateRoute;
В этом примере мы используем хук useSession для получения информации о текущей сессии пользователя. Если пользователь не аутентифицирован, мы отображаем сообщение “Unauthorized”, в противном случае выводим приветственное сообщение с электронной почтой пользователя.
NextJS 13 также предоставляет возможность создания защищенных API роутов, которые могут быть доступны только аутентифицированным пользователям. Для этого необходимо использовать hoc next-auth/protected-routes.
NextJS 13 отлично подходит для создания безопасных и защищенных приложений с помощью гибких возможностей аутентификации и приватных роутов. С его помощью можно легко реализовать безопасную аутентификацию и авторизацию в ваших приложениях.
На 9:50 мы создаем Клиентский компонент – Provider, и оборачиваем в него все остальное, получается, что все компоненты внутри Provider будут клиентскими?
Спасибо.
Комментарий для поддержки канала. Очень помогают ваши видео глубже разобраться в теме. Особенно нравится ваше объяснение со стороны человека, который глобально может оценить задачу. Спасибо
Не подскажет ли кто нибудь как подцепить "Одноклассников" в nextauth?
Это однозначно самый лучший контент по JavaScript, который я видел в интернете за год обучения. Автор умеет удивлять, умеет подбирать контент и никогда не даёт лишней информации и воды, за что огромный респект. Такой труд очень дорогого стоит. Если будет какой-то курс, то я точно буду первым в списке покупателей.
Не совсем понятна концепция хэндлеров и апи – получается, что эта история нужна нам, когда мы отказываемся от бэка и все бэковские задачи перетаскиваем на фронт?
почему на гитхабе код другой?
Спасибо за великолепную подачу и полезное видео! По поводу автоимпорта, тоже порой не подхватывает, но после полного написания, помогает сочетание клавиш "ctrl + ." на элементе, который необходимо импортировать
Могу ли я в googleProviders использовать authorize и делать запрос на сервер через axios что бы сохранить пользователя в базе? Либо authorize функция только для credentialProviders?
Спасибо большое
Михаил запиши, пожалуйста, видеоурок от самого начала создания полноценного приложения на Next JS + Type Script и к нему добавить Базу данных на Mongo. Твои уроки как голоток свежего воздуха на русскоязычном ютубе!
подскажите пожалуйста google cloud – платный ? вижу про кредит в 300$
А за видео отдельное спасибо! Всё разложено по полочкам. Всё как всегда прекрасно, Михаил!
Я все повторил как в видео, однако есть нюанс что когда после логинизации отрисовывается страница то на 1сек видно кнопку "Логин". Можно ли как то от этого избавиться?
Годно, спасибо
Как сделать все страницы protected и при этом через /signin вошел бы? ну для админки
Хочу предложить идею видео по добавлению к проекту NextJs с AuthJs интернационализации с поддержкой AppRouter (например Next-Intl). Очень как-то не просто подружить два пакета, работающих как middleware, с NextJs. Даже не смотря на наличие документации, при отсутствии полного рабочего примера приложения задача оказывается совсем не тривиальной. В инете эту тему ещё вообще никто полностью не раскрывал, только вопросы без ответов на Stackoverflow.
У вас получилось отличное видео с разбором авторизации! И было бы здорово дополнить его другим роликом, где будет рассказано, как настраивать middleware пакеты при совместном использовании в NextJs.
Спасибо за познавательные видео!
Гугл завелся, а вот такая хрень при реализации навигации вылазит когда входишь в signin: "Error: This action with HTTP GET is not supported by NextAuth.js".
классно мы с этим разобрались, спасибо!)
Какой next сейчас для продакшена?