Connect Users

Using the Connect UI components

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

Choose authentication methods

By default, the connect UI supports Google, Apple, Facebook and email/password 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",
      "facebook",
      "apple",
      "google",
      "phone",
      "passkey",
    ],
  }),
];
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton client={client} wallets={wallets} />
    </ThirdwebProvider>
  );
}