Onboard users to web3 with any auth method

Use any of the built-in auth methods or bring your own.
Supports custom auth endpoints to integrate with your existing user base.

Add instantly Documentation

Prebuilt UI

Instant out of the box authentication with a prebuilt UI.

Code

import { inAppWallet } from "thirdweb/wallets";
        import { ConnectEmbed } from "thirdweb/react";

        const wallets = [
          inAppWallet(
            // built-in auth methods
            // or bring your own auth endpoint
            { auth: {
              options: [
              "google",
              "x",
              "apple",
              "discord",
              "facebook",
              "farcaster",
              "telegram",
              "coinbase",
              "line",
              "email",
              "phone",
              "passkey",
              "guest",
              ]
              }
            },
            // optional execution mode, defaults to "EOA"
            executionMode: {
              mode: "EIP7702", // or "EIP4337" or "EOA"
              sponsorGas: true, // sponsor gas for all transactions
            }
          )
        ];

        function App(){
          return (
<ConnectEmbed client={client} wallets={wallets} />);
};

Preview

Custom UI

Customize the login UI and integrate with your existing user base. No limits on customizations and auth methods.

Code

import { useState } from "react";
import { useConnect } from "thirdweb/react";
import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";

const wallet = inAppWallet();

export function CustomLoginUi() {
  const { connect, isConnecting, error } = useConnect();

  const preLogin = async (email: string) => {
    // send email verification code
    await preAuthenticate({
      client,
      strategy: "email",
      email,
    });
  };

  const loginWithEmail = async (email: string, verificationCode: string) => {
    // verify email with verificationCode and connect
    connect(async () => {
      await wallet.connect({
        client,
        strategy: "email",
        email,
        verificationCode,
      });
      return wallet;
    });
  };

  const loginWithGoogle = async () => {
    // connect with google
    connect(async () => {
      await wallet.connect({
        client,
        strategy: "google",
      });
      return wallet;
    });
  };

  return <div> .... </div>;
}

Preview

View Linked Profiles

View all web2 and web3 linked profiles for a user along with specific details for each profile type, including name, email, profile picture and more.

Code

import { useProfiles, useActiveAccount, ConnectButton } from "thirdweb/react";

function App() {
  const account = useActiveAccount();
  const { data: profiles } = useProfiles({
    client,
  });

  if (!account) {
    return <ConnectButton client={client} />;
  }

  return <code> {JSON.stringify(profiles || [], null, 2)}</code>;
}

Preview

Link a Profile

Link a web2 or web3 profile to the connected account.
You can do this with hooks like shown here or from the prebuilt connect UI.

Code

import {
  useLinkProfile,
  useActiveAccount,
  ConnectButton,
} from "thirdweb/react";

function App() {
  const { mutate: linkProfile, isPending, error } = useLinkProfile();

  const linkMetamask = () => {
    // link any external wallet
    linkProfile({
      client: THIRDWEB_CLIENT,
      strategy: "wallet",
      wallet: createWallet("io.metamask"), // or any other wallet
      chain: baseSepolia,
    });
  };

  const linkPasskey = () => {
    // link any web2 identity provider
    linkProfile({
      client: THIRDWEB_CLIENT,
      strategy: "passkey", // or "email", "phone", etc.
      type: "sign-up",
    });
  };

  if (!account) {
    return <ConnectButton client={client} />;
  }

  return (
    <div>
      <button onClick={linkMetamask}>Link Metamask</button>
      <button onClick={linkPasskey}>Link Passkey</button>
    </div>
  );
}

Preview