Загрузка...
Серверные компоненты, Actions, Middleware
Аутентификация в Next.js может быть достаточно простой и удобной благодаря использованию серверных компонентов, Actions и Middleware. Давайте рассмотрим, как можно реализовать аутентификацию с помощью JWT токенов и сессий, используя Prisma для работы с базой данных.
Получение пользовательских данных: . Это очень просто :)
Вы можете выбрать любую базу данных, поддерживаемую для вашего проекта: , , и т. д. В этом примере мы используем , но вы можете заменить URL подключения на параметры вашей базы данных.
В корневой папке проекта создайте файл и добавьте строку с URL подключения к базе данных:
Замените , , , и на соответствующие значения вашей базы данных.
Можно использовать любую ORM: , , или ручками создавать каждое поле, типы и связи в бд. Я же буду использовать
Prisma — это мощный ORM, который позволяет легко работать с базой данных, обеспечивая типобезопасность и удобный API.
Вот дока как быстро начать работать с Prisma
Создаём и обрабатываем JWT токены и сессии в файлах и
В реализованы функции для работы с сессией:
Используем библиотеку для строгой проверки данных.
В файле определены схемы валидации , которые гарантируют, что данные пользователя соответствуют ожиданиям: обязательные поля, минимальная длина и соответствие регулярным выражениям для пароля.
Функция логина реализована в . Она выполняет следующие шаги:
Для создания интерфейса логина используется компонент в . Этот компонент собирает данные от пользователя и передаёт их в функцию .
Функция регистрации реализована в . Она выполняет следующие шаги:
:
После успешной аутентификации и создания сессии, пользователю нужно иметь возможность выйти из системы.
В этом разделе мы реализуем функциональность выхода пользователя, удаляя его сессию и очищая куки.
:
Для удобства пользователя добавим кнопку выхода в интерфейс.
:
В реализована функция , которая использует для проверки текущей сессии и для извлечения данных пользователя из базы данных:
В этой статье мы реализовали полную систему аутентификации с регистрацией, логином, выходом и получением данных пользователя.
Используя для работы с базой данных и для управления сессиями, мы создали безопасное и удобное решение для аутентификации пользователей.
Спасибо за прочтение (:
const user = await getUser();
Структура файлов со всем функционалом
MongoDB
PostgreSQL
MySQL
MySQL
.env
root
password
localhost
simple-app
TypeORM
Prisma
Sequelize
Prisma
features/auth/api/jwt.ts
features/auth/api/session.ts
features/auth/api/session.ts
createSession
httpOnly
secure
sameSite
verifySession
deleteSession
Zod
features/auth/types/definitions.ts
LoginFormSchema
features/auth/services/login.ts
LoginFormSchema
FormLogin
features/auth/ui/form-login/form-login.tsx
login
features/auth/services/signup.ts
SignupFormSchema
features/auth/types/definitions.ts
bcrypt
createSession
features/auth/api/session.ts
features/auth/ui/form-login/form-signup.tsx
features/auth/services/logout.ts
features/auth/ui/logout-button/logout-button.tsx
features/auth/services/user.ts
getUser
verifySession
PrismaClient
Prisma
JWT
Установим и клиент
Запустим команду для инициализации в нашем проекте
Это создаст директорию с файлом и файл
Откроем файл и определим модель данных. Например, создадим модель User
Выполним миграцию, чтобы создать таблицы в базе данных на основе схемы
После создания схемы и миграции, сгенерируем клиент Prisma для взаимодействия с базой данных
Prisma CLI
Prisma
prisma
schema.prisma
.env
prisma/schema.prisma