Onboard users to web3

Onboard anyone with flexible auth options, secure account recovery, and smart account integration.

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.

Prebuilt UI

Instant out of the box authentication with a prebuilt UI.

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

const wallets = [
  inAppWallet(
    // built-in auth methods
    {
      auth: {
        options: [
          "google",
          "x",
          "apple",
          "discord",
          "facebook",
          "farcaster",
          "telegram",
          "coinbase",
          "line",
          "email",
          "phone",
          "passkey",
          "guest",
        ],
      },
    },
    // or bring your own auth endpoint
  ),
];

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

Custom Auth and UI

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

import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
import { useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";

export function CustomLoginForm() {
  const [email, setEmail] = useState("");
  const { connect, isConnecting, error } = useConnect();

  const { mutate: loginWithCustomAuth } = useMutation({
    mutationFn: async (email: string) => {
      const wallet = await connect(async () => {
        const wallet = inAppWallet();
        await wallet.connect({
          strategy: "auth_endpoint",
          client,
          // your own custom auth payload here
          payload: JSON.stringify({
            userId: email,
            email,
          }),
        });
        return wallet;
      });
      return wallet;
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    loginWithCustomAuth(email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email Address</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Enter your email"
          required
        />
        <button
          type="submit"
          disabled={isConnecting || !email}
        >
          {isConnecting ? "Submitting..." : "Submit"}
        </button>
        {error && <p>{error.message}</p>}
      </div>
    </form>
  );
}

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.

import { useProfiles } from "thirdweb/react";

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

  return (
    <div>
      {profiles?.map((profile) => (
        <div key={profile.type}>
          <ProfileCard profile={profile} />
        </div>
      ))}
    </div>
  );
}

Link another 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.

import { useLinkProfile } 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",
    });
  };

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