NextJS 13. Аутентификация и приватные роуты

[@Пашечка-ф4в]

Михаил, все получилось благодаря вам. Вы за 30 минут магически объяснили материал, который обычно подается за несколько часов. А еще у вас голос очень приятный)

[@biLLie_wiLLie]

Спасибо за работу, Михаил! Если еще покажете про работу с призмой, то будет супер

[@unknown.6914]

Отличный урок Михаил. Спасибо вам за ваш труд.

[@Jbnvn]

Спасибо вам! Наконец-то я разберусь с этой аутентификацией🎉

[@exelione2229]

как же ты классно объясняешь, за 6 минут понял больше чем за день общения с нейросетью

[@me29_hi8]

Это однозначно самый лучший контент по JavaScript, который я видел в интернете за год обучения. Автор умеет удивлять, умеет подбирать контент и никогда не даёт лишней информации и воды, за что огромный респект. Такой труд очень дорогого стоит. Если будет какой-то курс, то я точно буду первым в списке покупателей.

[@vic_shine]

спасибо за урок! было бы круто расширить этот пример с помощью библиотеки Prisma и реальным примером работы с БД (сохранить данные после авторизации, etc). 😊

[@InstrumentiUA]

Михаил, спасибо за простой и понятный разбор библиотеки NextAUTH !!!

[@parmetra]

А за видео отдельное спасибо! Всё разложено по полочкам. Всё как всегда прекрасно, Михаил!

[@raulcaballero3004]

Комментарий для поддержки канала. Очень помогают ваши видео глубже разобраться в теме. Особенно нравится ваше объяснение со стороны человека, который глобально может оценить задачу. Спасибо

[@NikOroferov]

Комментарий приемлемой длины в благодарность за ролик

[@ДмитрийКарпов-в3н]

Великолепно, спасибо большое =) Очень было бы здорово если бы запили видео как работать с image в next js )))

[@ОлегКочиев-ч1е]

Очень подробное и познавательное видео! Спасибо Вам за него!

[@xasanovj.7919]

Огромное спасибо за подробные объяснения👍 жду новые уроки😊

[@Sylar7773]

Спасибо огромнющее, дай Вам Бог всего самого наилучшего!!!

[@ferraritestarossa]

Хочу предложить идею видео по добавлению к проекту NextJs с AuthJs интернационализации с поддержкой AppRouter (например Next-Intl). Очень как-то не просто подружить два пакета, работающих как middleware, с NextJs. Даже не смотря на наличие документации, при отсутствии полного рабочего примера приложения задача оказывается совсем не тривиальной. В инете эту тему ещё вообще никто полностью не раскрывал, только вопросы без ответов на Stackoverflow. У вас получилось отличное видео с разбором авторизации! И было бы здорово дополнить его другим роликом, где будет рассказано, как настраивать middleware пакеты при совместном использовании в NextJs. Спасибо за познавательные видео!

[@zeevnadiv8778]

супер!! очень доступно!!!

[@kaber6400]

Отличное видео, очень понятно про auth, хотелось бы посмотреть с куки, но это ладно)

[@maximbuldov9437]

Вопросов больше чем ответов) Как теперь работать redux, rtk query, mobx, react query Как правильно использовать axios, вместо fetch Как делать асинхронные запросы в серверных компонентах Как получать pathname в серверных компонентах Еще целую вечность ждать когда обновятся все документации 😢

[@ВладиславПетров-в3п]

Михаил запиши, пожалуйста, видеоурок от самого начала создания полноценного приложения на Next JS + Type Script и к нему добавить Базу данных на Mongo. Твои уроки как голоток свежего воздуха на русскоязычном ютубе!

[@antonsvyatchenko8876]

Жаль мне не попалось пару месяцев назад это видео. Спасибо.

[@ВалентинДжексон]

Михаил. Великолепные навыки ментора. Если будет у тебя интерес к теме next + ORM sequelize, сделай плиз. Хотелось бы глянуть как ты с сиквелом работаешь.

[@ilyamartynov2743]

Лучше typeorm, если призма сложновато. Sequelize не рекомендую, из-за кривой типизации

[@victormog]

Если не работают автоимпорты в VS Code (и по многим другим проблемам) можно попробовать Ctrl-Shift-P и выбрать "TypeScript: Перезапустить сервер TS (Restart TS Server)"

[@19fetisoff]

a можно попробовать использовать webstorm в разработке и забыть что такое писать импорты руками

[@victormog]

@@19fetisoff VS Code нормально добавляет импорты, а WebStorm - платный...

[@hiki7661]

@@19fetisoff а смысл?

[@ЕжЕжиков-в9ь]

Как всегда браво Михаил! И лайк

[@FLOKY42]

Спасиб за видео! Доступно, понятно, полезно)

[@nataliak6347]

классно мы с этим разобрались, спасибо!)

[@nickolz1091]

Спасибо за работу, хотелось бы ещё увидеть как редакс получает данные от серверных компонентов

[@mishanep]

Напрямую никак, в серверных компонентах нет редакса. В принципе можно попробовать спустить данные пропсами в клиентский компонент и там уже использовать с редаксом. Не пробовал =)

[@nickolz1091]

@@mishanep спасибо за ответ

[@flyguy9864]

Спасибо, ценное видео

[@Aleksandr-i9]

какие же классные видео и как же сложно сейчас их посмотреть на ютубе(((

[@melodystic]

отличный подробный ролик! Спасибо!)

[@ereburg]

Отличные и познавательные видео, спасибо! Будут ли подобные видео, но для мультиязычности на сайте? Не совсем понятно, как это делать с App Router.

[@АндрейКуравлев-л1д]

Отличный туториал

[@Илья-э7ю9в]

Было бы круто посмотреть как оперировать jwt токенами. Когда у тебя бэкенд, к примеру на nest, и нужно контролировать актуальность сгенерённого там токена. Чтобы избежать рассинхрона, когда nextauth думает что пользователь авторизован, а на бэке токен уже протух.

[@alexsanders7240]

Вышло разобраться с JWT токенами?

[@Илья-э7ю9в]

@@alexsanders7240 Полностью делегировал генерацию и проверку токенов на "большой бэкенд" на nest-е. На фронте access токен хранил обычных куках, а refresh - в httponly.

[@ЮрийАвраменко-у4щ]

Спасибо за доступное объяснение. Ток вот не очень понятно что с такой авторизацие делать (если использовать гугл и другие провайдеры, кроме как лагин и пароль). Я в том смысле по сути инфы о пользоателе вообще не какой. Какой толк от такой авторизации - просто вывести "привеит ИМЯ_ПОЛЬЗОВАТЕЛЯ" ? Хотелось бы больше практичности увидеть от next-auth ( втом сымсле как с этим работать дальше)

[@Commondore]

Отличное видео 👍. Спасибо

[@ХусейнНаимов-ь6х]

вы супер!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@alexles5003]

Очень круто

[@JewStuped]

Очень помогло твое видео. Жду следующих. Не мог бы ты разобрать тему способов передачи данных между клиент компонентами и сервер компонентами. Или сетап стейт менеджмента напр. Redux чтобы можно было иметь доступ к стейту как на клиенте так и на сервере

[@CJIu3eHb]

Файл с мидлварами получается только один. В принципе, на фронте их вроде не так много случается, но все-таки. Либо функциями выносить, либо все в кучу. И матчер общий: т.е. либо смириться, либо вручную внутри мидлвары разруливать по адресу.

[@jiza2377]

Спасибо, ждал)

[@timur.shhhhh]

1. Есть ли какие-то сильный изменения сейчас, или в next 14?; 2. Как можно создать регистрацию пользователя, и как создать проверку аккаунта через otp код, или url на email?

[@en_kratia]

Спасибо.

[@ЕвгенийТ-ч8в]

Спасибо!

[@yurii_kozlov]

Amazing video!

[@honneyplay721]

Спасибо вам большое за ваш труд! Вы планируете рассказать как работает реакт квери в app роуте?

[@JewStuped]

Сними на тему "on-demand revalidation"

[@ДанилГречкин-з5ч]

Михаил, скажите пожалуйста, если у меня уже есть готовый frontend на React + Vite, можно ли отдельно на next.js реализовать эту логику с авторизацией и законектить этот бэк некста с фронтом на реакте? Или возможности такой реализации доступны только в рамках одного монолитного проекта ?

[@ровойт]

Михаил спасибо большое за ваши уроки вы очень помогли мне при изучении JS -TS, лучшие уроки из всех что видел - англоязычные уроки трудно смотреть-так как это превращается в изучение английского языка а не ЯП, сейчас изучаю nest, как по вашему мнению - нест перспективный в бекенд разработке сейчас?

[@mishanep]

Мне сложно компетентно ответить про перспективы nest на рынке бэкенда. Фреймворк популярный, но я с ним пока не работал.

[@ровойт]

@@mishanep а с какими работали - просто интересно узнать если не секрет

[@АлексейКобылянский-у7д]

Михаил, а как в вашем случае прописать запрос к mysql базе?

[@bagga_lev]

Великолепно, спасибо большое =) Вопрос, будет ли оно так же хорошо работать с каптчей...

[@PhilosophyfromFilms]

Михаил здраствуйте, а как происходит рефреш токена? у меня через 15 минут выкидивает из сессии

[@dijfhvidiedjnw2825]

Добрый день, Михаил! Подскажите, сколько примерно роликов будет по Next.js?

[@mishanep]

У меня нет четкого контент плана. Я пока не знаю когда будет следующее видео по этой теме. На работе 12-я версия и получается небольшая шизофрения при разборе 13й :)

[@ВиталийГромык]

Спасибо за видео. Что делать если у меня уже есть мидлвара которая обрабатывает интернационализацию как их правильно объединить?

[@Moishe_Rubinstein]

Какой next сейчас для продакшена?

[@smotritelyoutube]

Не знаю где еще спросить, но что за проблема с флагом --turbo? " Wasm binding does not support --turbo yet", это только у меня такая или у кого-то еще? И в чем вообще проблема? как решить ее?

[@snatvb]

это все конечно здорово, но вот в сагах непонятно как юзать например :)

[@HaykoGrigoryan]

как правильно сделать запрос на сервер и получить данные, сохранить их в Redux toolkit с Next JS 13.4

[@Taiga_libertarian]

💙💙💙

[@user-r3t]

Спасибо, вопрос теперь как это все выложить на nginx или вообще себе на сервер)

[@bizmich_]

Как сделать все страницы protected и при этом через /signin вошел бы? ну для админки

[@hiddenlul556]

Михаил подскажите, через эту библиотеку можно работать с перехватчиком токенов, что бы полностью оказаться от аксиоса?

[@m.g.0416]

Не совсем понятна концепция хэндлеров и апи - получается, что эта история нужна нам, когда мы отказываемся от бэка и все бэковские задачи перетаскиваем на фронт?

[@snitko13]

Спасибо за видео. Но есть один момент. Подскажите, как избавится от бага в нашем случае в хедере. Суть в том, что будучи авторизоваными при обнавлении страницы у нас на некоторе время пропадает защищенный пункт меню, а потом появляется, так как проверяется авторизация и на это надо время. Об этом ни кто никогда не говорит особо и я даже заметил, что частенько в видео не обновляют страницу. По идее это можно решить на уровне сервера. Но в нашей ситуации клиентский компонент. Буду очень благодарен (да и не только я), если объясните этот момент. Заранее СПАСИБО!

[@webreflect672]

Не подскажет ли кто нибудь как подцепить "Одноклассников" в nextauth?

[@ЮрийКопоть-т5д]

Есть ли смысл связывать такую аутенфикацию со своим бэком (отдельным сервером)? Например, после ответа от гугла в callbacks делаем запрос на свой сервер, и там получаем свои токены и все данные пользователя.Но всё равно не оч понятно как дальше работать со стором

[@ilyamartynov2743]

Юзайте effector и не будет проблем)

[@---Maksim---]

Конечно есть смысл. Ты авторизуешь пользователя и при успехе идешь запросом с сервера next-a на сервер с БД, затем отдаешь эти данные в профиль пользователя на клиент.

[@vahev5554]

А как можно сделать редирект если я сделаю аутентификацию через firebase?

[@artyomtaranenko2267]

Мне понравилось называть папку (auth), тогда не попадает лишний разделитель в урл.

[@dinist4549]

На 9:50 мы создаем Клиентский компонент - Provider, и оборачиваем в него все остальное, получается, что все компоненты внутри Provider будут клиентскими?

[@en_kratia]

Да

[@idrisveliev]

Скажите, Михаил, я тоже закончил этот урок, но при нажатии на Sign In кнопку, меня перебрасывает на страницу 404. почему так?

[@mishanep]

Приветствую! Не могу знать. Полагаю есть немало вариантов почему что-то пошло не так, надо разбираться.

[@idrisveliev]

@@mishanep уже разобрался. проблема была в наименовании Линка. Спасибо за ваш ответ

[@ИззатТурсунов]

Когда продолжение?

[@Дмитрий-в8п4р]

всем привет. У кого еще была такая же проблема? Argument type {credentials: {password: {label: string, type: string, required: boolean}, email: {label: string, type: string, required: boolean}}, type: "credentials", authorize(credentials: any): Promise} is not assignable to parameter type UserCredentialsConfig

[@johnfargo9774]

почему на гитхабе код другой?

[@mishanep]

Вероятно на гитхабе есть разные ветки, и под это видео в частности.

[@TpyrBo3Db]

что-то мне совершенно не понравилась библиотека. не обновляет токен из коробки с провайдером keycloak

[@АндрейЛитвинов-ш3м]

Я все повторил как в видео, однако есть нюанс что когда после логинизации отрисовывается страница то на 1сек видно кнопку "Логин". Можно ли как то от этого избавиться?

[@umalishonuy7977]

Я не эксперт но мне это кажется очень замороченной авторизацией😅

[@oleksiishe7417]

А вообще норм практика сервер с node.js перенести на next, я читал что next тоже работает с Sequelize , и в принципе можно сделать полноценное апи на next, кто-то практиковал? как оно геморройно?

[@mishanep]

Норм. Встанут вопросы миддлвейров, тут они они иначе устроены. Но возможно да.

[@victormog]

Куда копать по поводу валидации ошибок в форме (в данном случае - формы логина), чтобы выдавать конкретные сообщения пользователю?

[@mishanep]

Для фронтовой валидации вы можете использовать либо html атрибут pattern, который работает с regex, либо валидировать в момент отправки формы средствами js, либо использовать сторонние библиотеки, вроде react-hook-form. При проверке credentials сервисы обычно не уточняют какие именно данные были введены некорректно, в частности, чтобы нельзя было проверить со стороны если учетная запись на конкретную почту.

[@victormog]

@@mishanep Вот и я не увидел в логе, что именно пароль не верный... 😞

[@РусланРастегаев-з1э]

Добрый день Михаил. Спасибо за ваши труди, весь контент очень крутой, понятный, интересный. У меня вопрос относительно авторизации и взаимодействии с БД. Опишу вкратце мою задачу. У меня есть приложение. Есть кнопка «Продолжить с Google» При нажатии мы авторизуем юзера и получаем его данные от гугл провайдера. Далее, я проверяю по email, есть ли этот пользователь в БД. Я использую MongoDB. Если нет, сохраняю его в БД в таблицу User (email, provider type). Естественно уникальный ID генерируется автоматически. Далее юзер может создавать записи в таблице “posts”. Где есть id записи, user_id - из таблицы Users, content - сама запись. Сейчас, чтобы получить все записи пользователя, я передаю в get запросе на сервер user_id. Как мне этого избежать? Как я могу получать user_id на стороне сервера, если юзер авторизован, чтобы манипулировать с БД? Я понимаю, что это можно реализовать с помощью JWT токенов, в который обычно зашифровывается все нужная информация при успешной авторизации и потом на стороне сервера дешифруется и вытягиваются данные. Гугл провайдер может выдать JWT, но в нем, как я понимаю, зашифрован гугловский id, а не тот, что у меня создается в БД. Конечная цель это 1. Пользователь авторизовался при помощи гугл 2. Получить на клиенте все записи пользователя, не передавая в get запросе user_id, из таблицы User. 3. При получении get запроса, на сервере, иметь доступ к авторизованному user_id, чтобы вытащить все записи нужного пользователя и вернуть. В общем тема не самая легкая для понимания. Не могли бы вы раскрыть ее в отдельном видео или просто ответить лично. Заранее спасибо

[@ilyamartynov2743]

Вы сами ответили на свой вопрос) напримере гугла. При регистрации вы создаёте пользователя в БД, генерирует jwt, отдаёте клиенту, со всеми запросами передаёт его в header, сервер из jwt достаёт id пользователя. Аналогично при логине. Ещё раз, при аунтификацию гуглом, вы создаёте или получаете пользователя в БД и передаёт jwt токен с каждым запросом.

[@hopmnc]

Годно, спасибо

[@AkbarKadyrov-w2j]

Очень уважаю вас и ваш труд Михаил. Но думаю тут немного неправильный заголовок урока так как вы в этом уроке показываете определенную библиотеку которая приватизирует только роут авторизации а не приватизацию роутов в целом - например как заприватизировать роут админ страницы и т.п.

[@ringnull]

Что означает собака в этом пути import { authConfig } from "@/configs/auth";

[@mishanep]

Это просто один из способов задачи алиасов путей. В данном случае - дефолтный вариант, идущий с некст из коробки. По сути, @ указывает на корневую директорию проекта в данном случае.

[@Александр-ч1я6г]

А если нужна авторизация только через логин/пароль есть ли смысл использовать next auth? Или проще обернуть в рут лайауте приложение в protected-routes в котором делать запрос за юзером по токену к апи и если токен не валидный, кидать на страницу авторизации?

[@mishanep]

Вы можете описать логику protected route в middleware, чтобы не перегружать рут лейаут. А там уж как вам удобнее. Если вы видите, что библиотека только усложняет процесс, то не используйте.

[@Александр-ч1я6г]

Нельзя

[@Александр-ч1я6г]

И как, в таком случае, сохранить юзера в стор ваще непонятно 😢

[@lisofsky8151]

подскажите пожалуйста google cloud - платный ? вижу про кредит в 300$

[@mishanep]

Обычно облачные сервисы предоставляют какой-то стартовый бюджет - на попробовать. А дальше баланс уже придется пополнять. Плюс сам стартовый бюджет могут начислять после привязки карты.

[@maks-kander6665]

Как указать в matcher все?? как сделать, чтобы он редиректил на любой странице на логин??? Так сложно было это сказать. Я нихрена не могу найти в этой сраной документации и гугле

[@viktormoskalev2269]

А стоит уже сейчас делать реальный проект на апп дире , или он еще сырой ?

[@mishanep]

Некст его рекомендует после того, как они выкатили стабильную версию. Говорят, что серверные компоненты могут пока чуть медленнее работать, но я не замерял.

[@leonidserafimovich4844]

Всем привет ! Кто делал авторизацию через openid в Next js ???? ХХЕЕЛЛПП

[@o-white-748dA]

Здравствуйте, у меня такой вопрос) я стврорив сайт используя next js и вот он у меня такой красивый загружается только локально, конечно я хочу его так сказать загрузить его в сам интернет. Чтобы он мог отображаться в поиске. Каким образом мне нужно это сделать? Много видео где все льют все на версел и тд, но это чуточку не то) помогите решить эту проблемку)

[@mishanep]

Я использую Vercel. Он оптимально подходит для сайтов на Next. Плюс имеет бесплатный вариант (разумеется, со своими ограничениями).

[@o-white-748dA]

@@mishanep окей, тогда такой вопрос, у меня сейчас такая ситуация, я сделал знакомому сайт и его типа можно просто выгрузить на вересель и все? Типа поисковые систимы будут видеть этот сайт и, ну чисто гипотетически он сможет со временем выйти в топ? Возможно где-то можно об этом более подробно почитать, потому что я что-то думал, что это как-то проще работает))

[@oleksiishe7417]

@@o-white-748dA цікаво, і як в тебе получилось? Сайт бачить гугл?

[@shortsvideo4570]

залий на хост любой@@o-white-748dA

[@ВасилийКалеев-о3ю]

@@mishanep Vercel теперь полностью платным стал? Только бесплатный небольшой пробный период?

[@boyywnkobe]

don't work with pages and many errors like resolver

[@mishanep]

Для pages немного по-другому идёт базовая настройка. Смотрите документацию.

[@boyywnkobe]

@@mishanep смотрел но что то не виходит. У меня уже есть мои компоненти sign-in, sign-up, reset-password

[@boyywnkobe]

Слелал

[@Гооол-й4ч]

16:05

[@Гооол-й4ч]

12 30

[@loreart9320]

Здраствуйте, Михаил, очень помог ваш урок, но так и не понял как уберечь пользователя от перехода на страницу авторизации уже когда он авторизован. Может у вас есть урок по поводу сего?

[@mishanep]

Мы смотрели как проверить наличие сессии. Вы можете добавить проверку наличия сессии на странице авторизации, и при ее наличии делать редирект.

[@loreart9320]

@@mishanep Спасибо, я так и сделал вчера, просто думал есть возможность запретить некоторые страницы для авторизованных пользователей, как мы это делали с неавторизоваными, и чтобы переадресацией в такие моменты была на главную страницу а не на форму авторизации. Ваши уроки действительно помогают изучать паттерны решения задач, так ещё и отвечаете на вопросы оперативно, спасибо ещё раз.

[@JewStuped]

Очень помогло твое видео. Жду следующих. Не мог бы ты разобрать тему способов передачи данных между клиент компонентами и сервер компонентами. Или сетап стейт менеджмента напр. Redux чтобы можно было иметь доступ к стейту как на клиенте так и на сервере

[@ДавронМухитдинов-ф1б]

Спасибо большое