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

Open the connect modal from anywhere

You can open the connect modal from anywhere in your app.

// Using your own UI
import { useConnectModal } from "thirdweb/react";

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

  return (
    // pass modal configuration options here
    <button onClick={() => connect({ client })}>
      Sign in
    </button>
  );
}

Create custom UI using hooks

Full control over your 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 () => {
          // 500+ wallets supported with id autocomplete
          const wallet = createWallet("io.metamask");
          await wallet.connect({ client });
          return wallet;
        })
      }
    >
      Connect with Metamask
    </button>
  );
}