DOCS

Build your own UI

Low level control to authenticate and connect wallets

You have full control with the connection hooks and functions to build your own UI. To use embedded wallets, you first choose a authentication strategy and then connect.

Starting from a template

View a fully functioning example of an embedded wallet with a custom UI:


Setup the ThirdwebProvider

Only needed for React and React native platforms

This will ensure that the wallet is available to all components in your app, handle connection states and auto-connection on page load.

import { ThirdwebProvider, embeddedWallet() } from "@thirdweb-dev/react"; // or /react-native

 <ThirdwebProvider
  clientId="YOUR_CLIENT_ID"
  supportedWallets={[embeddedWallet()]}
 >
  <YourApp />
</ThirdwebProvider>;

Authenticate via Google

Note that for Apple and Facebook you just need to update the strategey to "facebook" or "apple".

In React and React Native, the useEmbeddedWallet() hook handles authentication and connection states.

import { useEmbeddedWallet } from "@thirdweb-dev/react"; // or /react-native

const { connect } = useEmbeddedWallet();

const handleLogin = async () => {
  await connect({
    strategy: "google",
  });
};

Authenticate via Email verification

import {
  useEmbeddedWallet,
  sendVerificationEmail,
} from "@thirdweb-dev/react"; // or /react-native

const { connect, sendVerificationEmail } = useEmbeddedWallet();

const preLogin = async (email: string) => {
  // send email verification code
  await sendVerificationEmail({ email });
};

const handleLogin = async (
  email: string,
  verificationCode: string,
) => {
  // verify email and connect
  await connect({
    strategy: "email_verification",
    email,
    verificationCode,
  });
};