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

Показать описание

NextJS не предлагает встроенных инструментов для аутентификации, но с внешней библиотекой next-auth (она же authjs) работа с пользователями становится удобной. Смотрим как добавить вход на сайт через Google и через форму с почтой и паролем, а также как создать приватные разделы сайта, доступные только после аутентификации.

Тайм-коды:
00:00 Анонс темы
01:06 Next Auth intro
03:49 Добавление Google входа
07:43 Проверка сессий
13:15 Профиль пользователя
15:47 Приватные роуты
17:43 Форма авторизации
22:30 Кастомная страница входа
32:01 Итоги

Мои курсы по вебу с купонами:

📢 Поддержка канала:

Рекомендации по теме

Комментарии

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

Пашечка-фв

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

unknown.

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

biLLie_wiLLie

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

me_hi

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

exelione

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

Jbnvn

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

parmetra

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

vic_shine

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

raulcaballero

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

InstrumentiUA

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

ferraritestarossa

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

ДмитрийКарпов-вн

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

ОлегКочиев-че

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

NikOroferov

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

xasanovj.

Видео Михаила на мой взгляд - отдельный вид искусства)) Все очень хорошо и доступно объясняется. Хотел бы спросить, может вы уточните, в части про Credentials вы говорите, что они будут автоматически создаваться. Это такая отдельная фича в библиотеке, которая принимает в себя настройки создаваемых инпутов?

ВладимирКазаков-уъ

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

Sylar

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

kaber

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

ВладиславПетров-вп

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

maximbuldov

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

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

Аутентификация в NextJS за 7 минут

Next.js App Router Authentication (Sessions, Cookies, JWTs)

Protected Routes In Under 5 Minutes: Next.js

How to Manage Backend JWT Access Tokens in Next Auth and Next.js 13

Next.js 13 jwt authentication protected routes httpOnly cookie with App Directory

NextJS 13. Быстрый старт

Redirecting unauthenticated users with Protected Routes in the Next.js 13 App Directory

3. Read Data in Supabase using Nextjs 15 Server Component & Server Action | React

Add Authentication to Next.js in 10 mins with OAuth (Google, Github...)

NextJS 13. Использование клиентских компонентов

Next.js 14 Tutorial - 44 - Middleware

GitHub Authentication using Next Auth + Private routes

How to Manage User Roles in NextJS / NodeJS

Custom Login Page in Next-Auth and Next.js 13 Authentication : Complete Step-by-Step Tutorial

Next Auth V5 - Advanced Guide (2024)

Step-by-Step Guide: Next.js 13 Authentication using NextAuth.js, GitHub Sign-In & Tailwind CSS

NextJS 13. Варианты рендеринга - RSC, CSR, SSR, SSG, ISR

When & Where to Add “use client” in React / Next.js (Client Components vs Server Components)

A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!

Full Stack Authentication With Next.JS | Next Auth | Nest.JS

Securely using JWT on the Edge: Authentication in NextJS Middleware!

Next.js Social Authentication with Google & Github | with next-auth

JWT + Next.js Authentication Demo: Master Next.js Tutorial #17