> ## 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 应用中接入 Didit 托管式身份认证，涵盖回调处理、加载状态与服务端校验访问。

> [!WARNING]
>
> 身份认证是新功能：React 身份认证包取决于具体发布版本。仅在应用已启用的情况下使用托管流程。下方的组件目录描述的是即将推出的约定，而不是当前已发布的包 API。

## 从托管认证开始

1. 配置应用，并从 [JavaScript 快速入门](https://docs.didit.me/zh/authentication/quickstarts/javascript.md) 复制 `auth.js`。
2. 将已注册的 `/auth/callback` 指向一个页面，该页面只调用一次 `handleCallback()`。防止重复执行副作用，包括开发环境中的副作用重放，因为授权码只能使用一次。
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`。组件属性、回调路由和包版本必须以已发布的版本为准。请勿假设验证 SDK 会提供这些组件。

自动信号和 `vendorData` 依赖认证核心版本。在此之前，请使用您后端对已验证 `sub` 的映射。有关如何将验证和监控与登录结合使用的内容，请参阅[共享集成提示](https://docs.didit.me/zh/integration/integration-prompt.md)。

请测试以下场景：取消重定向、双击登录、刷新回调页面、会话过期、多因素认证（MFA）和退出登录。渲染加载和错误状态时，不得显示上一位用户的受保护数据。


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