evo-managed-redis-sessions-management-lab

Полнофункциональное Next.js приложение, демонстрирующее управление сессиями на основе Redis с аутентификацией пользователей. Этот проект демонстрирует полную систему аутентификации с регистрацией, входом, управлением сессиями и безопасным выходом из системы.

✨ Возможности

• Аутентификация пользователей: Полная система входа и регистрации с хешированием паролей
• Хранение сессий в Redis: Безопасное управление сессиями с использованием Redis с TTL 7 дней
• Безопасность: HttpOnly cookies, хеширование паролей, валидация входных данных
• Современный UI: Чистый, адаптивный интерфейс с Tailwind CSS
• В реальном времени: Мгновенная валидация сессий и управление состоянием
• TypeScript: Полная типизация во всем приложении

🛠️ Технологический стек

• Фронтенд: Next.js 15, React 19, TypeScript, Tailwind CSS
• Бэкенд: Next.js API Routes (App Router)
• База данных: Redis (для хранения сессий)
• Аутентификация: bcrypt для хеширования паролей, сессии на основе cookies
• Валидация: Zod для валидации входных данных
• Среда выполнения: Node.js (API routes) + Edge Runtime (middleware)

📋 Требования

• Node.js 18+
• Работающий Redis сервер локально

🚀 Быстрый старт

1. Клонируйте и установите

   git clone <repository-url>
   cd managed-redis-sessions-management-lab
   npm install

2. Настройте окружение

   cp env.example .env.local

   Отредактируйте .env.local и установите ваш Redis URL:

   REDIS_URL=redis://localhost:6379
   

3. Используйте Managed Redis или Запустите Redis локально с docker (выберите один вариант):

   docker run -d -p 6379:6379 redis:alpine

4. Запустите приложение

   npm run dev

5. Откройте браузер

   Перейдите по адресу http://localhost:3000

🎯 Использование

Процесс аутентификации

1. Зарегистрируйте новый аккаунт

   • Посетите http://localhost:3000
   • Нажмите "Need an account? Register"
   • Введите ваш email и пароль (минимум 6 символов)
   • Нажмите "Register"

2. Войдите с существующим аккаунтом

   • Введите ваш email и пароль
   • Нажмите "Login"

3. Управление сессиями

   • Сессии сохраняются при обновлении страницы
   • Автоматическая валидация сессий при каждом запросе
   • Безопасный выход с очисткой сессии

4. Выход

   • Нажмите кнопку "Logout" когда вы вошли в систему
   • Сессия немедленно удаляется из Redis

🏗️ Архитектура

Управление сессиями

• Хранение: Сессии хранятся в Redis с ключами sess:{uuid}
• TTL: Автоматическое истечение через 7 дней
• Безопасность: UUID-основанные ID сессий, HttpOnly cookies
• Валидация: Проверка сессий в реальном времени через API

API маршруты

• POST /api/register - Регистрация пользователей с хешированием паролей
• POST /api/login - Аутентификация пользователей и создание сессии
• POST /api/logout - Уничтожение сессии и очистка cookies
• GET /api/me - Валидация текущей сессии пользователя

Middleware

• Область: Обрабатывает только маршрут /api/me для валидации сессий
• Функция: Извлекает ID сессии из cookies и передает в API
• Безопасность: Предотвращает проблемы совместимости с Edge Runtime

Функции безопасности

• Хеширование паролей: bcrypt с 10 раундами соли
• Cookies сессий: HttpOnly, SameSite=Lax, maxAge 7 дней
• Валидация входных данных: Валидация схемы Zod для всех входных данных
• Обработка ошибок: Корректные ответы об ошибках без утечки данных

📁 Структура проекта

├── app/                    # Next.js App Router
│   ├── api/               # API маршруты
│   │   ├── login/         # Эндпоинт аутентификации
│   │   ├── logout/        # Уничтожение сессии
│   │   ├── me/            # Валидация сессии
│   │   └── register/      # Регистрация пользователей
│   ├── globals.css        # Tailwind CSS стили
│   ├── layout.tsx         # Корневой компонент макета
│   └── page.tsx           # Главная страница приложения
├── src/
│   ├── lib/               # Основные утилиты
│   │   ├── redis.ts       # Управление подключением к Redis
│   │   ├── session.ts     # CRUD операции с сессиями
│   │   └── user.ts        # Управление пользователями и аутентификация
│   ├── components/        # React компоненты (устаревшие)
│   └── hooks/             # Пользовательские React хуки (устаревшие)
├── middleware.ts          # Next.js middleware
├── env.example            # Шаблон переменных окружения
└── package.json           # Зависимости и скрипты

🔧 Разработка

Доступные скрипты

• npm run dev - Запуск сервера разработки с Turbopack
• npm run build - Сборка для продакшена
• npm run start - Запуск продакшен сервера
• npm run lint - Запуск ESLint
• npm run docker:build - Сборка Docker образа

Ключевые детали реализации

Поток сессий

1. Пользователь отправляет форму входа/регистрации
2. API валидирует учетные данные и создает сессию в Redis
3. Устанавливается HttpOnly cookie с ID сессии
4. Middleware извлекает ID сессии для запросов /api/me
5. Сессия валидируется против Redis при каждом запросе
6. Автоматическая очистка при выходе или истечении TTL

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

• Состояние сессии на клиенте управляется с помощью React хуков
• Валидация сессий в реальном времени при загрузке страницы
• Автоматические обновления UI на основе статуса аутентификации
• Обработка ошибок для сетевых и валидационных сбоев

🚀 Развертывание в продакшене

Развертывание с Docker

1. Сборка Docker образа

   npm run docker:build

2. Запуск контейнера

   docker run -p 3000:3000 -e REDIS_URL=redis://your-redis-host:6379 evo-managed-redis-sessions-management-lab

Ручное развертывание

1. Настройте экземпляр Redis и получите URL подключения
2. Добавьте REDIS_URL в переменные окружения
3. Соберите и разверните: npm run build && npm start
4. Убедитесь, что управление сессиями работает в продакшене

📄 Лицензия

MIT License - свободно используйте этот проект для обучения и разработки.

🤝 Вклад в проект

Это учебный проект, демонстрирующий управление сессиями Redis с Next.js. Не стесняйтесь форкать, экспериментировать и улучшать реализацию!