# 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.
} className="flex justify-start">
## 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 (
)
}
```
:::
### 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 ++]
)
}
```
### 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 (
)
}
```
:::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 (
)
}
```
:::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
Check prompt...
{/* [!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