useEmbeddedWallet

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>;
};