Connect Users to your Ecosystem

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 accross your ecosystem.

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

You can also build your own UI using the low-level hooks and functions. Remember to wrap your app in a ThirdwebProvider to ensure that the wallet is available to all components in your app.

import { ecosystemWallet } from "thirdweb/wallets";
 
const wallet = ecosystemWallet("ecosystem.your-ecosystem-id");
 
const LoginComponent = () => {
  const { connect, isLoading } = useConnect();
 
  return (
    <button
      onClick={() =>
        connect(async () => {
          await wallet.connect({
            client,
            strategy: "discord", // or any supported auth strategy
          });
          return wallet;
        })
      }
    >
      Connect
    </button>
  );
};

You can configure the allowed auth strategies on your dashboard.

For prebuilt UIs, the enabled auth strategies are automatically read from your dashbaord configurations.

For custom UIs, you can configure the auth options when connecting the wallet. See using your own UI for an example.

For closed ecosystems, you can pass a valid partnerId to the ecosystemWallet provided by the ecosystem owner.

const wallet = ecosystemWallet("ecosystem.your-ecosystem-id", {
  partnerId: "your-partner-id",
});