# 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.