thirdwebDocs
GitHub

useEmbeddedWallet

Defined in

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";
};
function useEmbeddedWallet(): {
  connect: (authParams: AuthParams) => Promise<EmbeddedWallet>;
  sendVerificationEmail: (__namedParameters: {
    email: string;
  }) => Promise<SendEmailOtpReturnType>;
};

Returns

let returnType: {
  connect: (authParams: AuthParams) => Promise<EmbeddedWallet>;
  sendVerificationEmail: (__namedParameters: {
    email: string;
  }) => Promise<SendEmailOtpReturnType>;
};