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