Skip to main content

EmbeddedWallet

A wallet configurator for Embedded Wallet (email + Google Sign In) which allows integrating the wallet with React Native.

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

const embeddedWalletConfig = embeddedWallet();
customize (optional)

embeddedWalletConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const embeddedWalletConfig = embeddedWallet({ ... });

// override metadata
embeddedWalletConfig.meta.name = "..."; // change the name
embeddedWalletConfig.meta.iconURL = "..."; // change the icon

// override connection UI
embeddedWalletConfig.connectUI = embeddedWalletConnectUI; // react component

// custom selection UI
embeddedWalletConfig.selectUI = embeddedWalletSelectUI; // react component

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[embeddedWalletConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(embeddedWalletConfig, { ... });
authentication options (optional)

Whether to show the Sign In with different providers. Right now, only Google is supported.

To use this feature you will need to enable the Embedded Wallets service for your clientId in your Dashboard Settings and you will need to allowlist your app's redirectUrl (more on this below).

redirectUrl: The redirectUrl must be a deeplink your app supports. This is going to be used to redirect back from the browser after logging in with Google.

We wrote a short guide to help you enable deep links support in your mobile app.

embeddedWallet({
  auth: {
    options: ["email", "google"],
    redirectUrl: "deep-link-to-your-app://",
  },
});

Installation​

To use the embeddedWallet you need to add the following dependencies to your project. Find the command to add them all for convenience below.

yarn:

yarn add amazon-cognito-identity-js@6.3.3 react-native-quick-base64 react-native-quick-crypto react-native-aes-gcm-crypto @react-native-community/netinfo react-native-inappbrowser-reborn@3.7.0

npm:

npm install amazon-cognito-identity-js@6.3.3 react-native-quick-base64 react-native-quick-crypto react-native-aes-gcm-crypto @react-native-community/netinfo react-native-inappbrowser-reborn@3.7.0

Here are the dependencies added:

Usage with ConnectWallet​

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  clientId="your-client-id"
  supportedWallets={[embeddedWallet()]}
>
  <YourApp />
</ThirdwebProvider>

Usage with useEmbeddedWallet​

You can use the useEmbeddedWallet hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

The hook will return all the necessary functions you'll need to authenticate and connect to the embedded wallet.

Connecting with Google sign in:

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

  const handleConnect = async () => {
    await connect({
      strategy: "google",
      redirectUrl: "deep-link-to-your-app://",
    });
  };

  return <View> ... </View>;
}

Connecting with email verification:

function App() {
  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,
    });
  };

  return <View> ... </View>;
}

Available connection strategies​

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

// google sign-in
type GoogleAuthParams = {
  strategy: "google";
  redirectUrl: string;
};

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

If chainId is provided, wallet will be connected to network with given chainId, else wallet will be connected to the activeChain by default.