https://github.com/merely04/react-authorization-example
https://github.com/merely04/react-authorization-example
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/merely04/react-authorization-example
- Owner: merely04
- Created: 2025-10-19T11:17:31.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-19T11:22:38.000Z (8 months ago)
- Last Synced: 2025-10-19T21:29:08.594Z (8 months ago)
- Language: TypeScript
- Homepage: https://merely04.github.io/react-authorization-example/
- Size: 68.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Authorization Example
Пример реализации экрана авторизации с различными сценариями ошибок API и возможностью использования моков.
## Обзор проекта
Проект демонстрирует реализацию экрана авторизации со следующими возможностями:
- **Форма входа** с валидацией полей email и пароля
- **Двухфакторная аутентификация (TFA)** для повышенной безопасности
- **Обработка различных ошибок API** - от неверных учетных данных до ошибок сервера
- **Mock API** с различными сценариями ответов для тестирования
- **Debug меню** для удобного переключения между сценариями
## Технологический стек
- **React 19** - основной фреймворк
- **TypeScript** - типизация
- **Vite** - сборщик проекта
- **Effector** - управление состоянием
- **Ant Design** - UI компоненты
- **Tailwind CSS** - стилизация
- **Atomic Router** - маршрутизация
## Запуск проекта
### Разработка
Для запуска проекта в режиме разработки:
```bash
# Установка зависимостей
bun install
# Запуск dev сервера
bun run dev
```
Проект будет доступен по адресу `http://localhost:5173`
### Сборка
```bash
# Сборка для продакшена
bun run build
# Предпросмотр собранного проекта
bun run preview
```
## Режим моков
### Включение режима моков
Для включения режима моков создайте файл `.env.local` в корне проекта:
```bash
# Создайте файл .env.local
cp .env.local.example .env.local
```
Или создайте файл вручную со следующим содержимым:
```env
# Включение 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 спецификации и генерируются через:
```bash
bun run build:api
```