> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://accounts.tempo.xyz/api/mcp` to find what you need.

# Connect Accounts

Connect a Tempo account in your application using the [Tempo Accounts SDK](/docs) and [Wagmi](https://wagmi.sh).

The Tempo Accounts SDK ships several signing adapters — [Tempo Wallet](/docs/adapters/tempo-wallet), [domain-bound Passkeys](/docs/adapters/webauthn), [Turnkey](/docs/adapters/turnkey), [Privy](/docs/adapters/privy), and more. Each adapter exposes the same Wagmi connector surface, so the integration code in this guide is the same regardless of which adapter you pick. Choose an adapter once in your Wagmi config; the rest of your app stays adapter-agnostic.

:::info[Which adapter should I use?]
Most apps should start with **Tempo Wallet** for a universal, hosted account experience. Pick **domain-bound Passkeys** if you want full control over the auth ceremony on your own origin, or another adapter if you have an existing custody stack. See the [Adapters overview](/docs/adapters) for a side-by-side comparison.
:::

## Demo

By the end of this guide, you will be able to let users connect a Tempo account from your application using your adapter of choice.

#### Connect an Account

[Runnable example source](https://github.com/tempoxyz/accounts/tree/main/examples/basic)

Interactive demo: Connect an account. Run it in the browser or use the linked example source.

## Walkthrough

::::steps
### Install the SDK

Install `accounts` together with Wagmi and Viem.

:::code-group
```bash [npm]
npm i accounts wagmi viem
```

```bash [pnpm]
pnpm i accounts wagmi viem
```

```bash [bun]
bun i accounts wagmi viem
```
:::

### Set up Wagmi

Ensure that you have set up your project with Wagmi by following the [official guide](https://wagmi.sh/react/getting-started).

### Configure an Adapter

Next, register a Tempo signing adapter as a Wagmi connector. Pick the adapter that fits how you want to custody accounts — the rest of the app code stays the same.

:::code-group
```tsx twoslash [Tempo Wallet]
// @noErrors
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { tempoWallet } from 'wagmi/connectors' // [!code ++]

export const config = createConfig({
  chains: [tempo],
  connectors: [tempoWallet()], // [!code ++]
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})
```

```tsx twoslash [Domain-bound Passkeys]
// @noErrors
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { webAuthn } from 'wagmi/tempo' // [!code ++]

export const config = createConfig({
  chains: [tempo],
  connectors: [webAuthn({ authUrl: '/auth' })], // [!code ++]
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})
```
:::

:::tip
This Wagmi configuration sets `multiInjectedProviderDiscovery` to `false` to
prevent injected browser wallets from being detected, and to prefer the Tempo connector.
If you would like to allow connection to other wallets, set this property to `true`.
:::

### Display Sign In Button

After that, set up a "Sign in" button that triggers the connector for the user.

We will create a new `Example.tsx` component to work in.

:::code-group
```tsx twoslash [Example.tsx]
// @noErrors
import { useConnect, useConnectors } from 'wagmi'

export function Example() {
  const connect = useConnect()
  const [connector] = useConnectors()

  return (
    <div>
      <button onClick={() => connect.connect({ connector })}>
        Sign in
      </button>
    </div>
  )
}
```
:::

### Display Account & Sign Out

After the user has signed in, display the account information and a sign out button.

```tsx twoslash [Example.tsx]
// @noErrors
import { useConnection, useConnect, useConnectors, useDisconnect } from 'wagmi'

export function Example() {
  const account = useConnection() // [!code ++]
  const connect = useConnect()
  const [connector] = useConnectors()
  const disconnect = useDisconnect() // [!code ++]

  if (account.address) // [!code ++]
    return ( // [!code ++]
      <div> {/* [!code ++] */}
        <div>{account.address.slice(0, 6)}...{account.address.slice(-4)}</div> {/* [!code ++] */}
        <button onClick={() => disconnect.disconnect()}>Sign out</button> {/* [!code ++] */}
      </div> {/* [!code ++] */}
    ) // [!code ++]

  return (
    <div>
      <button onClick={() => connect.connect({ connector })}>
        Sign in
      </button>
    </div>
  )
}
```

### Deploy to Production

When you're ready to go live, follow the [Deploying to Production](/docs/production) guide to configure your application for production use.
::::

## Recipes

### Request a Verified Email

Pass the `identity` capability to request the account's verified email during connect.

Set `withCapabilities: true` so the connect result includes per-account `capabilities`, then read the email from the authenticated account.

```tsx twoslash [Example.tsx]
// @noErrors
import { useConnect, useConnectors } from 'wagmi'

export function Example() {
  const connect = useConnect()
  const [connector] = useConnectors()

  return (
    <button
      onClick={async () => {
        const result = await connect.connectAsync({
          connector,
          withCapabilities: true, // [!code focus]
          capabilities: { // [!code focus]
            identity: { email: true }, // [!code focus]
          }, // [!code focus]
        })

        // Present only if the user approved sharing. // [!code focus]
        const email = result.accounts[0]?.capabilities?.identity?.email // [!code focus]
      }}
    >
      Sign in
    </button>
  )
}
```

:::warn
The plain `email` string is fine for client-side display, but anyone can set it. The result also carries a signed `idToken` that your server can verify to trust the email. See [Verify the Email Server-Side](/docs/guides/authentication#verify-the-email-server-side).
:::

## Best Practices

### Deposit Funds

If users should have a chance to fund their account immediately after connecting,
pass the `showDeposit` capability. The wallet shows the standard deposit picker
after connect succeeds. The prompt is optional, so the user can continue without
depositing.

```tsx twoslash [Example.tsx]
// @noErrors
import { useConnect, useConnectors } from 'wagmi'

export function Example() {
  const connect = useConnect()
  const [connector] = useConnectors()

  return (
    <button
      onClick={() =>
        connect.connect({
          connector,
          capabilities: { // [!code focus]
            showDeposit: true, // [!code focus]
          }, // [!code focus]
        })
      }
    >
      Sign up
    </button>
  )
}
```

:::tip
Use the object form when you want to pre-fill deposit details.

```tsx twoslash [Example.tsx]
// @noErrors
connect.connect({
  connector,
  capabilities: { // [!code focus]
    showDeposit: { // [!code focus]
      amount: '10', // [!code focus]
      token: 'USDC.e', // [!code focus]
    }, // [!code focus]
  }, // [!code focus]
})
```
:::

### Loading State

When the user is signing in or signing out, show loading state to indicate that the process is happening.

Use the `isPending` property from the `useConnect` hook to show pending state to the user.

```tsx twoslash [Example.tsx]
// @noErrors
import { useConnection, useConnect, useConnectors, useDisconnect } from 'wagmi'

export function Example() {
  const account = useConnection()
  const connect = useConnect()
  const [connector] = useConnectors()
  const disconnect = useDisconnect()

  if (connect.isPending) // [!code ++]
    return <div>Check prompt...</div> {/* [!code ++] */}
  return (/* ... */)
}
```

### Error Handling

If an error unexpectedly occurs, display an error message to the user.

Use the `error` property from the `useConnect` hook to show error state to the user.

```tsx twoslash [Example.tsx]
// @noErrors
import { useConnection, useConnect, useConnectors, useDisconnect } from 'wagmi'

export function Example() {
  const account = useConnection()
  const connect = useConnect()
  const [connector] = useConnectors()
  const disconnect = useDisconnect()

  if (connect.error) // [!code ++]
    return <div>Error: {connect.error.message}</div> {/* [!code ++] */}
  return (/* ... */)
}
```

## Learning Resources

[Choose an Adapter](/docs/adapters): Choose between Tempo Wallet, WebAuthn, Turnkey, Privy, and custom signing infrastructure

[Send Transfers](/docs/guides/transfers): Send stablecoin transfers from a connected account, initiated by the user or by your server

[Sponsor Fees](/docs/guides/fee-sponsorship): Sponsor transaction fees for your users to enable feeless transactions

[Authentication](/docs/guides/authentication): Authenticate connected accounts against your own server with signed messages