Учебник по Next-Auth V5 (OAuth, Email, серверные действия, серверная и клиентская аутентификация,...
Coding in Flow
0:00 / 0:00
Учебник по Next-Auth V5 (OAuth, Email, серверные действия, серверная и клиентская аутентификация,...
66 415 просмотров · 2 года назад
Coding in Flow
290 тыс. подписчиков
66 415 просмотров · 2 года назад
В этом уроке вы узнаете об аутентификации с помощью Next-auth/Auth.js 5.0 для Next.js. Вы узнаете:
Как настроить Next-auth 5 в проекте Next.js (auth.ts, middleware, Prisma)
Как реализовать вход через Google и GitHub с помощью OAuth2
Как создавать магические ссылки в электронных письмах с помощью Resend
Как добавить роль администратора
Как защитить серверные компоненты, клиентские компоненты (с помощью useSession), серверные действия и обработчики маршрутов API
Разница между получением сессий на стороне сервера и на стороне клиента
Преимущества и недостатки аутентификации по сессиям и JWT
Как реализовать статическое кэширование на страницах, содержащих аутентификацию
Как заставить ваш клиент Prisma работать в среде выполнения Edge (middleware)
Как кэшировать запросы сессий между серверными компонентами
Как обновлять данные пользователя с фронтенда
И многое другое
Файлы проекта:
Начальный код: https://github.com/codinginflow/next-...
schema.prisma: https://github.com/codinginflow/next-...
⭐ Пройдите мой курс по разработке на Next.js с использованием Express и TypeScript: https://codinginflow.com/nextjs
✅ Пройдите мой бесплатный курс по лучшим практикам React: https://www.codinginflow.com/reactbes...
💌 Подпишитесь на мою рассылку, чтобы получать регулярные советы по веб-разработке: https://codinginflow.com/newsletter
💬 Присоединяйтесь к нашему сообществу разработчиков в Discord: https://codinginflow.com/discord
📣 Следите за Coding in Flow в социальных сетях:
Twitter: / codinginflow
Instagram: / codinginflow
TikTok: / codinginflow
Facebook: / codinginflow
Временные метки:
0:00 - Что мы рассмотрим
3:37 - Настройка проекта + база данных Vercel Postgres
9:51 - Настройка Next-auth + адаптер Prisma
25:53 - Вход через Google и GitHub (OAuth2)
40:46 - Аутентификация в серверных компонентах
55:31 - Защита страниц
1:00:35 - Аутентификация в серверных действиях (и обработчиках маршрутов API), обновление данных пользователя
1:05:09 - Роль администратора и расширение модуля TypeScript (next-auth.d.ts)
1:13:51 - Дедупликация запросов аутентификации с помощью кэша React
1:17:23 - Аутентификация на стороне клиента (SessionProvider, useSession) против частичной предварительной отрисовки
1:29:05 - Коллбэк сессии (добавление дополнительных данных в объект пользователя)
1:34:56 - Магические ссылки в электронном письме (Повторная отправка)
1:40:36 - Развертывание (Vercel)