> ## Documentation Index
> Fetch the complete documentation index at: https://docs.didit.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Аутентификация в React: быстрый старт

> Подключите размещённую аутентификацию Didit к React-приложению: обработка callback, состояния загрузки и серверная проверка доступа.

> [!WARNING]
>
> Аутентификация пока новая: пакет React Authentication зависит от релиза. Используйте размещённый сценарий только с включённым приложением. Описанный ниже каталог компонентов отражает будущий контракт, а не текущий опубликованный API пакета.

## Начните с размещённой аутентификации

1. Настройте приложение и скопируйте `auth.js` из [быстрого старта для JavaScript](https://docs.didit.me/ru/authentication/quickstarts/javascript.md).
2. Направьте зарегистрированный `/auth/callback` на страницу, которая вызывает `handleCallback()` один раз. Предотвратите повторный запуск эффектов, в том числе повтор эффектов в режиме разработки: код можно использовать только один раз.
3. Различайте состояния загрузки, отсутствия входа в систему, входа в систему и ошибки сессии. Показывайте ошибки входа, не записывая токены и коды обратного вызова в логи.
4. Проверяйте каждый защищённый запрос на своём бэкенде. Скрытие компонента не является авторизацией.

```jsx SignInButton.jsx theme={null}
import { useState } from "react";
import { signIn } from "./auth.js";

export function SignInButton() {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  async function start() {
    setBusy(true);
    setError("");
    try {
      await signIn();
    } catch {
      setError("Could not start sign-in. Please try again.");
      setBusy(false);
    }
  }
  return <div>
    <button disabled={busy} onClick={start}>{busy ? "Opening sign-in…" : "Sign in"}</button>
    {error && <p role="alert">{error}</p>}
  </div>;
}
```

Вызовите `getSession()` после обратного вызова, чтобы заполнить представление пользователя. При выходе очищайте кэши, связанные с пользователем, и явно обрабатывайте ошибку отзыва на сервере. Минимальный вспомогательный JavaScript-модуль не сохраняет сессии после перезагрузки страницы.

## Предварительный просмотр релиза пакета React

Планируемый пакет `@didit-protocol/auth-react` предоставит корневой компонент `DiditAuth`, а также `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` и `ConnectedAgents`. Свойства компонентов, маршрутизация обратного вызова и версии пакета нужно брать из опубликованного релиза. Не предполагайте, что SDK для верификации предоставляет эти компоненты.

Автоматические сигналы и `vendorData` зависят от релиза ядра Authentication. До его выхода используйте сопоставление на своём бэкенде по проверенному `sub`. Сведения о верификации и мониторинге вместе со входом см. в [общем промпте для интеграции](https://docs.didit.me/ru/integration/integration-prompt.md).

Проверьте отменённое перенаправление, двойной клик по входу, обновление страницы после обратного вызова, истёкшую сессию, MFA и выход из системы. Отображайте состояния загрузки и ошибки так, чтобы не показывать защищённые данные предыдущего пользователя.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.