Docs

Custom UI

For custom sign-in pages or interfaces, we recommend creating a UI using the useConnect hook.

Get started

  • Install

    Install the Connect SDK

    npm i thirdweb
  • Obtain Client Id

    On the thirdweb dashboard, navigate to settings to create an API Key to obtain a Client Id.

  • Create a simple UI

    import { createThirdwebClient } from "thirdweb";
    import { useConnect } from "thirdweb/react";
    import { createWallet, injectedProvider } from "thirdweb/wallets";
    const client = createThirdwebClient({ clientId });
    function Example() {
    return <button>Connect</button>;
    }
  • Add useConnect hook

    Create an asynchronous function which prompts users to connect with installed MetaMask. If MetaMask is not installed, prompt the user with the Wallet Connect modal to allow users to scan and connect via QR code.

    import { createThirdwebClient } from "thirdweb";
    import { useConnect } from "thirdweb/react";
    import { createWallet, injectedProvider } from "thirdweb/wallets";
    const client = createThirdwebClient({ clientId });
    function Example() {
    const { connect, isConnecting, error } = useConnect();
    return (
    <button
    onClick={() =>
    connect(async () => {
    const metamask = createWallet("io.metamask"); // pass the wallet id
    // if user has metamask installed, connect to it
    if (injectedProvider("io.metamask")) {
    await metamask.connect({ client });
    }
    // open wallet connect modal so user can scan the QR code and connect
    else {
    await metamask.connect({
    client,
    walletConnect: { showQrModal: true },
    });
    }
    // return the wallet
    return metamask;
    })
    }
    >
    Connect
    </button>
    );
    }

To fully customize and learn more about the useConnect properties, view the full reference.

custom-sign-in-example

Example of how to use the `useConnect` hook in a Next application.