Docs

useEmbeddedWallet

Defined in react/src/evm/hooks/wallets/useEmbeddedWallet.ts#L115

Hook to connect EmbeddedWallet which allows users to login via Email or social logins

The embeddedWallet() should be added to ThirdwebProvider 's supportedWallets prop to enable auto-connection on page load

Example

Social Login

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

function App() {
  const { connect } = useEmbeddedWallet();

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

  return <button onClick={handleLogin}> Sign in with Google </button>;
}

Login with Email verification

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

function App() {
  const { connect, sendVerificationEmail } = useEmbeddedWallet();

  const sendVerificationCode = 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,
    });
  };

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

Available connection strategies

// email verification
type EmailVerificationAuthParams = {
  strategy: "email_verification";
  email: string;
  verificationCode: string;
  recoveryCode?: string;
};

export type EmbeddedWalletOauthStrategy = "google" | "apple" | "facebook";

type OauthAuthParams = {
  strategy: EmbeddedWalletOauthStrategy;
  openedWindow?: Window;
  closeOpenedWindow?: (window: Window) => void;
};

// bring your own authentication
type JwtAuthParams = {
  strategy: "jwt";
  jwt: string;
  encryptionKey?: string;
};

// open iframe to send and input the verification code only
type IframeOtpAuthParams = {
  strategy: "iframe_email_verification";
  email: string;
};

// open iframe to enter email and verification code
type IframeAuthParams = {
  strategy: "iframe";
};

Returns