Connect Reference

These interfaces are exported by @dexterai/connect@0.29.1. Start with Add Dexter Sign-In for the React example.

Connection Hook

Import useDexterConnection from @dexterai/connect/react.

Input	Purpose
`intent`	`identity` for account sign-in, `wallet` for owner wallet use, or `agent` for agent authority UI.
`accountSession`	`{ status: 'loading' }`, `{ status: 'signed_out' }`, or `{ status: 'authenticated', accessToken }`.
`installAccountSession`	Install the `PasskeyLoginTokens` from the completed ceremony. May return a promise.
`clearAccountSession`	Clear your app's Dexter session. May return a promise.
`passkey`	Ceremony options such as `transport`.

An intent selects the control's permission model. Agent spending still requires an authorized grant.

Result	Purpose
`model.stage`	`connect`, `checking`, `ready`, `repair`, `offline`, or `error`.
`model.permissions`	Gate account content, wallet data, owner actions, and agent authority displays.
`identity`	The visible identity, wallet label, access flags, and conflict state.
`activeWallet`	Visible wallet metadata, or `null`. Address fields can also be `null`.
`operation`	`idle`, `connecting`, `disconnecting`, or `removing`.
`error`	A `ConnectError` with `code` and `message`, or `null`.

connect() and useAnotherDexterWallet() run a new passkey connection. retry() repeats relationship verification. disconnectDexter() clears the browser connection and invokes your session clearer while retaining the device passkey.

removeFromThisDevice() changes the device's wallet roster and may prune its passkey. It requires the exported REMOVE_DEXTER_FROM_DEVICE_CONFIRMATION value; put it behind a separate user confirmation.

Returned Identity

A successful connection returns a SignInResult containing all three fields:

Field	Contents
`session`	`accessToken`, `refreshToken`, `expiresAt`, `expiresIn`, and `tokenType`. Times use seconds.
`vault`	Wallet identity and addresses described below.
`walletIdentityProof`	A Dexter-signed bearer proof: `token`, `tokenType`, `expiresAt`, and `expiresIn`.

The account session and wallet proof are credentials. Store them through the appropriate session adapter and SDK store, and exclude them from analytics.

`vault` field	Meaning
`vaultPda`	Dexter Vault account address.
`swigAddress`	Swig state account address.
`receiveAddress`	Deposit address; can be `null` before deployment.
`usdcAta`	USDC token account; can be `null` before deployment.
`publicKey`	Base64-encoded 33-byte compressed P-256 authority key.
`userHandle`, `credentialId`	Wallet identity and passkey identifiers.
`walletLabel`	Optional user-authored wallet name.

Use receiveAddress for deposits once available. The Vault PDA and Swig state address have different roles.

Hosted Authorization

The default transport: 'auto' runs inline on dexter.cash and opens a hosted popup on other origins. popup always requests the hosted flow. inline is for Dexter's own origin.

Leave apiBase unset. The package accepts only its canonical https://api.dexter.cash value. The hosted flow checks its origin and request binding.

Create a Wallet

CreateWalletPanel renders the SDK's creation flow. Wallet creation is a separate action from connecting an existing account.

CreateDexterWallet.tsx

'use client';

import { useState } from 'react';
import { CreateWalletPanel } from '@dexterai/connect/react';

export function CreateDexterWallet() {
  const [message, setMessage] = useState('');
  return (
    <section aria-label="Create a Dexter Wallet">
      <CreateWalletPanel
        onCreated={() => setMessage('Wallet created. You can now sign in.')}
        onError={() => setMessage('Wallet creation did not complete. Try again.')}
      />
      <p role="status">{message}</p>
    </section>
  );
}

agentDelegation defaults to deferred. Creation alone does not grant an agent spending authority. Other props include transport, showName, and className.

Button and Theme

DexterButton supports variant (primary, secondary, danger), size (md, sm), block, loading, loadingLabel, disabled, withMark, and standard button attributes. Use size="sm" for compact controls.

CSS variable	Default	Use
`--dx-ember`	`#f26c18`	Primary fill and derived borders/focus styles.
`--dx-ember-2`	`#ba3a00`	Second color of the primary fill.
`--dx-fg`	`#fff4ea`	Primary button text and mark.
`--dx-danger`	`#e5552e`	Error and destructive-action color.
`--dx-radius`	`0px`	Control corner radius.

Set variables on a containing element to scope your theme. Set both fill colors to the same value for a solid button. Preserve visible keyboard focus and readable contrast.