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

# Connect and sign

> From an empty Vite project to a working connect button and signed message in 10 minutes.

A full walk-through of the [Quickstart](/quickstart) at a deliberate pace. By the end, you will have a working app that connects to Startale and produces a signed message you can verify off-chain.

## What you'll build

A single-page app with two buttons:

1. **Connect**, opens the Startale popup, signs the user in, returns their smart-account address.
2. **Sign**, produces an ERC-1271-compatible signature for a fixed message.

Plus a verification step using viem.

## Steps

The full code is identical to the [Quickstart](/quickstart). The walkthrough below adds the why behind each step, common mistakes, and what to check at each milestone.

### 1. Project scaffold

```bash theme={null}
pnpm create vite@latest connect-and-sign -- --template react-ts
cd connect-and-sign
pnpm install
```

### 2. Install the SDK and friends

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm add @startale/app-sdk wagmi viem @tanstack/react-query
  ```

  ```bash npm theme={null}
  npm install @startale/app-sdk wagmi viem @tanstack/react-query
  ```

  ```bash yarn theme={null}
  yarn add @startale/app-sdk wagmi viem @tanstack/react-query
  ```

  ```bash bun theme={null}
  bun add @startale/app-sdk wagmi viem @tanstack/react-query
  ```
</CodeGroup>

### 3. Configure wagmi

[Same as the Quickstart →](/quickstart#2-configure-wagmi)

### 4. Connect button

[Same as the Quickstart →](/quickstart#3-connect-a-wallet)

**Common mistake:** triggering the connect from outside a click handler. The popup needs a user gesture or browsers block it.

### 5. Sign and verify

After connecting, ask the user to sign a message and verify it off-chain:

```tsx theme={null}
import { useAccount, useSignMessage } from 'wagmi'
import { verifyMessage } from 'viem'
import { publicClient } from './viem'

const message = 'I am verifying ownership of my Startale wallet.'

export function SignAndVerify() {
  const { address } = useAccount()
  const { signMessageAsync } = useSignMessage()

  if (!address) return null

  const onClick = async () => {
    const signature = await signMessageAsync({ message })
    const isValid = await publicClient.verifyMessage({
      address,
      message,
      signature,
    })
    console.log({ address, signature, isValid })
  }

  return <button onClick={onClick}>Sign and verify</button>
}
```

`isValid` should be `true`. If it isn't, the address you passed doesn't match the signer of the signature; that is usually a sign of using the EOA address instead of the smart-account address.

## What you've learned

* How wagmi and the Startale connector compose.
* That signatures from Startale come from a smart account and need ERC-1271 verification.
* That viem handles the ERC-1271 (and ERC-6492) details automatically.

## Next

[Send a USDSC payment →](/tutorials/code-walkthroughs/send-usdsc-payment)