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.

View docs Book a Demo

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} />
  );
}

Customized Component

Change the look and feel of the connect button without rewriting your own.

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

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

function App() {
  return (
    <ConnectButton
      client={THIRDWEB_CLIENT}
      connectButton={{
        label: "Custom Connect Button",
      }}
      showAllWallets={false}
      connectModal={{
        title: "Custom Connect Modal",
        size: "compact",
      }}
      theme={darkTheme({
        colors: {
          modalBg: "#281866",
          accentButtonBg: "#281866",
          connectedButtonBgHover: "#281866",
          borderColor: "rgba(256, 256,256, 0.1)",
          accentText: "rgba(256, 256,256, 0.1)",
          connectedButtonBg: "#281866",
          tertiaryBg: "rgba(256, 256,256, 0.1)",
          primaryButtonBg: "#281866",
          secondaryButtonBg:
            "rgba(256, 256,256, 0.1)",
          primaryButtonText: "#E7E8E9",
          primaryText: "#E7E8E9",
          separatorLine:
            "rgba(256, 256,256, 0.1)",
        },
      })}
    />
  );
}

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>
    </>
  );
}