React Authorization Example

Пример реализации экрана авторизации с различными сценариями ошибок API и возможностью использования моков.

Обзор проекта

Проект демонстрирует реализацию экрана авторизации со следующими возможностями:

• Форма входа с валидацией полей email и пароля
• Двухфакторная аутентификация (TFA) для повышенной безопасности
• Обработка различных ошибок API - от неверных учетных данных до ошибок сервера
• Mock API с различными сценариями ответов для тестирования
• Debug меню для удобного переключения между сценариями

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

• React 19 - основной фреймворк
• TypeScript - типизация
• Vite - сборщик проекта
• Effector - управление состоянием
• Ant Design - UI компоненты
• Tailwind CSS - стилизация
• Atomic Router - маршрутизация

Запуск проекта

Разработка

Для запуска проекта в режиме разработки:

# Установка зависимостей
bun install

# Запуск dev сервера
bun run dev

Проект будет доступен по адресу http://localhost:5173

Сборка

# Сборка для продакшена
bun run build

# Предпросмотр собранного проекта
bun run preview

Режим моков

Включение режима моков

Для включения режима моков создайте файл .env.local в корне проекта:

# Создайте файл .env.local
cp .env.local.example .env.local

Или создайте файл вручную со следующим содержимым:

# Включение Mock API для разработки
VITE_USE_MOCK_API=true

# URL реального API (используется когда VITE_USE_MOCK_API=false)
VITE_API_URL=/api

Использование режима моков

При включенном режиме моков все запросы к API перехватываются и заменяются заглушками. В правом нижнем углу экрана появляется Debug меню (иконка 🐛), которое позволяет:

1. Переключать сценарии входа - выбирать различные варианты ответа API
2. Настраивать сценарии TFA - управлять поведением двухфакторной аутентификации
3. Сбрасывать настройки - возвращаться к настройкам по умолчанию

Доступные сценарии моков

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

Сценарий	Email для теста	Описание
Успешный вход	Любой	Успешная авторизация без TFA
Успешный вход с TFA	tfa@example.com	Требуется ввод TFA кода
Неверные учетные данные	invalid@example.com	Ошибка 401 - неправильный email или пароль
Отсутствующие поля	Любой (пустой)	Ошибка 400 - не все поля заполнены
Rate Limiting	ratelimit@example.com	Ошибка 429 - слишком много попыток
Ошибка сервера	error@example.com	Ошибка 500 - внутренняя ошибка сервера
Ошибка сети	Любой	Отсутствие подключения к интернету

Сценарии TFA

Код	Результат
123456	Успешная верификация
000000	Неверный TFA код
999999	TFA Rate Limit
Другой код	Неверный TFA код

Особенности реализации

Обработка ошибок

Проект обрабатывает следующие типы ошибок:

• 400 Bad Request - отсутствуют обязательные поля
• 401 Unauthorized - неверные учетные данные или TFA код
• 404 Not Found - сессия TFA истекла
• 429 Too Many Requests - превышен лимит попыток
• 500 Internal Server Error - внутренняя ошибка сервера
• Сетевые ошибки - отсутствие подключения

Валидация форм

• Email - проверка формата email
• Пароль - минимальная длина 8 символов
• TFA код - ровно 6 цифр

Состояние загрузки

• Индикаторы загрузки во время запросов
• Блокировка кнопок во время выполнения запросов
• Обработка повторных попыток

Разработка

Добавление новых сценариев моков

1. Добавьте новый тип в MockScenario в src/shared/api/mock.ts
2. Добавьте response в mockResponses
3. Обновите логику в функциях mockAuthLoginPost или mockAuthLoginTfaPost
4. Добавьте сценарий в debug-menu.tsx

Изменение API

Реальные API эндпоинты описаны в OpenAPI спецификации и генерируются через:

bun run build:api