<!-- tempo-docs-context -->
> Source: [/docs/zones/examples](https://tempo.xyz/developers/docs/zones/examples.md)
> Section: [Zones](https://tempo.xyz/developers/docs/zones.md). Connect to a Zone and work with private balances, deposits, and withdrawals. Zones is in limited preview; see the introduction for access. Earlier testnet sandbox guides describe a separate integration.
> [Documentation index](https://tempo.xyz/developers/llms.txt) · [Docs skill](https://tempo.xyz/developers/SKILL.md)

> Tempo MCP: Use `search`, `find_pages`, `read_page`, and `code` at `https://mcp.tempo.xyz` for Tempo and related documentation.
> If an indexed page is missing or reflects an older site, read this site’s [documentation index](https://tempo.xyz/developers/llms.txt) and Markdown pages directly.

# Zone example setup

Configure the authenticated client used in the Zone guides. These examples run on your backend; browser applications should call your account-scoped backend instead of receiving shared operator credentials.

## Configure Wagmi for a Zone

Install `@wagmi/core` and `viem` with `pnpm add @wagmi/core viem`. Get the Zone's chain ID, RPC URL, and signed authorization token from [Connect](https://tempo.xyz/developers/docs/zones/connect). Set `ZONE_CHAIN_ID`, `ZONE_PARENT_CHAIN_ID`, `ZONE_RPC_URL`, and `ZONE_AUTH_TOKEN` in your environment. The parent chain ID is the public Tempo network that hosts the portal (`4217` for mainnet or `42431` for Moderato).

Save this as `zone.config.ts` in an ESM project. It configures reads against the operator-provided Zone, without adding a wallet connector or signing account.

```ts [zone.config.ts]
import { createConfig, http } from '@wagmi/core'
import { Zone } from 'viem/tempo'

const rpcUrl = process.env.ZONE_RPC_URL!
export const zoneChain = Zone.from({
  sourceId: Number(process.env.ZONE_PARENT_CHAIN_ID),
  id: Number(process.env.ZONE_CHAIN_ID),
  name: 'Tempo Zone',
  rpcUrls: { default: { http: [rpcUrl] } },
})

export const zoneConfig = createConfig({
  chains: [zoneChain],
  transports: {
    [zoneChain.id]: http(rpcUrl, {
      fetchOptions: {
        headers: { 'X-Authorization-Token': process.env.ZONE_AUTH_TOKEN! },
      },
    }),
  },
})
```

Import `zoneConfig` into each example. Set `account` to the authenticated address, `token` to the enabled token address, and `decimals` to the token's configured precision. The RPC scopes every read to the account represented by the authorization token.

For React applications, use your backend's authenticated, account-scoped RPC proxy as the browser transport and configure its chain in your [Wagmi provider](https://tempo.xyz/developers/docs/accounts/examples#wagmi-client). The server must authenticate the current user and select that user's Zone token on every request. Do not use one shared account token for all customers.

Continue with [Balances and activity](https://tempo.xyz/developers/docs/zones/balances).