# 核心元件

`@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` 元件如何促進使用者身份驗證的旅程。