Перейти к содержимому

Учебник по 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)