@arcblock/did-connect-react 3.4.14 → 3.5.0

package/docs/hooks-use-did.zh-TW.md

@@ -1,107 +0,0 @@
-# useDid
-
-`useDid` hook 是一個方便的實用程式，可輕鬆地從 `session.user` 物件中提取和使用特定的 DID 相關資訊。它簡化了使用者物件的解析過程，無需手動處理即可獲取永久 DID、錢包資訊和已連接帳戶等常用資料。
-
-此 hook 應在 `SessionProvider` 的子元件中使用，以確保它能存取 session 上下文。
-
-## 如何使用
-
-若要使用此 hook，請將其與 `useSession` 一起匯入。呼叫 `useSession` 以取得目前的 session 狀態，然後將 `session` 物件傳遞給 `useDid`。
-
-```javascript Basic Usage icon=logos:react
-import { useSession } from '@arcblock/did-connect-react';
-import { useDid } from '@arcblock/did-connect-react/lib/User';
-
-function UserProfile() {
-  const { session } = useSession();
-  const {
-    did,
-    walletDid,
-    connectedDids,
-    sourceProvider,
-    connectedAccounts,
-  } = useDid({ session });
-
-  if (!session.user) {
-    return <p>請登入以查看您的 DID 資訊。</p>;
-  }
-
-  return (
-    <div>
-      <h2>使用者 DID 資訊</h2>
-      <p><strong>永久 DID：</strong> {did}</p>
-      <p><strong>錢包 DID：</strong> {walletDid || 'N/A'}</p>
-      <p><strong>登入方式：</strong> {sourceProvider}</p>
-      <h3>已連接的帳戶 ({connectedAccounts.length})</h3>
-      <ul>
-        {connectedAccounts.map((account) => (
-          <li key={account.did}>
-            {account.provider}: {account.did}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-```
-
-## 參數
-
-`useDid` hook 接受一個物件作為其參數。
-
-<x-field data-name="options" data-type="object" data-required="true">
-  <x-field data-name="session" data-type="object" data-required="true" data-desc="從 `useSession` hook 取得的 session 物件。只有當 `session.user` 存在時，此 hook 才會計算資料。">
-    <x-field data-name="user" data-type="object" data-required="false" data-desc="成功登入後由 session 上下文提供的使用者物件。"></x-field>
-  </x-field>
-</x-field>
-
-## 傳回值
-
-此 hook 會傳回一個狀態物件，其中包含各種衍生的 DID 資訊。每當 `session.user` 物件變更時，此物件都會更新。
-
-<x-field-group>
-  <x-field data-name="did" data-type="string" data-desc="使用者的永久 DID。這是 `permanentDid` 的別名。"></x-field>
-  <x-field data-name="wallet" data-type="object" data-desc="提供者為 'wallet' 的已連接帳戶物件。如果沒有連接錢包，則傳回 `undefined`。">
-      <x-field data-name="did" data-type="string" data-desc="錢包帳戶的 DID。"></x-field>
-      <x-field data-name="provider" data-type="string" data-desc="提供者名稱，此處為 'wallet'。"></x-field>
-  </x-field>
-  <x-field data-name="walletDid" data-type="string" data-desc="使用者已連接錢包的 DID。如果沒有連接錢包，則傳回 `undefined`。"></x-field>
-  <x-field data-name="permanentDid" data-type="string" data-desc="使用者的永久 DID，即來自 `user.did` 的主要識別碼。"></x-field>
-  <x-field data-name="connectedDids" data-type="string[]" data-desc="一個包含使用者所有已連接帳戶 DID 的陣列。"></x-field>
-  <x-field data-name="connectedAccounts" data-type="object[]" data-desc="完整的已連接帳戶物件陣列。">
-    <x-field data-name="did" data-type="string" data-desc="已連接帳戶的 DID。"></x-field>
-    <x-field data-name="provider" data-type="string" data-desc="帳戶的提供者（例如 'wallet'、'github'）。"></x-field>
-  </x-field>
-  <x-field data-name="sourceProvider" data-type="string" data-desc="使用者最初用於登入的提供者（例如 'wallet'、'github'）。預設為 'wallet'。"></x-field>
-  <x-field data-name="sourceProviders" data-type="string[]" data-desc="一個包含使用者所有已連接帳戶提供者名稱的陣列。"></x-field>
-</x-field-group>
-
-## 獨立的輔助函數
-
-`useDid` hook 建立在一組匯出的輔助函數之上。如果您不需要 hook 的響應式狀態管理，而只想從使用者物件中提取特定資訊，可以直接匯入並使用這些函數。
-
-| Function                 | Description                                                  |
-| ------------------------ | ------------------------------------------------------------ |
-| `getPermanentDid(user)`  | 從使用者物件中提取永久 DID。             |
-| `getWalletDid(user)`     | 提取已連接錢包的 DID。                    |
-| `getConnectedAccounts(user)` | 擷取已連接帳戶的陣列。                 |
-| `getConnectedDids(user)`   | 擷取一個包含所有已連接帳戶 DID 的陣列。      |
-| `getSourceProvider(user)`  | 取得用於初始登入的提供者。                |
-| `getSourceProviders(user)` | 取得一個包含所有已連接提供者名稱的陣列。               |
-| `getWallet(user)`        | 尋找並傳回完整的錢包帳戶物件。        |
-
-### 範例：使用輔助函數
-
-```javascript Direct Function Usage icon=logos:javascript
-import { getWalletDid } from '@arcblock/did-connect-react/lib/User/use-did';
-import { useSession } from '@arcblock/did-connect-react';
-
-// 這種方法在事件處理常式或其他非 React 函數中可能很有用
-function handleUserAction() {
-  const { session } = useSession();
-  if (session.user) {
-    const walletDid = getWalletDid(session.user);
-    console.log('使用者錢包 DID：', walletDid);
-  }
-}
-```

package/docs/hooks-use-did.zh.md

@@ -1,107 +0,0 @@
-# useDid
-
-`useDid` Hook 是一个便捷的实用程序，可以轻松地从 `session.user` 对象中提取和使用特定的 DID 相关信息。它简化了用户对象的解析过程，无需手动处理即可获取永久 DID、钱包信息和已连接账户等常用数据。
-
-此 Hook 应在 `SessionProvider` 的子组件中使用，以确保其能够访问会话上下文。
-
-## 如何使用
-
-要使用此 Hook，请将其与 `useSession` 一起导入。调用 `useSession` 获取当前会话状态，然后将 `session` 对象传递给 `useDid`。
-
-```javascript Basic Usage icon=logos:react
-import { useSession } from '@arcblock/did-connect-react';
-import { useDid } from '@arcblock/did-connect-react/lib/User';
-
-function UserProfile() {
-  const { session } = useSession();
-  const {
-    did,
-    walletDid,
-    connectedDids,
-    sourceProvider,
-    connectedAccounts,
-  } = useDid({ session });
-
-  if (!session.user) {
-    return <p>请登录以查看您的 DID 信息。</p>;
-  }
-
-  return (
-    <div>
-      <h2>用户 DID 信息</h2>
-      <p><strong>永久 DID：</strong> {did}</p>
-      <p><strong>钱包 DID：</strong> {walletDid || 'N/A'}</p>
-      <p><strong>登录方法：</strong> {sourceProvider}</p>
-      <h3>已连接账户 ({connectedAccounts.length})</h3>
-      <ul>
-        {connectedAccounts.map((account) => (
-          <li key={account.did}>
-            {account.provider}: {account.did}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-```
-
-## 参数
-
-`useDid` Hook 接受一个对象作为其唯一参数。
-
-<x-field data-name="options" data-type="object" data-required="true">
-  <x-field data-name="session" data-type="object" data-required="true" data-desc="从 `useSession` Hook 获取的会话对象。只有当 `session.user` 存在时，该 Hook 才会计算数据。">
-    <x-field data-name="user" data-type="object" data-required="false" data-desc="成功登录后由会话上下文提供的用户对象。"></x-field>
-  </x-field>
-</x-field>
-
-## 返回值
-
-该 Hook 返回一个状态对象，其中包含各种派生的 DID 信息。每当 `session.user` 对象发生变化时，此对象都会更新。
-
-<x-field-group>
-  <x-field data-name="did" data-type="string" data-desc="用户的永久 DID。这是 `permanentDid` 的别名。"></x-field>
-  <x-field data-name="wallet" data-type="object" data-desc="提供者为 'wallet' 的已连接账户对象。如果没有连接钱包，则返回 `undefined`。">
-      <x-field data-name="did" data-type="string" data-desc="钱包账户的 DID。"></x-field>
-      <x-field data-name="provider" data-type="string" data-desc="提供者名称，即 'wallet'。"></x-field>
-  </x-field>
-  <x-field data-name="walletDid" data-type="string" data-desc="用户已连接钱包的 DID。如果没有连接钱包，则返回 `undefined`。"></x-field>
-  <x-field data-name="permanentDid" data-type="string" data-desc="用户的永久 DID，即来自 `user.did` 的主标识符。"></x-field>
-  <x-field data-name="connectedDids" data-type="string[]" data-desc="一个包含用户所有已连接账户 DID 的数组。"></x-field>
-  <x-field data-name="connectedAccounts" data-type="object[]" data-desc="包含所有已连接账户对象的完整数组。">
-    <x-field data-name="did" data-type="string" data-desc="已连接账户的 DID。"></x-field>
-    <x-field data-name="provider" data-type="string" data-desc="账户的提供者（例如 'wallet'、'github'）。"></x-field>
-  </x-field>
-  <x-field data-name="sourceProvider" data-type="string" data-desc="用户最初用于登录的提供者（例如 'wallet'、'github'）。默认为 'wallet'。"></x-field>
-  <x-field data-name="sourceProviders" data-type="string[]" data-desc="一个包含用户所有已连接账户提供者名称的数组。"></x-field>
-</x-field-group>
-
-## 独立的辅助函数
-
-`useDid` Hook 构建在一组导出的辅助函数之上。如果您不需要 Hook 的响应式状态管理，而只想从用户对象中提取特定信息，则可以直接导入并使用这些函数。
-
-| Function                 | Description                                                  |
-| ------------------------ | ------------------------------------------------------------ |
-| `getPermanentDid(user)`  | 从用户对象中提取永久 DID。             |
-| `getWalletDid(user)`     | 提取已连接钱包的 DID。                    |
-| `getConnectedAccounts(user)` | 检索已连接账户的数组。                 |
-| `getConnectedDids(user)`   | 从所有已连接账户中检索一个 DID 数组。      |
-| `getSourceProvider(user)`  | 获取用于初始登录的提供者。                |
-| `getSourceProviders(user)` | 获取所有已连接提供者名称的数组。               |
-| `getWallet(user)`        | 查找并返回完整的钱包账户对象。        |
-
-### 示例：使用辅助函数
-
-```javascript Direct Function Usage icon=logos:javascript
-import { getWalletDid } from '@arcblock/did-connect-react/lib/User/use-did';
-import { useSession } from '@arcblock/did-connect-react';
-
-// 这种方法在事件处理程序或其他非 React 函数中可能很有用
-function handleUserAction() {
-  const { session } = useSession();
-  if (session.user) {
-    const walletDid = getWalletDid(session.user);
-    console.log('User Wallet DID:', walletDid);
-  }
-}
-```

package/docs/hooks-use-oauth-passkey.ja.md

@@ -1,188 +0,0 @@
-# useOAuth & usePasskey
-
-`DidConnect` コンポーネントと `useConnect` フックは、すべての認証方法に対応する包括的なビルド済み UI を提供しますが、カスタムの認証フローを構築する必要がある場合もあります。`useOAuth` フックと `usePasskey` フックは、ソーシャルログイン (OAuth) とパスワードレス認証 (Passkey) の基盤となるロジックへの直接アクセスを提供します。
-
-これらのフックは、オーダーメイドのユーザーエクスペリエンスを作成するための強力なツールです。これらは、それぞれのコンテキストプロバイダーである `OAuthProvider` と `PasskeyProvider` に依存しており、これらは通常、メインの `SessionProvider` 内に含まれています。セッション管理の詳細については、[SessionProvider ドキュメント](./core-components-session-provider.md) を参照してください。
-
-## useOAuth
-
-`useOAuth` フックは、サードパーティのソーシャルログインフローを処理するための関数と状態を提供します。
-
-### インポート
-
-```javascript icon=logos:javascript
-import { useOAuth } from '@arcblock/did-connect-react/lib/OAuth';
-```
-
-### 戻り値
-
-このフックは、以下のプロパティとメソッドを含むオブジェクトを返します。
-
-<x-field-group>
-  <x-field data-name="loginOAuth" data-type="function" data-required="true">
-    <x-field-desc markdown>指定された OAuth プロバイダーでログインフローを開始します。ユーザー認証のためのポップアップを開き、ログイン結果で解決されるプロミスを返します。</x-field-desc>
-  </x-field>
-  <x-field data-name="bindOAuth" data-type="function" data-required="true">
-    <x-field-desc markdown>現在ログインしているユーザーのセッションに新しい OAuth アカウントをバインドします。</x-field-desc>
-  </x-field>
-  <x-field data-name="unbindOAuth" data-type="function" data-required="true">
-    <x-field-desc markdown>現在のユーザーのセッションから OAuth アカウントのバインドを解除します。</x-field-desc>
-  </x-field>
-  <x-field data-name="getOAuthConfigList" data-type="function" data-required="true">
-    <x-field-desc markdown>Blocklet 設定から有効で設定済みの OAuth プロバイダーのリストを取得します。プロバイダー設定オブジェクトの配列に解決されるプロミスを返します。</x-field-desc>
-  </x-field>
-  <x-field data-name="switchOAuthPassport" data-type="function" data-required="true">
-    <x-field-desc markdown>同じIDの異なる接続済みアカウント (パスポート) 間で切り替えるフローを開始します。</x-field-desc>
-  </x-field>
-  <x-field data-name="bindAuthLoading" data-type="boolean" data-required="true">
-    <x-field-desc markdown>`bindOAuth` 操作が進行中に `true` となるブール値フラグ。</x-field-desc>
-  </x-field>
-  <x-field data-name="unbindAuthLoading" data-type="boolean" data-required="true">
-    <x-field-desc markdown>`unbindOAuth` 操作が進行中に `true` となるブール値フラグ。</x-field-desc>
-  </x-field>
-  <x-field data-name="oauthState" data-type="object" data-required="true">
-    <x-field-desc markdown>認証プロセスのリアルタイムステータスを含むオブジェクト。</x-field-desc>
-    <x-field data-name="loading" data-type="boolean" data-desc="OAuth 操作が進行中の場合は True。"></x-field>
-    <x-field data-name="error" data-type="string" data-desc="操作が失敗した場合のエラーメッセージを含みます。"></x-field>
-    <x-field data-name="status" data-type="string" data-desc="フローの現在のステータス (例: 'scanned', 'succeed', 'error')。"></x-field>
-  </x-field>
-</x-field-group>
-
-### 使用例
-
-以下は、カスタムソーシャルログインコンポーネントを構築する方法の例です。
-
-```jsx CustomSocialLogin.jsx icon=logos:react
-import React, { useEffect, useState } from 'react';
-import { useOAuth } from '@arcblock/did-connect-react/lib/OAuth';
-import { useSession } from '@arcblock/did-connect-react/lib/Session';
-
-export default function CustomSocialLogin() {
-  const { loginOAuth, getOAuthConfigList } = useOAuth();
-  const { session } = useSession();
-  const [providers, setProviders] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    // コンポーネントがマウントされたときに、利用可能な OAuth プロバイダーのリストを取得します
-    getOAuthConfigList().then(setProviders).catch(console.error);
-  }, [getOAuthConfigList]);
-
-  const handleLogin = async (provider) => {
-    setLoading(true);
-    setError('');
-    try {
-      const result = await loginOAuth({ provider: provider.provider });
-      // ログインが成功すると、セッションは SessionProvider によって自動的に更新されます。
-      console.log('Login successful:', result);
-      // ここでセッションを更新したり、ユーザーをリダイレクトしたりすることができます。
-    } catch (err) {
-      setError(err.message);
-      console.error('Login failed:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (session.user) {
-    return <div>You are already logged in as {session.user.name}.</div>;
-  }
-
-  if (providers.length === 0) {
-    return <div>No social login methods configured.</div>;
-  }
-
-  return (
-    <div>
-      <h3>Login with Social Media</h3>
-      {providers.map((p) => (
-        <button key={p.provider} onClick={() => handleLogin(p)} disabled={loading}>
-          {loading ? 'Logging in...' : `Login with ${p.provider}`}
-        </button>
-      ))}
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-    </div>
-  );
-}
-```
-
-## usePasskey
-
-`usePasskey` フックは、WebAuthn (Passkeys) を使用したパスワードレス認証を処理するための関数と状態を提供します。
-
-### インポート
-
-```javascript icon=logos:javascript
-import { usePasskey } from '@arcblock/did-connect-react/lib/Passkey';
-```
-
-### 戻り値
-
-このフックは、以下のプロパティとメソッドを含むオブジェクトを返します。
-
-<x-field-group>
-  <x-field data-name="loginPasskey" data-type="function" data-required="true">
-    <x-field-desc markdown>既存の Passkey を使用してログインフローを開始します。ブラウザのネイティブ WebAuthn 認証プロンプトをトリガーします。</x-field-desc>
-  </x-field>
-  <x-field data-name="connectPasskey" data-type="function" data-required="true">
-    <x-field-desc markdown>新しい Passkey を作成し、現在のユーザーのセッションにバインドするフローを開始します。</x-field-desc>
-  </x-field>
-  <x-field data-name="disconnectPasskey" data-type="function" data-required="true">
-    <x-field-desc markdown>検証が成功した後、現在のユーザーのセッションから Passkey のバインドを解除します。</x-field-desc>
-  </x-field>
-  <x-field data-name="switchPassport" data-type="function" data-required="true">
-    <x-field-desc markdown>異なる接続済みアカウント (パスポート) 間で切り替えるフローを開始します。</x-field-desc>
-  </x-field>
-  <x-field data-name="connecting" data-type="boolean" data-required="true">
-    <x-field-desc markdown>`connectPasskey` 操作が進行中に `true` となるブール値フラグ。</x-field-desc>
-  </x-field>
-  <x-field data-name="disconnecting" data-type="boolean" data-required="true">
-    <x-field-desc markdown>`disconnectPasskey` 操作が進行中に `true` となるブール値フラグ。</x-field-desc>
-  </x-field>
-  <x-field data-name="passkeyState" data-type="object" data-required="true">
-    <x-field-desc markdown>Passkey 操作のリアルタイムステータスを含むオブジェクト。</x-field-desc>
-    <x-field data-name="loading" data-type="boolean" data-desc="Passkey 操作が進行中の場合は True。"></x-field>
-    <x-field data-name="creating" data-type="boolean" data-desc="Passkey 作成フェーズ中は True。"></x-field>
-    <x-field data-name="verifying" data-type="boolean" data-desc="Passkey 検証フェーズ中は True。"></x-field>
-    <x-field data-name="error" data-type="string" data-desc="操作が失敗した場合のエラーメッセージを含みます。"></x-field>
-    <x-field data-name="status" data-type="string" data-desc="フローの現在のステータス (例: 'scanned', 'succeed', 'error')。"></x-field>
-  </x-field>
-</x-field-group>
-
-### 使用例
-
-以下は、「Passkeyでログイン」ボタンを作成する方法の例です。
-
-```jsx PasskeyLoginButton.jsx icon=logos:react
-import React, { useState } from 'react';
-import { usePasskey } from '@arcblock/did-connect-react/lib/Passkey';
-
-export default function PasskeyLoginButton() {
-  const { loginPasskey, passkeyState } = usePasskey();
-  const [error, setError] = useState('');
-
-  const handleLogin = async () => {
-    setError('');
-    try {
-      const result = await loginPasskey();
-      console.log('Passkey login successful:', result);
-      // セッションは SessionProvider によって自動的に更新されます。
-    } catch (err) {
-      setError(err.message);
-      console.error('Passkey login failed:', err);
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={handleLogin} disabled={passkeyState.loading}>
-        {passkeyState.loading ? 'Verifying...' : 'Login with Passkey'}
-      </button>
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-    </div>
-  );
-}
-```
-
-これらのフックは、DID Connect の強力な認証機能を、完全にカスタムな UI でアプリケーションの任意の部分に統合する柔軟性を提供します。ビルド済みの `DidConnect` モーダルをプログラムで制御する方法については、[useConnect フックのドキュメント](./hooks-use-connect.md) に進んでください。

package/docs/hooks-use-oauth-passkey.md

@@ -1,188 +0,0 @@
-# useOAuth & usePasskey
-
-While the `DidConnect` component and `useConnect` hook provide a comprehensive, pre-built UI for all authentication methods, you may need to build a custom authentication flow. The `useOAuth` and `usePasskey` hooks offer direct access to the underlying logic for social logins (OAuth) and passwordless authentication (Passkey).
-
-These hooks are powerful tools for creating bespoke user experiences. They depend on their respective context providers, `OAuthProvider` and `PasskeyProvider`, which are typically included within the main `SessionProvider`. For more information on session management, see the [SessionProvider documentation](./core-components-session-provider.md).
-
-## useOAuth
-
-The `useOAuth` hook provides functions and state for handling third-party social login flows.
-
-### Import
-
-```javascript icon=logos:javascript
-import { useOAuth } from '@arcblock/did-connect-react/lib/OAuth';
-```
-
-### Return Value
-
-The hook returns an object containing the following properties and methods:
-
-<x-field-group>
-  <x-field data-name="loginOAuth" data-type="function" data-required="true">
-    <x-field-desc markdown>Initiates a login flow with a specified OAuth provider. It opens a popup for user authorization and returns a promise that resolves with the login result.</x-field-desc>
-  </x-field>
-  <x-field data-name="bindOAuth" data-type="function" data-required="true">
-    <x-field-desc markdown>Binds a new OAuth account to the currently logged-in user's session.</x-field-desc>
-  </x-field>
-  <x-field data-name="unbindOAuth" data-type="function" data-required="true">
-    <x-field-desc markdown>Unbinds an OAuth account from the current user's session.</x-field-desc>
-  </x-field>
-  <x-field data-name="getOAuthConfigList" data-type="function" data-required="true">
-    <x-field-desc markdown>Fetches the list of enabled and configured OAuth providers from the blocklet settings. Returns a promise that resolves to an array of provider configuration objects.</x-field-desc>
-  </x-field>
-  <x-field data-name="switchOAuthPassport" data-type="function" data-required="true">
-    <x-field-desc markdown>Initiates a flow to switch between different connected accounts (passports) of the same identity.</x-field-desc>
-  </x-field>
-  <x-field data-name="bindAuthLoading" data-type="boolean" data-required="true">
-    <x-field-desc markdown>A boolean flag that is `true` while the `bindOAuth` operation is in progress.</x-field-desc>
-  </x-field>
-  <x-field data-name="unbindAuthLoading" data-type="boolean" data-required="true">
-    <x-field-desc markdown>A boolean flag that is `true` while the `unbindOAuth` operation is in progress.</x-field-desc>
-  </x-field>
-  <x-field data-name="oauthState" data-type="object" data-required="true">
-    <x-field-desc markdown>An object containing the real-time status of the authentication process.</x-field-desc>
-    <x-field data-name="loading" data-type="boolean" data-desc="True if an OAuth operation is in progress."></x-field>
-    <x-field data-name="error" data-type="string" data-desc="Contains an error message if the operation failed."></x-field>
-    <x-field data-name="status" data-type="string" data-desc="The current status of the flow (e.g., 'scanned', 'succeed', 'error')."></x-field>
-  </x-field>
-</x-field-group>
-
-### Usage Example
-
-Here's an example of how to build a custom social login component.
-
-```jsx CustomSocialLogin.jsx icon=logos:react
-import React, { useEffect, useState } from 'react';
-import { useOAuth } from '@arcblock/did-connect-react/lib/OAuth';
-import { useSession } from '@arcblock/did-connect-react/lib/Session';
-
-export default function CustomSocialLogin() {
-  const { loginOAuth, getOAuthConfigList } = useOAuth();
-  const { session } = useSession();
-  const [providers, setProviders] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    // Fetch the list of available OAuth providers when the component mounts
-    getOAuthConfigList().then(setProviders).catch(console.error);
-  }, [getOAuthConfigList]);
-
-  const handleLogin = async (provider) => {
-    setLoading(true);
-    setError('');
-    try {
-      const result = await loginOAuth({ provider: provider.provider });
-      // After successful login, the session will be updated automatically by the SessionProvider.
-      console.log('Login successful:', result);
-      // You might want to refresh the session or redirect the user here.
-    } catch (err) {
-      setError(err.message);
-      console.error('Login failed:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (session.user) {
-    return <div>You are already logged in as {session.user.name}.</div>;
-  }
-
-  if (providers.length === 0) {
-    return <div>No social login methods configured.</div>;
-  }
-
-  return (
-    <div>
-      <h3>Login with Social Media</h3>
-      {providers.map((p) => (
-        <button key={p.provider} onClick={() => handleLogin(p)} disabled={loading}>
-          {loading ? 'Logging in...' : `Login with ${p.provider}`}
-        </button>
-      ))}
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-    </div>
-  );
-}
-```
-
-## usePasskey
-
-The `usePasskey` hook provides functions and state for handling passwordless authentication using WebAuthn (Passkeys).
-
-### Import
-
-```javascript icon=logos:javascript
-import { usePasskey } from '@arcblock/did-connect-react/lib/Passkey';
-```
-
-### Return Value
-
-The hook returns an object containing the following properties and methods:
-
-<x-field-group>
-  <x-field data-name="loginPasskey" data-type="function" data-required="true">
-    <x-field-desc markdown>Initiates a login flow using an existing Passkey. It triggers the browser's native WebAuthn authentication prompt.</x-field-desc>
-  </x-field>
-  <x-field data-name="connectPasskey" data-type="function" data-required="true">
-    <x-field-desc markdown>Initiates a flow to create and bind a new Passkey to the current user's session.</x-field-desc>
-  </x-field>
-  <x-field data-name="disconnectPasskey" data-type="function" data-required="true">
-    <x-field-desc markdown>Unbinds a Passkey from the current user's session after successful verification.</x-field-desc>
-  </x-field>
-  <x-field data-name="switchPassport" data-type="function" data-required="true">
-    <x-field-desc markdown>Initiates a flow to switch between different connected accounts (passports).</x-field-desc>
-  </x-field>
-  <x-field data-name="connecting" data-type="boolean" data-required="true">
-    <x-field-desc markdown>A boolean flag that is `true` while the `connectPasskey` operation is in progress.</x-field-desc>
-  </x-field>
-  <x-field data-name="disconnecting" data-type="boolean" data-required="true">
-    <x-field-desc markdown>A boolean flag that is `true` while the `disconnectPasskey` operation is in progress.</x-field-desc>
-  </x-field>
-  <x-field data-name="passkeyState" data-type="object" data-required="true">
-    <x-field-desc markdown>An object containing the real-time status of the Passkey operation.</x-field-desc>
-    <x-field data-name="loading" data-type="boolean" data-desc="True if a Passkey operation is in progress."></x-field>
-    <x-field data-name="creating" data-type="boolean" data-desc="True during the Passkey creation phase."></x-field>
-    <x-field data-name="verifying" data-type="boolean" data-desc="True during the Passkey verification phase."></x-field>
-    <x-field data-name="error" data-type="string" data-desc="Contains an error message if the operation failed."></x-field>
-    <x-field data-name="status" data-type="string" data-desc="The current status of the flow (e.g., 'scanned', 'succeed', 'error')."></x-field>
-  </x-field>
-</x-field-group>
-
-### Usage Example
-
-Here's an example of how to create a "Login with Passkey" button.
-
-```jsx PasskeyLoginButton.jsx icon=logos:react
-import React, { useState } from 'react';
-import { usePasskey } from '@arcblock/did-connect-react/lib/Passkey';
-
-export default function PasskeyLoginButton() {
-  const { loginPasskey, passkeyState } = usePasskey();
-  const [error, setError] = useState('');
-
-  const handleLogin = async () => {
-    setError('');
-    try {
-      const result = await loginPasskey();
-      console.log('Passkey login successful:', result);
-      // The session will be updated automatically by the SessionProvider.
-    } catch (err) {
-      setError(err.message);
-      console.error('Passkey login failed:', err);
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={handleLogin} disabled={passkeyState.loading}>
-        {passkeyState.loading ? 'Verifying...' : 'Login with Passkey'}
-      </button>
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-    </div>
-  );
-}
-```
-
-These hooks provide the flexibility to integrate DID Connect's powerful authentication features into any part of your application with a completely custom UI. To learn about programmatically controlling the pre-built `DidConnect` modal, proceed to the [useConnect hook documentation](./hooks-use-connect.md).