> ## 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 애플리케이션에 추가하는 방법을 안내합니다. 콜백 처리, 로딩 상태, 서버에서 검증하는 접근 제어를 포함합니다.

> [!WARNING]
>
> 인증은 새로 추가된 기능입니다. React 인증 패키지는 릴리스에 따라 달라집니다. 활성화된 애플리케이션에서만 호스팅 흐름을 사용하십시오. 아래 컴포넌트 목록은 현재 공개된 패키지 API가 아니라 예정된 계약을 설명합니다.

## 호스팅 인증으로 시작하기

1. 애플리케이션을 구성하고 [JavaScript 퀵스타트](https://docs.didit.me/ko/authentication/quickstarts/javascript.md)에서 `auth.js`를 복사하십시오.
2. 등록한 `/auth/callback`을 `handleCallback()`을 한 번만 호출하는 페이지로 연결하십시오. 개발 환경에서의 effect 재실행을 포함해 중복 effect를 막으십시오. 코드는 한 번만 사용할 수 있습니다.
3. 로딩, 로그아웃 상태, 로그인 상태, 세션 실패 상태를 명확히 구분하십시오. 로그인 오류를 표시하되 token이나 콜백 코드를 기록하지 마십시오.
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`를 제공합니다. 컴포넌트 props, 콜백 라우팅, 패키지 버전은 공개된 릴리스에서 확인해야 합니다. 검증 SDK가 이 컴포넌트를 제공한다고 가정하지 마십시오.

자동 신호와 `vendorData`는 인증 코어 릴리스에 따라 달라집니다. 그때까지는 검증된 `sub`를 기준으로 백엔드에서 구성한 매핑을 사용하십시오. 로그인과 함께 검증 및 모니터링을 설정하려면 [공유 통합 프롬프트](https://docs.didit.me/ko/integration/integration-prompt.md)를 참조하십시오.

취소된 리디렉션, 로그인 버튼을 두 번 클릭한 경우, 콜백 새로고침, 만료된 세션, MFA, 로그아웃을 테스트하십시오. 이전 사용자의 보호된 데이터를 표시하지 않으면서 로딩 상태와 오류 상태를 모두 렌더링하십시오.


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