Хуки авторизации

Хук useAuth предоставляет полный набор методов для управления авторизацией и профилем пользователя в React приложениях.

useAuth()

Возвращаемые значения

Свойство	Тип	Описание
`user`	`User \| null`	Текущий авторизованный пользователь
`loading`	`boolean`	Состояние загрузки
`error`	`Error \| null`	Ошибка авторизации
`login`	`function`	Метод входа
`register`	`function`	Метод регистрации
`logout`	`function`	Метод выхода
`updateProfile`	`function`	Обновление профиля
`changePassword`	`function`	Смена пароля

Примеры использования

Форма входа

import { useAuth } from '@emd-cloud/react-components';
import { useState } from 'react';

function LoginForm() {
  const { login, loading, error } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      const user = await login({ login: email, password });
      console.log('Вход выполнен:', user.email);
      
      // Сохраняем токен
      localStorage.setItem('auth_token', user.token);
      
      // Перенаправляем
      window.location.href = '/dashboard';
    } catch (err) {
      console.error('Ошибка входа:', err);
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <h2>Вход</h2>
      
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Пароль"
        required
      />
      
      <button type="submit" disabled={loading}>
        {loading ? 'Вход...' : 'Войти'}
      </button>
      
      {error && (
        <div className="error">
          {error.message}
        </div>
      )}
    </form>
  );
}

Форма регистрации

import { useAuth } from '@emd-cloud/react-components';
import { useState } from 'react';

function RegisterForm() {
  const { register, loading, error } = useAuth();
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    name: '',
    phone: ''
  });
  
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      const user = await register(formData);
      console.log('Регистрация успешна:', user.email);
      
      localStorage.setItem('auth_token', user.token);
      window.location.href = '/dashboard';
    } catch (err) {
      console.error('Ошибка регистрации:', err);
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <h2>Регистрация</h2>
      
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Имя"
        required
      />
      
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
        required
      />
      
      <input
        type="tel"
        name="phone"
        value={formData.phone}
        onChange={handleChange}
        placeholder="Телефон"
      />
      
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Пароль"
        required
        minLength={6}
      />
      
      <button type="submit" disabled={loading}>
        {loading ? 'Регистрация...' : 'Зарегистрироваться'}
      </button>
      
      {error && <div className="error">{error.message}</div>}
    </form>
  );
}

Профиль пользователя

import { useAuth } from '@emd-cloud/react-components';

function UserProfile() {
  const { user, logout, loading } = useAuth();
  
  if (loading) {
    return <div>Загрузка...</div>;
  }
  
  if (!user) {
    return <LoginForm />;
  }
  
  const handleLogout = async () => {
    await logout();
    localStorage.removeItem('auth_token');
    window.location.href = '/';
  };
  
  return (
    <div className="profile">
      <h2>Профиль</h2>
      
      <div className="user-info">
        <p><strong>Имя:</strong> {user.name}</p>
        <p><strong>Email:</strong> {user.email}</p>
        <p><strong>Телефон:</strong> {user.phone}</p>
      </div>
      
      <button onClick={handleLogout}>
        Выйти
      </button>
    </div>
  );
}

Обновление профиля

import { useAuth } from '@emd-cloud/react-components';
import { useState } from 'react';

function EditProfile() {
  const { user, updateProfile, loading } = useAuth();
  const [formData, setFormData] = useState({
    name: user?.name || '',
    phone: user?.phone || ''
  });
  const [success, setSuccess] = useState(false);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      await updateProfile(formData);
      setSuccess(true);
      setTimeout(() => setSuccess(false), 3000);
    } catch (err) {
      console.error('Ошибка обновления:', err);
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <h2>Редактировать профиль</h2>
      
      <input
        type="text"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        placeholder="Имя"
      />
      
      <input
        type="tel"
        value={formData.phone}
        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
        placeholder="Телефон"
      />
      
      <button type="submit" disabled={loading}>
        {loading ? 'Сохранение...' : 'Сохранить'}
      </button>
      
      {success && (
        <div className="success">Профиль обновлен!</div>
      )}
    </form>
  );
}

Смена пароля

import { useAuth } from '@emd-cloud/react-components';
import { useState } from 'react';

function ChangePassword() {
  const { changePassword, loading } = useAuth();
  const [passwords, setPasswords] = useState({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  });
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    
    if (passwords.newPassword !== passwords.confirmPassword) {
      setError('Пароли не совпадают');
      return;
    }
    
    if (passwords.newPassword.length < 6) {
      setError('Пароль должен быть не менее 6 символов');
      return;
    }
    
    try {
      await changePassword({
        oldPassword: passwords.oldPassword,
        newPassword: passwords.newPassword
      });
      
      setSuccess(true);
      setPasswords({ oldPassword: '', newPassword: '', confirmPassword: '' });
      setTimeout(() => setSuccess(false), 3000);
    } catch (err) {
      setError(err.message || 'Ошибка смены пароля');
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <h2>Сменить пароль</h2>
      
      <input
        type="password"
        value={passwords.oldPassword}
        onChange={(e) => setPasswords({ ...passwords, oldPassword: e.target.value })}
        placeholder="Текущий пароль"
        required
      />
      
      <input
        type="password"
        value={passwords.newPassword}
        onChange={(e) => setPasswords({ ...passwords, newPassword: e.target.value })}
        placeholder="Новый пароль"
        required
      />
      
      <input
        type="password"
        value={passwords.confirmPassword}
        onChange={(e) => setPasswords({ ...passwords, confirmPassword: e.target.value })}
        placeholder="Подтвердите пароль"
        required
      />
      
      <button type="submit" disabled={loading}>
        {loading ? 'Сохранение...' : 'Сменить пароль'}
      </button>
      
      {error && <div className="error">{error}</div>}
      {success && <div className="success">Пароль успешно изменен!</div>}
    </form>
  );
}

Защищенный роут

import { useAuth } from '@emd-cloud/react-components';
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();
  
  if (loading) {
    return <div>Загрузка...</div>;
  }
  
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  
  return children;
}

// Использование
function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        path="/dashboard"
        element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}

Проверка авторизации при загрузке

import { useAuth } from '@emd-cloud/react-components';
import { useEffect } from 'react';

function App() {
  const { user, loading } = useAuth();
  
  useEffect(() => {
    // Проверяем токен при загрузке приложения
    const token = localStorage.getItem('auth_token');
    
    if (token && !user && !loading) {
      // SDK автоматически проверит токен через ApplicationProvider
      console.log('Проверка токена...');
    }
  }, [user, loading]);
  
  if (loading) {
    return <div>Загрузка приложения...</div>;
  }
  
  return (
    <div>
      {user ? (
        <AuthenticatedApp user={user} />
      ) : (
        <PublicApp />
      )}
    </div>
  );
}

TypeScript

import { useAuth } from '@emd-cloud/react-components';
import type { User } from '@emd-cloud/sdk';

function TypedComponent() {
  const { user, login, register } = useAuth();
  
  const handleLogin = async (email: string, password: string) => {
    const user: User = await login({ login: email, password });
    console.log(user.email);
  };
  
  return <div>...</div>;
}

Best Practices

Сохраняйте токен

// ✅ Хорошо
const { login } = useAuth();

const handleLogin = async (credentials) => {
  const user = await login(credentials);
  localStorage.setItem('auth_token', user.token);
};

Обрабатывайте состояния

// ✅ Хорошо
const { user, loading, error } = useAuth();

if (loading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
if (!user) return <LoginForm />;

return <Dashboard user={user} />;

Очищайте данные при выходе

// ✅ Хорошо
const { logout } = useAuth();

const handleLogout = async () => {
  await logout();
  localStorage.removeItem('auth_token');
  // Очистить другие данные
  sessionStorage.clear();
  window.location.href = '/';
};

Следующие шаги

💾 Изучите хуки базы данных
💬 Настройте хуки чатов
💡 Посмотрите примеры

useAuth()​

Возвращаемые значения​

Примеры использования​

Форма входа​

Форма регистрации​

Профиль пользователя​

Обновление профиля​

Смена пароля​

Защищенный роут​

Проверка авторизации при загрузке​

TypeScript​

Best Practices​

Сохраняйте токен​

Обрабатывайте состояния​

Очищайте данные при выходе​

Следующие шаги​

Полезные ссылки​

useAuth()

Возвращаемые значения

Примеры использования

Форма входа

Форма регистрации

Профиль пользователя

Обновление профиля

Смена пароля

Защищенный роут

Проверка авторизации при загрузке

TypeScript

Best Practices

Сохраняйте токен

Обрабатывайте состояния

Очищайте данные при выходе

Следующие шаги

Полезные ссылки