Сессии и аутентификация

Аутентификация — частая задача в веб-приложениях. В этом рецепте — базовая регистрация и вход в Nuxt.

Введение

Настроим аутентификацию в full-stack Nuxt с Nuxt Auth Utils: утилиты для сессий на клиенте и сервере. Модуль хранит сессию в защищённых cookie, отдельная БД для сессий не нужна.

Установка nuxt-auth-utils

Terminal
npx nuxt module add auth-utils

Модуль добавится в зависимости и в modules в nuxt.config.ts.

Ключ шифрования cookie

Сессия в cookie шифруется секретом из переменной окружения NUXT_SESSION_PASSWORD. В dev она может быть добавлена в .env автоматически. В продакшене переменную нужно задать явно.

.env
NUXT_SESSION_PASSWORD=случайный-пароль-не-короче-32-символов

API-маршрут входа

Пример: POST /api/login с email и паролем, проверка по статическим данным, при успехе — setUserSession (серверная утилита из auth-utils). При неверных данных — ошибка 401. Для валидации тела можно использовать zod.

Страница входа

Модуль даёт композабл useUserSession() с полями loggedIn, session, user и методами clear, fetch. На странице логина — форма с полями email/пароль, отправка POST на /api/login, после успеха — refreshSession() и navigateTo('/').

Защита API-маршрутов

Клиентский middleware улучшает UX, но без проверки на сервере данные остаются доступны. Используйте requireUserSession(event) в обработчиках — при отсутствии валидной сессии будет выброшена 401.

Защита маршрутов приложения

Для редиректа неавторизованных пользователей создайте middleware в app/middleware/authenticated.ts: проверка useUserSession().loggedIn, при false — navigateTo('/login'). Подключайте middleware к страницам через definePageMeta: middleware: ['authenticated'].

Главная страница и выход

На защищённой странице (например индекс) показывайте данные user из useUserSession(), кнопку выхода вызывающую clearSession() и navigateTo('/login').

Итог и дальнейшие шаги

Базовая аутентификация и защита маршрутов на сервере и клиенте настроены. Дальше: OAuth-провайдеры, БД для пользователей (Nitro SQL / NuxtHub), регистрация с хешированием паролей, WebAuthn / Passkeys. Полный пример — репозиторий atidone.