> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript SDK Overview

> A headless, framework-agnostic SDK for authentication, wallets, and signing. You build the UI — Dynamic handles everything else.

The JavaScript SDK (`@dynamic-labs-sdk/client`) gives you full control over authentication, wallet connections, and transaction signing without any built-in UI. You create a Dynamic client, add extensions for the chains you support, and call functions directly — rendering every screen, button, and input yourself.

<Warning>
  This SDK is headless. There is no built-in modal, wallet picker, or login
  form. You are responsible for building all user-facing UI.
</Warning>

## How it works

<Steps>
  <Step title="Create a client">
    Call `createDynamicClient()` with your environment ID from the
    [Dynamic dashboard](https://app.dynamic.xyz). This is the single entry point
    for the SDK.
  </Step>

  <Step title="Add extensions">
    Register chain extensions (e.g. `addEvmExtension()`, `addSolanaExtension()`)
    to enable wallet discovery and signing for each chain you support.
  </Step>

  <Step title="Initialize">
    The client initializes automatically by default. Wait for initialization to
    complete before calling other SDK functions.
  </Step>

  <Step title="Build your UI">
    Use SDK functions to authenticate users, connect wallets, and sign
    transactions. You decide what the UI looks like — the SDK provides the
    logic.
  </Step>
</Steps>

## What you need to build

Because the SDK is headless, your app handles these screens:

* **Login** — collect an email/phone, trigger OTP or social auth, and verify the response
* **Wallet picker** — list available wallet providers and let the user choose one
* **MFA prompts** — prompt for TOTP codes or passkey verification when MFA is enabled
* **Step-up authentication** — re-verify identity before sensitive actions
* **Device registration** — verify the user's email when they sign in from an unrecognized device

<Tip>
  See [Authentication screens](/javascript/authentication-methods/headless-authentication) for the full list with implementation guides.
</Tip>

## What the SDK handles

You call functions; the SDK manages the rest:

* **Authentication** — email OTP, SMS, social login, passkeys, external JWTs, and MFA
* **Wallet management** — embedded wallets (MPC-backed, user-owned) and external wallets (MetaMask, Phantom, etc.)
* **Transaction signing** — chain-specific signing, typed data, and message signing
* **Session management** — JWTs, token refresh, and logout
* **Events** — subscribe to auth, wallet, and session state changes with `onEvent()`
* **Multi-chain** — EVM, Solana, Bitcoin, Aptos, Sui, TON, Tron, and Starknet via extensions
* **Gasless transactions** — sponsor gas so users don't pay, on both EVM (via ZeroDev) and Solana
* **Fireblocks Flow** — accept crypto from any wallet or exchange and settle in a token and chain you choose

## Architecture

The SDK creates and manages a hidden iframe internally for WaaS/MPC key operations. You do **not** need to configure or install a separate iframe host package.

```
┌─────────────────────────────────────────────┐
│  Your web app (any framework or none)       │
│                                             │
│  @dynamic-labs-sdk/client                   │
│  @dynamic-labs-sdk/evm (or /solana, etc.)   │
│                                             │
│  ┌─────────────────────────────────────┐    │
│  │  Hidden iframe (MPC key operations) │    │
│  │  Managed internally by the SDK      │    │
│  └─────────────────────────────────────┘    │
└─────────────────────────────────────────────┘
```

## Use with React

The JavaScript SDK works in any JavaScript environment, including React. The `@dynamic-labs-sdk/react-hooks` package wraps client functions as React hooks so your components re-render automatically when state changes.

See the [React Quickstart (JS SDK)](/javascript/reference/react-quickstart) to get started, or the [React Hooks guide](/javascript/reference/react-hooks-guide) for details on how hooks map to client functions.

## Common mistakes

| Mistake                                            | Fix                                                  |
| :------------------------------------------------- | :--------------------------------------------------- |
| Using `@dynamic-labs/sdk-react-core` without React | Use `@dynamic-labs-sdk/client` instead               |
| Adding `@dynamic-labs/web-extension`               | Not needed — that package is for React Native on web |
| Loading SDK via `<script>` tag without a bundler   | Use Vite, webpack, or another bundler                |
| Expecting a built-in modal or wallet picker        | The JS SDK is headless — build your own UI           |
| Calling `createDynamicClient` inside a render loop | Create the client once at app startup                |

## What's next

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/javascript/reference/quickstart">
    Install the SDK, create a client, and authenticate a user.
  </Card>

  <Card title="Wallets" icon="wallet" href="/javascript/reference/wallets/build-wallet-picker">
    Build a wallet picker, connect wallets, and manage accounts.
  </Card>

  <Card title="Fireblocks Flow" icon="money-bill-transfer" href="/javascript/reference/flow-getting-started">
    Accept crypto payments and settle in any token or chain.
  </Card>

  <Card title="User & Session Management" icon="user" href="/javascript/user-session-management">
    Check sign-in state, read user data, and manage sessions.
  </Card>
</CardGroup>