# Hooks

The `@arcblock/did-connect-react` library offers a powerful set of React hooks that provide programmatic control and flexible data access. While the [SessionProvider](./core-components-session-provider.md) offers a convenient context-based approach, hooks give you the fine-grained control needed for complex UIs and advanced use cases.

These hooks allow you to manage the connection flow, access user data, and integrate various authentication methods from any component within the `SessionProvider`'s scope.

<x-cards data-columns="3">
  <x-card data-title="useConnect" data-icon="lucide:plug-zap" data-href="/hooks/use-connect">
    Programmatically open, close, and manage the DID Connect UI modal. This is the core hook for controlling the connection flow.
  </x-card>
  <x-card data-title="useDid" data-icon="lucide:user-check" data-href="/hooks/use-did">
    A convenient utility hook to easily access and work with the authenticated user's DID, profile, and wallet information from the session.
  </x-card>
  <x-card data-title="useOAuth & usePasskey" data-icon="lucide:key-round" data-href="/hooks/use-oauth-passkey">
    Integrate modern, alternative authentication methods. `useOAuth` handles social logins, while `usePasskey` enables secure, passwordless authentication.
  </x-card>
</x-cards>

## Summary

By leveraging these hooks, you can build highly customized and seamless user experiences. Start by exploring `useConnect` to understand how to trigger the login flow, then see how `useDid` can help you display user information.

Ready to dive deeper? Choose a hook from above to learn more, or proceed to the [UI Components](./ui-components.md) section to see how you can display user data.