Авторизация и профиль на Next.js | server actions, OAuth, отправка email, s3, тёмная тема

Мое ссобщество развивающихся разработчиков https://paromovevg.ru/evolution-commu... 🙂

Поддержать донатами https://boosty.to/paromov_evg/donate


Исходники: https://github.com/micro-course/core/...

Волшебный файлик: [https://wonderful-deer-c82.notion.sit...](https://www.notion.so/2-582b83ddd42c4...)

Мой telegram канал: https://t.me/cleanfrontend

Это второе видео я в серии, где я на ваших глазах разработаю продукт с нуля, до заработка первых денег. В этом видео мы сделаем:

Аутентификацию на next-auth
Github oauth
Вход по email (с подключением smtp.bz)
Работа с s3 и minio
Хеадер со светлой и тёмной темой
Редактирование профиля и аватарки
Адаптируем FSD под Fullstack разработку
Будем всё это деплоить в процессе разработки

Полный стек проекта:
React, Next.js app router, FSD архитектура, postgresql, prisma, zod, @tanstack/react-query, react-hook-form, tailwindcss, shadcn/ui, next-auth, jest , @testing-library/react, playwright

0.1 Что будет в видео: 00:00:00
0.2 Особенности FSD на проекте: 00:04:41
1.1 Базовая верска header: 00:14:42
1.2 Dark mode: 00:26:23
1.3 Рефакторинг арр: 00:33:16
1.4 Пушим на staging: 00:44:51
2.1 Добавляем next-auth: 00:46:40
2.2 sign-in sign-out: 01:03:49
2.3 Деплой: 01:24:37
2.4 Вход по email: 01:31:52
3.1 Кастомная sign in: 01:48:12
3.2 Остальные страницы: 02:12:42
4.1 Авторизационная логика: 02:17:52
5.1 Отображение профиля: 02:54:27
5.2 Фиксим миграцию базы: 03:14:11
5.3 Верстка редактирования профиля: 03:17:47
5.4 Получение профиля: 03:31:06
5.5 Обновление профиля: 04:09:41
5.6 Страница нового пользователя: 04:55:26
5.7 Загрузка аватарки: 05:01:27
5.8 Исправляем проблемы: 05:40:12
5.9 Проблемы деплоя: 05:44:09
6.1 sign-in тестовый флоу: 05:49:46
6.2 Добавляем сиды: 06:04:44
6.3 Добавляем тесты: 06:13:24
7 Заключение, что дальше: 06:26:35