Full Stack авторизация

Создание современной системы авторизации с NestJS, Prisma, PostgreSQL, Redis для управления сессиями и Next.js, включая двухфакторную аутентификацию, подтверждение почты и управление ролями.

О курсе

В этом курсе мы реализуем мощную систему авторизации для вашего проекта. Сначала мы настроим серверную часть с помощью фреймворка NestJS, Prisma и PostgreSQL для работы с данными, а Docker для контейнеризации. Redis обеспечит управление сессиями. Затем переходим к клиентской части с использованием Next.js, организованной по принципам Feature-Sliced Design (FSD). Вместо использования стороннего HTTP-клиента, мы создадим собственные функции для обработки запросов с помощью встроенного Fetch. В процессе добавим подтверждение почты, двухфакторную аутентификацию, восстановление пароля и управление ролями. Этот гайд охватит все ключевые аспекты создания современной системы авторизации!

• 1

  Введение

  В этом уроке мы познакомимся с курсом и разберём, что нас ждёт впереди. Обсудим стек технологий, который будем использовать для реализации системы аутентификации и авторизации, а также рассмотрим ключевые инструменты, такие как NestJS, Prisma, Redis и express-session. В завершение проведём небольшое демо финального результата, чтобы у вас было чёткое понимание, к чему мы будем стремиться в процессе обучения.

• 2

  Настройка бэкэнда

  В этом уроке развернём NestJS приложение, настроим Prettier для удобного форматирования кода, а также подготовим docker-compose файл, чтобы поднять PostgreSQL и Redis в контейнерах. Это позволит нам быстро запустить и настроить базу данных, которые понадобятся для работы авторизации.

• 3

  Схема Prisma

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

• 4

  Настройка Express Session

  В этом уроке мы настроем express-session с Redis для хранения сессий и реализуем базовый UserService с методами поиска по id, email, а также создание пользователей в базе данных.В этом уроке мы настроем express-session с Redis для хранения сессий и реализуем базовый UserService с методами поиска по id, email, а также создание пользователей в базе данных.

• 5

  Базовая авторизация

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

• 6

  Защита роутов

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

• 7

  Интеграция Google reCAPTCHA

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

• 8

  Модуль для OAuth

  В этом уроке мы реализуем авторизацию через OAuth, без использования Passport. Мы создадим собственный сервис для работы с OAuth-провайдерами, с настройкой подключения и получения данных пользователей через их аккаунты. Рассмотрим, как настроить динамический модуль для провайдеров и использовать их для получения информации о пользователе, а также корректно управлять токенами доступа и обновления.

• 9

  OAuth с Yandex и Google

  В этом уроке мы интегрируем OAuth авторизацию через Yandex и Google с использованием динамического модуля, который мы настроили в предыдущем уроке. Создадим сервисы для работы с этими провайдерами, настроим получение токенов и извлечение данных пользователей. Это позволит нам легко добавлять сторонние сервисы для аутентификации без использования Passport.

• 10

  Почтовый сервер

  В этом уроке мы настроим почтовый сервер для отправки email-уведомлений. Используя Nodemailer, подключим SMTP-сервер и настроим отправку писем пользователям, для подтверждения регистрации или восстановления пароля.

• 11

  Подтверждение почты

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

• 12

  Восстановление пароля

  В этом уроке мы настроим систему восстановления пароля. Реализуем отправку письма с уникальной ссылкой для сброса пароля, а также обработку этой ссылки для безопасного обновления пароля пользователя. Этот процесс поможет пользователям легко восстановить доступ к своему аккаунту, если они забыли пароль, обеспечив при этом безопасность данных.

• 13

  Двухфакторная аутентификация

  В этом уроке мы добавим двухфакторную аутентификацию (2FA) для повышения безопасности входа в систему. Реализуем отправку одноразовых кодов через email. Разберём настройку валидации кода и интеграцию с системой авторизации, чтобы только пользователи с правильным кодом могли получить доступ к своему аккаунту.

• 14

  Обновление профиля

  В этом уроке мы реализуем процесс обновления данных профиля пользователя. Пользователи смогут изменить свои личные данные, такие как имя и email. Также мы добавим возможность включения или отключения 2FA в настройках профиля, чтобы повысить уровень безопасности аккаунта.

• 15

  Настройка фронтэнда

  В этом уроке мы настроим фронтенд с использованием Next.js, включая базовую конфигурацию проекта и интеграцию Prettier для форматирования кода. Мы также настроим и подключим TanStack Query для работы с API. Добавим shadcn для красивых и удобных UI-элементов, а также реализуем функциональность переключения темы (светлая/тёмная).

• 16

  Обёртка для страниц

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

• 17

  Форма регистрации и входа

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

• 18

  Кастомный Fetch API

  В этом уроке мы создадим кастомный Fetch-клиент, который упростит выполнение HTTP-запросов в нашем проекте. Мы реализуем универсальные методы для GET, POST, PUT, DELETE запросов. Также добавим поддержку параметров поиска и заголовков, а также обработку ошибок. Этот класс будет эффективным инструментом для работы с API и позволит легко и удобно взаимодействовать с сервером.

• 19

  Запросы в React Query

  В этом уроке мы реализуем запросы для логина и регистрации пользователей с использованием кастомного Fetch-клиента, который мы настроили в предыдущем уроке. Мы создадим соответствующие API-запросы для отправки данных на сервер и обработки ответа. Для управления состоянием запросов и кэширования данных будем использовать React Query.

• 20

  Middleware

  В этом уроке мы рассмотрим использование Middleware в Next.js для создания логики, которая будет выполняться до обработки запроса. Middleware позволяет добавлять функциональность на уровне запросов, такую как проверка авторизации, редиректы или обработка данных перед их отправкой на страницы. Мы настроим и интегрируем Middleware в проект, чтобы эффективно управлять пользователями и безопасностью приложения.

• 21

  Страница подтверждения

  В этом уроке мы создадим страницу для подтверждения email-адреса пользователя. После регистрации, пользователю будет отправлено письмо с уникальной ссылкой для активации аккаунта. Мы реализуем логику обработки этой ссылки, проверку её валидности и соответствующие уведомления для пользователя.

• 22

  Страница восстановления

  В этом уроке мы реализуем процесс восстановления пароля, который состоит из двух этапов: первая страница позволяет пользователю ввести email для сброса пароля, а вторая — для установки нового пароля. Также, в рамках улучшения безопасности, на этапе логина мы добавляем двухфакторную аутентификацию (2FA), где пользователи будут получать 6-значный код на почту для подтверждения своей личности при входе в аккаунт.

• 23

  Настройки профиля

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