@arcblock/did-connect-react 3.4.14 → 3.5.0

package/docs/core-components-session-provider.zh.md

@@ -1,197 +0,0 @@
-# 会话管理 (SessionProvider)
-
-`SessionProvider` 是 `@arcblock/did-connect-react` 库的基石。它是一个 React Context Provider，封装了所有与会话相关的逻辑、状态和操作。通过使用 `SessionProvider` 包装您的应用程序，您可以将用户的会话信息和身份验证方法提供给应用程序树中的任何组件，而无需手动向下传递 props。
-
-该组件处理从存储会话令牌和管理用户数据到协调登录/注销流程以及自动刷新会话的所有事务。
-
-## 工作原理
-
-`SessionProvider` 创建一个会话上下文，该上下文持有当前用户的状态（`user` 对象、`loading` 状态等）并提供修改该状态的函数（例如 `login`、`logout`）。嵌套在 `SessionProvider` 中的任何组件都可以订阅此上下文以访问此数据并触​​发身份验证操作。
-
-下图说明了基本架构：
-
-<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
-![Session Management (SessionProvider)](assets/diagram/core-components-session-provider-01.zh.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 快速入门
-
-要使用会话管理功能，您首先需要导入 `SessionProvider` 并用它包装您的应用程序。该库导出工厂函数以创建配置好的 provider。
-
-### 基本设置
-
-设置 provider 的最常见方法是使用 `createAuthServiceSessionContext`，它已为在 ArcBlock 生态系统 (Blocklets) 中运行的应用程序预先配置。
-
-```javascript App.js icon=logos:javascript
-import React from 'react';
-import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
-import AuthButton from './AuthButton';
-
-// 创建 SessionProvider 和一个用于访问上下文的 hook
-const { SessionProvider, SessionContext } = createAuthServiceSessionContext();
-
-export const useSession = () => React.useContext(SessionContext);
-
-export default function App() {
-  return (
-    <SessionProvider>
-      <div className="App">
-        <h1>Welcome to DID Connect</h1>
-        <AuthButton />
-      </div>
-    </SessionProvider>
-  );
-}
-```
-
-```javascript AuthButton.js icon=logos:javascript
-import React from 'react';
-import { useSession } from './App';
-
-export default function AuthButton() {
-  const { session } = useSession();
-
-  if (session.loading) {
-    return <div>Loading...</div>;
-  }
-
-  if (session.user) {
-    return (
-      <div>
-        <p>Welcome, {session.user.fullName || session.user.did}</p>
-        <button onClick={() => session.logout()}>Logout</button>
-      </div>
-    );
-  }
-
-  return <button onClick={() => session.login()}>Login</button>;
-}
-```
-
-在此示例中，`createAuthServiceSessionContext` 生成一个 `SessionProvider`。我们用它包装我们的 `App`，现在任何子组件，例如 `AuthButton`，都可以使用 `useSession` hook 来访问会话数据和函数。
-
-## SessionProvider Props
-
-您可以通过向 `SessionProvider` 传递各种 props 来配置其行为。
-
-<x-field-group>
-  <x-field data-name="serviceHost" data-type="string" data-desc="身份验证服务后端的基 URL。默认为当前 Blocklet 的前缀或 '/'。"></x-field>
-  <x-field data-name="autoConnect" data-type="boolean" data-default="false" data-desc="如果为 true，在页面加载时若未找到用户会话，则 DID Connect 对话框将自动打开。"></x-field>
-  <x-field data-name="autoDisconnect" data-type="boolean" data-default="true" data-desc="如果为 true，当应用程序 ID 与会话 cookie 中存储的 ID 不匹配时，会话将自动清除。"></x-field>
-  <x-field data-name="protectedRoutes" data-type="string[]" data-default='["*"]' data-desc="用于保护的路由模式数组。如果未经身份验证的用户尝试访问这些路由，他们将看到一个加载指示器，直到会话被解析。支持通配符 (*)。"></x-field>
-  <x-field data-name="locale" data-type="string" data-desc="设置 DID Connect UI 的显示语言。默认为浏览器语言。"></x-field>
-  <x-field data-name="webWalletUrl" data-type="string" data-desc="用于连接过程的基于 Web 的 DID Wallet 的 URL。"></x-field>
-  <x-field data-name="timeout" data-type="number" data-default="120000" data-desc="在连接过程中等待 DID Wallet 响应的超时时间（以毫秒为单位）。"></x-field>
-  <x-field data-name="useSocket" data-type="boolean" data-default="true" data-desc="决定是否使用 WebSocket 与钱包进行实时通信，以提供更快的用户体验。"></x-field>
-  <x-field data-name="extraParams" data-type="object" data-desc="一个包含额外参数的对象，这些参数将随每次身份验证请求发送到后端。"></x-field>
-</x-field-group>
-
-## 会话上下文对象
-
-当您使用 `SessionContext` 时，会得到一个包含会话状态和 API 的对象。主要属性是 `session`，它包含了您将要交互的所有数据和方法。
-
-### 状态属性
-
-这些是描述用户会话当前状态的只读属性。
-
-<x-field-group>
-  <x-field data-name="user" data-type="User | null" data-desc="如果存在会话，则为经过身份验证的用户对象，否则为 null。包含 DID、姓名、电子邮件、头像等详细信息。"></x-field>
-  <x-field data-name="loading" data-type="boolean" data-desc="在会话初始化、刷新或登录/注销过程中为 True。"></x-field>
-  <x-field data-name="initialized" data-type="boolean" data-desc="页面加载时初始会话检查完成后为 True。"></x-field>
-  <x-field data-name="open" data-type="boolean" data-desc="如果 DID Connect 对话框当前处于打开状态，则为 True。"></x-field>
-  <x-field data-name="error" data-type="string" data-desc="如果上次会话操作失败，则包含错误消息。"></x-field>
-  <x-field data-name="provider" data-type="string" data-desc="上次登录使用的提供商（例如 'wallet'、'github'、'google'）。"></x-field>
-  <x-field data-name="walletOS" data-type="string" data-desc="已连接的 DID Wallet 的操作系统（例如 'ios'、'android'、'web'）。"></x-field>
-  <x-field data-name="unReadCount" data-type="number" data-desc="当前用户的未读通知数量。"></x-field>
-</x-field-group>
-
-### 操作方法
-
-这些是您可以调用以启动身份验证流程或管理会话的函数。
-
-<x-field-group>
-  <x-field data-name="login()" data-type="function">
-    <x-field-desc markdown>通过打开 DID Connect UI 来启动用户登录过程。它接受可选的回调和参数。</x-field-desc>
-  </x-field>
-  <x-field data-name="logout()" data-type="function">
-    <x-field-desc markdown>将当前用户登出，从存储中清除会话。它接受一个可选的回调函数，在完成后执行。</x-field-desc>
-  </x-field>
-  <x-field data-name="switchDid()" data-type="function">
-    <x-field-desc markdown>允许已登录的用户切换到不同的 DID 账户。它会重新打开 DID Connect UI，并提供切换账户的上下文。</x-field-desc>
-  </x-field>
-  <x-field data-name="bindWallet()" data-type="function">
-    <x-field-desc markdown>对于通过社交提供商（OAuth）或 Passkeys 登录的用户，此函数会启动一个流程，将 DID Wallet 连接到他们现有的账户。</x-field-desc>
-  </x-field>
-  <x-field data-name="refresh()" data-type="function">
-    <x-field-desc markdown>手动触发从服务器刷新用户会话数据。可用于获取更新的个人资料信息或权限。</x-field-desc>
-  </x-field>
-  <x-field data-name="switchProfile()" data-type="function">
-    <x-field-desc markdown>打开 DID Connect UI，允许用户在同一 DID 账户内的不同个人资料（例如，个人、工作）之间切换。</x-field-desc>
-  </x-field>
-  <x-field data-name="switchPassport()" data-type="function">
-    <x-field-desc markdown>打开 DID Connect UI，允许用户在不同 passport 之间切换，这些 passport 可能代表不同的凭证或角色集。</x-field-desc>
-  </x-field>
-  <x-field data-name="connectToDidSpaceForFullAccess()" data-type="function">
-    <x-field-desc markdown>启动与用户 DID Space 的连接，请求完全访问权限。这通常是需要在用户个人数据存储中读写数据的应用程序所必需的。</x-field-desc>
-  </x-field>
-  <x-field data-name="withSecondaryAuth()" data-type="function">
-    <x-field-desc markdown>一个高阶函数，用于包装另一个函数，在执行被包装的函数之前，要求用户完成二次身份验证步骤（例如，重新输入密码、使用 passkey）。这是保护敏感操作的理想选择。</x-field-desc>
-  </x-field>
-</x-field-group>
-
-### 事件订阅
-
-该上下文还提供一个 `events` 对象，它是 `EventEmitter3` 的一个实例。您可以使用它来订阅会话的各种生命周期事件。
-
-```javascript EventListener.js icon=logos:javascript
-import React, { useEffect } from 'react';
-import { useSession } from './App';
-
-function EventListener() {
-  const { events } = useSession();
-
-  useEffect(() => {
-    const handleLogin = (result) => {
-      console.log('用户已登录：', result.user.did);
-    };
-
-    const handleLogout = () => {
-      console.log('用户已登出');
-    };
-
-    events.on('login', handleLogin);
-    events.on('logout', handleLogout);
-
-    // 在组件卸载时清理监听器
-    return () => {
-      events.off('login', handleLogin);
-      events.off('logout', handleLogout);
-    };
-  }, [events]);
-
-  return null; // 此组件不渲染任何内容
-}
-```
-
-可用的事件包括 `login`、`login-failed`、`logout`、`change`、`bind-wallet`、`switch-passport` 等。
-
-## 高级定制
-
-对于需要不同存储机制或更精细控制的场景，您可以使用通用的 `createSessionContext` 工厂函数。
-
-```javascript customSession.js icon=logos:javascript
-import { createSessionContext } from '@arcblock/did-connect-react/lib/Session';
-
-const { SessionProvider, SessionContext } = createSessionContext(
-  'my_app_session_token', // 自定义存储键
-  'ls',                   // 使用 localStorage 代替 cookie
-  {},
-  {
-    rolling: false,         // 禁用自动令牌刷新
-  }
-);
-
-// ... 根据需要导出和使用
-```
-
-这允许您微调会话行为，例如将存储引擎更改为 `localStorage` ('ls') 或 `cookie`，或调整令牌刷新策略。

package/docs/core-components.ja.md

@@ -1,16 +0,0 @@
-# コアコンポーネント
-
-`@arcblock/did-connect-react` ライブラリは、分散型アイデンティティをアプリケーションに統合するための基盤を提供するいくつかの重要なコンポーネントを中心に構築されています。これらのコンポーネントは、セッション管理とユーザー向けの接続インターフェースを処理します。
-
-これら2つのコアコンポーネントを理解することは、ライブラリをマスターするための第一歩です。これらは連携して、シームレスで安全な認証体験を提供します。
-
-<x-cards data-columns="2">
-  <x-card data-title="SessionProvider" data-icon="lucide:key-round" data-href="/core-components/session-provider">
-    ライブラリの中心です。このプロバイダーはアプリケーションをラップして、ユーザーセッションの状態を管理し、認証ロジックを処理し、セッションデータと制御関数をすべてのネストされたコンポーネントに公開します。
-  </x-card>
-  <x-card data-title="DidConnect" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
-    ユーザーインタラクションのための事前構築済みUIです。QRコード、ログインオプション（パスキーやOAuthなど）を表示し、接続フロー全体を処理します。通常、直接レンダリングするのではなく、プログラムで制御します。
-  </x-card>
-</x-cards>
-
-まず、アプリケーション全体の状態を管理するために `SessionProvider` を設定する方法を学び、次に `DidConnect` コンポーネントがユーザー認証の過程をどのように促進するかを探ります。

package/docs/core-components.md

@@ -1,16 +0,0 @@
-# Core Components
-
-The `@arcblock/did-connect-react` library is built around a few essential components that provide the foundation for integrating decentralized identity into your application. These components handle session management and the user-facing connection interface.
-
-Understanding these two core components is the first step to mastering the library. They work together to provide a seamless and secure authentication experience.
-
-<x-cards data-columns="2">
-  <x-card data-title="SessionProvider" data-icon="lucide:key-round" data-href="/core-components/session-provider">
-    The heart of the library. This provider wraps your application to manage user session state, handle authentication logic, and expose session data and control functions to all nested components.
-  </x-card>
-  <x-card data-title="DidConnect" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
-    The pre-built UI for user interaction. It displays the QR code, login options (like Passkeys and OAuth), and handles the entire connection flow. You typically won't render it directly but control it programmatically.
-  </x-card>
-</x-cards>
-
-Start by learning how to set up the `SessionProvider` to manage application-wide state, then explore how the `DidConnect` component facilitates the user authentication journey.

package/docs/core-components.zh-TW.md

@@ -1,16 +0,0 @@
-# 核心元件
-
-`@arcblock/did-connect-react` 函式庫圍繞著幾個核心元件構建，這些元件為將去中心化身份整合到您的應用程式中提供了基礎。這些元件處理會話管理和使用者面向的連接介面。
-
-理解這兩個核心元件是掌握此函式庫的第一步。它們共同提供無縫且安全的身份驗證體驗。
-
-<x-cards data-columns="2">
-  <x-card data-title="SessionProvider" data-icon="lucide:key-round" data-href="/core-components/session-provider">
-    函式庫的核心。此提供者包裝您的應用程式，以管理使用者會話狀態、處理身份驗證邏輯，並將會話資料和控制函式公開給所有巢狀元件。
-  </x-card>
-  <x-card data-title="DidConnect" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
-    預先建置的使用者互動介面。它顯示 QR code、登入選項（如密碼金鑰和 OAuth），並處理整個連接流程。您通常不會直接渲染它，而是以程式化方式控制它。
-  </x-card>
-</x-cards>
-
-首先學習如何設定 `SessionProvider` 來管理應用程式範圍的狀態，然後探索 `DidConnect` 元件如何促進使用者身份驗證的旅程。

package/docs/core-components.zh.md

@@ -1,16 +0,0 @@
-# 核心组件
-
-`@arcblock/did-connect-react` 库围绕几个核心组件构建，它们为将去中心化身份集成到您的应用程序中提供了基础。这些组件处理会话管理和面向用户的连接界面。
-
-理解这两个核心组件是掌握该库的第一步。它们协同工作，提供无缝且安全的身份验证体验。
-
-<x-cards data-columns="2">
-  <x-card data-title="SessionProvider" data-icon="lucide:key-round" data-href="/core-components/session-provider">
-    该库的核心。此提供程序包裹您的应用程序，用于管理用户会话状态、处理身份验证逻辑，并向所有嵌套组件公开会话数据和控制函数。
-  </x-card>
-  <x-card data-title="DidConnect" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
-    用于用户交互的预构建 UI。它会显示二维码、登录选项（如 Passkeys 和 OAuth），并处理整个连接流程。您通常不会直接渲染它，而是以编程方式对其进行控制。
-  </x-card>
-</x-cards>
-
-首先学习如何设置 `SessionProvider` 来管理整个应用程序的状态，然后探索 `DidConnect` 组件如何为用户的身份验证过程提供便利。

package/docs/getting-started.ja.md

@@ -1,138 +0,0 @@
-# はじめに
-
-このガイドでは、`@arcblock/did-connect-react` を使用して、Reactアプリケーションに分散型ID（DID）認証を統合するための基本的な手順を説明します。わずか数分で、完全に機能するログインおよびログアウトフローを実装できます。
-
-### 前提条件
-
-開始する前に、開発環境が次の基準を満たしていることを確認してください：
-
-- Reactプロジェクトがセットアップされていること。
-- 認証リクエストを処理するBlocklet Serverインスタンスが実行されていること。このライブラリは、Blocklet Serverをバックエンドとしてシームレスに動作するように設計されています。
-
-## ステップ1：ライブラリをインストールする
-
-まず、`@arcblock/did-connect-react` パッケージをプロジェクトに追加します。npmまたはyarnのいずれかを使用できます。
-
-```bash npmでインストール icon=logos:npm
-npm install @arcblock/did-connect-react
-```
-
-```bash yarnでインストール icon=logos:yarn
-yarn add @arcblock/did-connect-react
-```
-
-## ステップ2：SessionProviderをセットアップする
-
-`SessionProvider`はライブラリの中心です。これは、ユーザーのセッション状態（ログイン状態やユーザー情報など）を管理し、その内部でラップされたすべてのコンポーネントで利用可能にするコンテキストプロバイダーです。アプリケーションのルート、例えば`App.js`ファイルに配置する必要があります。
-
-Blocklet上に構築されたアプリケーションでは、`createAuthServiceSessionContext`ファクトリ関数を使用してプロバイダーを初期化することが推奨されます。
-
-```javascript App.js icon=logos:react
-import React from 'react';
-import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
-import Home from './Home'; // このコンポーネントは次のステップで作成します
-
-// createAuthServiceSessionContextはBlocklet環境に最適化されています
-const { SessionProvider } = createAuthServiceSessionContext();
-
-function App() {
-  return (
-    // serviceHostプロパティは、バックエンド認証サービスのベースパスを指します。
-    // 標準的なBlockletの場合、これは通常blockletのプレフィックスまたは'/'です。
-    <SessionProvider serviceHost="/">
-      <Home />
-    </SessionProvider>
-  );
-}
-
-export default App;
-```
-
-## ステップ3：ログインとログアウトを実装する
-
-次に、ユーザーがログインおよびログアウトできるコンポーネントを作成しましょう。Reactの`useContext`フックと`SessionContext`を使用して、セッションデータと関数にアクセスできます。
-
-`session`オブジェクトは、現在の`user`、`loading`状態、そして`login()`や`logout()`のような関数など、必要なものすべてを提供します。
-
-```javascript Home.js icon=logos:react
-import React, { useContext } from 'react';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import ConnectButton from '@arcblock/did-connect-react/lib/Button';
-import Button from '@arcblock/ux/lib/Button'; // 汎用ボタン
-import CircularProgress from '@mui/material/CircularProgress';
-
-function Home() {
-  // セッションコンテキストにアクセス
-  const { session } = useContext(SessionContext);
-
-  // アクセスしやすいように分割代入
-  const { user, loading, login, logout } = session;
-
-  // セッションが初期化されている間、ローディングインジケーターを表示
-  if (loading) {
-    return <CircularProgress />;
-  }
-
-  return (
-    <div style={{ padding: '20px', textAlign: 'center' }}>
-      {user ? (
-        // ユーザーがログインしている場合は、DIDとログアウトボタンを表示
-        <div>
-          <h1>ようこそ！</h1>
-          <p>あなたのDID: {user.did}</p>
-          <Button variant="contained" color="secondary" onClick={logout}>
-            ログアウト
-          </Button>
-        </div>
-      ) : (
-        // ログインしていない場合は、ログインボタンを表示
-        <div>
-          <h1>サインインしてください</h1>
-          <ConnectButton onClick={() => login()}>
-            ウォレットに接続
-          </ConnectButton>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Home;
-```
-
-ユーザーが`ConnectButton`をクリックすると、`login()`関数が呼び出されます。この関数は、ユーザーがDID WalletでスキャンするためのQRコードを表示するDID Connectモーダルを開き、認証プロセス全体を管理します。
-
-## ステップ4：ユーザーデータにアクセスする
-
-ユーザーが正常にログインすると、`session.user`オブジェクトが入力されます。このオブジェクトには、ユーザーのDID Walletから取得したプロファイル情報が含まれています。
-
-コンテキストによって提供される`session`オブジェクトは、ユーザーの認証状態への主要なインターフェースです。以下にその主要なプロパティを示します：
-
-<x-field-group>
-  <x-field data-name="user" data-type="object | null" data-desc="認証されたユーザーオブジェクト。ユーザーがログインしていない場合は`null`です。">
-    <x-field data-name="did" data-type="string" data-desc="ユーザーの分散型識別子（DID）。"></x-field>
-    <x-field data-name="fullName" data-type="string" data-desc="ウォレットプロファイルからのユーザーのフルネーム。"></x-field>
-    <x-field data-name="email" data-type="string" data-desc="ウォレットプロファイルからのユーザーのメールアドレス。"></x-field>
-  </x-field>
-  <x-field data-name="loading" data-type="boolean" data-desc="セッションが初期化または更新されている間は`true`、それ以外は`false`。"></x-field>
-  <x-field data-name="login" data-type="function" data-desc="ログインプロセスを開始する関数。DID Connect UIを開きます。"></x-field>
-  <x-field data-name="logout" data-type="function" data-desc="ユーザーをログアウトさせ、セッションをクリアする関数。"></x-field>
-  <x-field data-name="initialized" data-type="boolean" data-desc="初期セッションチェックが完了すると`true`になります。"></x-field>
-</x-field-group>
-
-## これで完了です！
-
-おめでとうございます！ReactアプリケーションにDIDベースの認証フローを完全に実装しました。ユーザーはDID Walletを使用してサインインでき、アプリケーションは安全にセッション情報にアクセスできます。
-
-### 次のステップ
-
-さらに深く掘り下げ、より高度な機能を探求するには、次のセクションをご覧ください：
-
-<x-cards>
-  <x-card data-title="セッション管理（SessionProvider）" data-icon="lucide:key-round" data-href="/core-components/session-provider">
-    `SessionProvider`のすべての設定オプションについて学び、セッションの挙動やタイムアウトなどをカスタマイズします。
-  </x-card>
-  <x-card data-title="接続UI（DidConnect）" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
-    `DidConnect`コンポーネントを探索し、接続UIをページに直接埋め込む宣言的な方法を学びます。
-  </x-card>
-</x-cards>

package/docs/getting-started.md

@@ -1,138 +0,0 @@
-# Getting Started
-
-This guide will walk you through the essential steps to integrate decentralized identity (DID) authentication into your React application using `@arcblock/did-connect-react`. In just a few minutes, you'll have a fully functional login and logout flow.
-
-### Prerequisites
-
-Before you begin, ensure your development environment meets the following criteria:
-
-- You have a React project set up.
-- You have a running Blocklet Server instance that will handle the authentication requests. The library is designed to work seamlessly with a backend powered by Blocklet Server.
-
-## Step 1: Install the Library
-
-First, add the `@arcblock/did-connect-react` package to your project. You can use either npm or yarn.
-
-```bash Install with npm icon=logos:npm
-npm install @arcblock/did-connect-react
-```
-
-```bash Install with yarn icon=logos:yarn
-yarn add @arcblock/did-connect-react
-```
-
-## Step 2: Set Up the SessionProvider
-
-The `SessionProvider` is the heart of the library. It's a context provider that manages the user's session state (like login status and user information) and makes it available to all components wrapped within it. You should place it at the root of your application, for instance, in your `App.js` file.
-
-For applications built on Blocklet, the recommended way to initialize the provider is by using the `createAuthServiceSessionContext` factory function.
-
-```javascript App.js icon=logos:react
-import React from 'react';
-import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
-import Home from './Home'; // We will create this component in the next step
-
-// createAuthServiceSessionContext is optimized for Blocklet environments
-const { SessionProvider } = createAuthServiceSessionContext();
-
-function App() {
-  return (
-    // The serviceHost prop points to the base path of your backend authentication service.
-    // For a standard Blocklet, this is usually the blocklet's prefix or '/'.
-    <SessionProvider serviceHost="/">
-      <Home />
-    </SessionProvider>
-  );
-}
-
-export default App;
-```
-
-## Step 3: Implement Login and Logout
-
-Now, let's create a component that allows users to log in and log out. We can access the session data and functions using React's `useContext` hook with the `SessionContext`.
-
-The `session` object gives you everything you need: the current `user`, the `loading` state, and functions like `login()` and `logout()`.
-
-```javascript Home.js icon=logos:react
-import React, { useContext } from 'react';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import ConnectButton from '@arcblock/did-connect-react/lib/Button';
-import Button from '@arcblock/ux/lib/Button'; // A general-purpose button
-import CircularProgress from '@mui/material/CircularProgress';
-
-function Home() {
-  // Access the session context
-  const { session } = useContext(SessionContext);
-
-  // Destructure for easier access
-  const { user, loading, login, logout } = session;
-
-  // Display a loading indicator while the session is being initialized
-  if (loading) {
-    return <CircularProgress />;
-  }
-
-  return (
-    <div style={{ padding: '20px', textAlign: 'center' }}>
-      {user ? (
-        // If the user is logged in, show their DID and a logout button
-        <div>
-          <h1>Welcome!</h1>
-          <p>Your DID: {user.did}</p>
-          <Button variant="contained" color="secondary" onClick={logout}>
-            Logout
-          </Button>
-        </div>
-      ) : (
-        // If not logged in, show the login button
-        <div>
-          <h1>Please Sign In</h1>
-          <ConnectButton onClick={() => login()}>
-            Connect Wallet
-          </ConnectButton>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Home;
-```
-
-When the user clicks the `ConnectButton`, the `login()` function is called. This function handles opening the DID Connect modal, which displays a QR code for the user to scan with their DID Wallet, and manages the entire authentication process.
-
-## Step 4: Access User Data
-
-Once a user has successfully logged in, the `session.user` object will be populated. This object contains the user's profile information retrieved from their DID Wallet.
-
-The `session` object provided by the context is your main interface to the user's authentication state. Here are its key properties:
-
-<x-field-group>
-  <x-field data-name="user" data-type="object | null" data-desc="The authenticated user object. It's `null` if no user is logged in.">
-    <x-field data-name="did" data-type="string" data-desc="The user's Decentralized Identifier (DID)."></x-field>
-    <x-field data-name="fullName" data-type="string" data-desc="The user's full name from their wallet profile."></x-field>
-    <x-field data-name="email" data-type="string" data-desc="The user's email from their wallet profile."></x-field>
-  </x-field>
-  <x-field data-name="loading" data-type="boolean" data-desc="`true` while the session is being initialized or refreshed, `false` otherwise."></x-field>
-  <x-field data-name="login" data-type="function" data-desc="A function to initiate the login process, which opens the DID Connect UI."></x-field>
-  <x-field data-name="logout" data-type="function" data-desc="A function to log the user out and clear the session."></x-field>
-  <x-field data-name="initialized" data-type="boolean" data-desc="`true` once the initial session check is complete."></x-field>
-</x-field-group>
-
-## You're All Set!
-
-Congratulations! You have successfully implemented a complete DID-based authentication flow in your React application. Users can now sign in using their DID Wallet, and your application can securely access their session information.
-
-### Next Steps
-
-To dive deeper and explore more advanced features, check out the following sections:
-
-<x-cards>
-  <x-card data-title="Session Management (SessionProvider)" data-icon="lucide:key-round" data-href="/core-components/session-provider">
-    Learn about all the configuration options for `SessionProvider` to customize session behavior, timeouts, and more.
-  </x-card>
-  <x-card data-title="Connection UI (DidConnect)" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
-    Explore the `DidConnect` component for a declarative way to embed the connection UI directly into your pages.
-  </x-card>
-</x-cards>