Headless Connect

Create sign-in flow with your choice of wallets and sign-in options built custom to your branding. Use React hooks for full UI control and built-in wallet state management.

Documentation

Create custom UI using hooks

Full control over your UI using react hooks. Wallet state management is all handled for you.

Code

import { useConnect } from "thirdweb/react";
import { createWallet, injectedProvider } from "thirdweb/wallets";
import { shortenAddress } from "thirdweb/utils";

function App() {
  const account = useActiveAccount();
  const wallet = useActiveWallet();
  const { connect, isConnecting, error, cancelConnection } = useConnect();
  const { disconnect } = useDisconnect();

  if (account) {
    return (
      <div>
        <p>Connected: {shortenAddress(account.address)} </p>
        {wallet && (
          <button onClick={() => disconnect(wallet)}>Disconnect</button>
        )}
      </div>
    );
  }

  return (
    <button
      onClick={() =>
        connect(async () => {
          // 500+ wallets supported with id autocomplete
          const wallet = createWallet("io.metamask");
          const isInstalled = !!injectedProvider("io.metamask");
          await wallet.connect({
            client,
            ...(isInstalled
              ? {}
              : {
                  walletConnect: {
                    // if not installed, show qr modal
                    showQrModal: true,
                    onCancel: () => {
                      cancelConnection();
                    },
                  },
                }),
          });
          return wallet;
        })
      }
    >
      Connect MetaMask
    </button>
  );
}

Preview

Open prebuilt connect modal using a hook

Code

import { useConnectModal } from "thirdweb/react";

function App() {
  const { connect, isConnecting } = useConnectModal();

  return (
    <button
      onClick={async () => {
        // pass modal configuration options to the connect function
        const wallet = await connect({ client });
        console.log("connected", wallet);
      }}
    >
      Sign in
    </button>
  );
}

Preview