Что происходит после нажатия кнопки login?

Процесс аутентификации после нажатия Login

На фронтенде происходит цепочка событий, которая начинается с обработчика клика и завершается сохранением данных пользователя.

Шаг 1: Валидация формы

const handleLogin = async (e: React.FormEvent) => {
  e.preventDefault();
  
  // Проверяем пустые поля
  if (!email || !password) {
    setError('Email и пароль обязательны');
    return;
  }
  
  // Валидируем формат email
  if (!isValidEmail(email)) {
    setError('Некорректный email');
    return;
  }
};

Шаг 2: HTTP запрос на сервер

Отправляется POST запрос на /api/v1/auth/login с email и паролем:

const response = await fetch('/api/v1/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email, password })
});

const data = await response.json();

Шаг 3: Обработка ответа

Сервер возвращает:

• 200 OK: { access_token, refresh_token, user: {...} }
• 401 Unauthorized: { error: 'Invalid credentials' }
• 429 Too Many Requests: атака на перебор пароля

if (!response.ok) {
  if (response.status === 401) {
    setError('Неверный email или пароль');
  } else if (response.status === 429) {
    setError('Слишком много попыток. Попробуйте позже');
  }
  return;
}

Шаг 4: Сохранение токенов

Токены сохраняются в httpOnly cookies или localStorage:

// Вариант 1: Автоматически через httpOnly cookies
// Бэкенд устанавливает Set-Cookie header, браузер сохраняет

// Вариант 2: Явное сохранение в localStorage
localStorage.setItem('access_token', data.access_token);
localStorage.setItem('refresh_token', data.refresh_token);

Шаг 5: Обновление состояния приложения

Упдейтим AuthContext или Redux store:

setUser(data.user);
setIsAuthenticated(true);
setLoading(false);

Шаг 6: Редирект на главную

После успешной авторизации перенаправляем пользователя:

router.push('/dashboard');

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

try {
  const response = await fetch('/api/v1/auth/login', {...});
  const data = await response.json();
} catch (error) {
  setError('Ошибка соединения. Проверьте интернет');
}

Безопасность

• Пароль передаётся только по HTTPS
• Никогда не храним пароль на клиенте
• Access token живёт 15 минут, refresh token 7 дней
• После logout удаляем токены и очищаем состояние

Полный пример с React Hooks

const handleLogin = async (e) => {
  e.preventDefault();
  setLoading(true);
  setError(null);
  
  try {
    const response = await fetch('/api/v1/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });
    
    if (!response.ok) throw new Error('Auth failed');
    
    const { access_token, user } = await response.json();
    
    localStorage.setItem('access_token', access_token);
    setUser(user);
    router.push('/dashboard');
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};