Coinbase Wallet Integration for Website Connection

Coinbase Wallet Integration for Website Connection

Coinbase Wallet is a non-custodial wallet from Coinbase, available as a mobile app and browser extension. Integration via Coinbase Wallet SDK allows Coinbase Wallet users to connect to your web application.

Coinbase Wallet SDK

npm install @coinbase/wallet-sdk wagmi viem @tanstack/react-query

import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
import { createPublicClient, createWalletClient, custom, http } from 'viem';
import { mainnet } from 'viem/chains';

const sdk = new CoinbaseWalletSDK({
  appName: 'My App',
  appLogoUrl: 'https://example.com/logo.png',
  appChainIds: [1, 137]  // mainnet, polygon
});

const provider = sdk.makeWeb3Provider();

// Connect wallet
async function connectCoinbaseWallet() {
  const accounts = await provider.request({ method: 'eth_requestAccounts' });
  const address = accounts[0];

  const walletClient = createWalletClient({
    account: address,
    chain: mainnet,
    transport: custom(provider)
  });

  return { address, walletClient };
}

Integration via Wagmi + Reown AppKit

A more modern approach — via unified AppKit that supports Coinbase Wallet alongside other wallets:

import { coinbaseWallet } from 'wagmi/connectors';

const wagmiConfig = createConfig({
  chains: [mainnet, polygon],
  connectors: [
    coinbaseWallet({
      appName: 'My App',
      preference: 'smartWalletOnly'  // or 'eoaOnly', 'all'
    }),
    metaMask(),
    walletConnect({ projectId })
  ],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http()
  }
});

Smart Wallet (Coinbase Wallet v4)

Coinbase Smart Wallet is a new type of wallet without seed phrase based on Passkey. Allows creating a wallet without MetaMask and seed phrase:

import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';

const sdk = new CoinbaseWalletSDK({
  appName: 'My App',
  preference: {
    options: 'smartWalletOnly',  // Smart Wallet only
    keysUrl: 'https://keys.coinbase.com/connect'
  }
});

Authorization via Signature

import { useConnect, useSignMessage, useAccount } from 'wagmi';
import { coinbaseWallet } from 'wagmi/connectors';

function CoinbaseLogin() {
  const { connect } = useConnect();
  const { address, isConnected } = useAccount();
  const { signMessageAsync } = useSignMessage();

  const handleLogin = async () => {
    if (!isConnected) {
      await connect({ connector: coinbaseWallet({ appName: 'My App' }) });
    }

    const nonce = await getNonce(address);
    const signature = await signMessageAsync({
      message: `Login to example.com\nNonce: ${nonce}`
    });

    const token = await verifySignature(address, signature);
    setToken(token);
  };

  return <button onClick={handleLogin}>Sign in with Coinbase Wallet</button>;
}

Mobile Deep Link

On mobile devices, WalletConnect SDK automatically opens Coinbase Wallet app via deep link: cbwallet://wsegue?uri=...

Timeline

Coinbase Wallet integration via Wagmi + authorization — 2–3 days.