Sign in

Create a login experience tailor-made for your app. Add your wallets of choice, enable web2 sign-in options and create a modal that fits your brand.

Button Component

When clicked opens a modal and allows users to connect to various wallets.
Extremely customizable and easy to use.

import { createThirdwebClient } from "thirdweb";
import { ConnectButton } from "thirdweb/react";

const THIRDWEB_CLIENT = createThirdwebClient({
  clientId: "<YOUR_CLIENT_ID>",
});

function App() {
  return (
    <ConnectButton client={THIRDWEB_CLIENT} />
  );
}

Embed Component

Inline component to connect to various wallets.
Use this to create your own full screen login page.

import { createThirdwebClient } from "thirdweb";
import { ConnectEmbed } from "thirdweb/react";

const THIRDWEB_CLIENT = createThirdwebClient({
  clientId: "<YOUR_CLIENT_ID>",
});

function App() {
  return (
    <ConnectEmbed client={THIRDWEB_CLIENT} />
  );
}

Custom UI

Build your own connect UI using react hooks.
Wallet state management is all handled for you.

// Using your own UI
import { useConnect } from "thirdweb/react";
import { createWallet } from "thirdweb/wallets";

function App() {
  const { connect } = useConnect();

  return (
    <>
      <button
        onClick={() =>
          connect(async () => {
            // 350+ wallets supported with id autocomplete
            const wallet = createWallet(
              "io.metamask",
            );
            await wallet.connect({ client });
            return wallet;
          })
        }
      >
        Connect with Metamask
      </button>
    </>
  );
}