Connect Users

If you're building a React website, React Native app, or Unity game you can use the prebuilt connect UI components to authenticate users and connect their wallets.

import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
 
const client = createThirdwebClient({ clientId });
const wallets = [inAppWallet()];
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton client={client} wallets={wallets} />
    </ThirdwebProvider>
  );
}

By default, the connect UI supports multiple social logins as well as email, phone and passkey authentication. You can customize which authentication methods to support which will be reflected in the UI.

import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
 
const client = createThirdwebClient({ clientId });
const wallets = [
  inAppWallet({
    providers: [
      "email",
      "phone",
      "passkey",
      "google",
      "facebook",
      "apple",
      "discord",
      "farcaster",
    ],
  }),
];
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton client={client} wallets={wallets} />
    </ThirdwebProvider>
  );
}