# Usage

URL: https://docs.blux.cc/react/usage

Learn how to authenticate users, manage profiles, and submit transactions with Blux.

Blux provides ready-made UI flows through `useBlux` and dedicated [white-label login hooks](/react/usage/white-label-login) for custom authentication screens. Both require the `BluxProvider`.

## Quick Example
```tsx

function App() {
  const { login, logout, sendTransaction, isAuthenticated, user } = useBlux();
}
```

Use `useBlux` for the hosted login modal and authenticated session state. For custom login controls, import `useLoginEmail`, `useLoginSms`, `useLoginOAuth`, `useLoginPasskey`, or `useLoginWallet`.

---

<Cards>
  {getPageTreePeers(source.getPageTree(), '/react/usage').map((peer) => (
    <Card key={peer.url} title={peer.name} href={peer.url}>
      {peer.description}
    </Card>
  ))}
</Cards>