InAppWallet

A wallet configurator for In-App Wallet which allows integrating the wallet with React Native

import { inAppWallet } from "@thirdweb-dev/react-native";
 
const inAppWalletConfig = inAppWallet();

const inAppWalletConfig = inAppWallet({ ... });
 
// override metadata
inAppWalletConfig.meta.name = "..."; // change the name
inAppWalletConfig.meta.iconURL = "..."; // change the icon
 
// override connection UI
inAppWalletConfig.connectUI = inAppWalletConnectUI; // react component
 
// custom selection UI
inAppWalletConfig.selectUI = inAppWalletSelectUI; // react component
 

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[inAppWalletConfig]} clientId="your-client-id"/>;
 
// or use it with useConnect hook
const connect = useConnect();
connect(inAppWalletConfig, { ... });

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

export type WalletConnectReceiverConfig = {
  walletConnectReceiver?:
    | {
        walletConnectWalletMetadata?: WCMetadata;
        walletConnectV2ProjectId?: string;
        walletConnectV2RelayUrl?: string;
      }
    | true;
};

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

npm i 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:

• amazon-cognito-identity-js: "^6.3.3"

• react-native-quick-base64

• react-native-quick-crypto

• react-native-aes-gcm-crypto

  • This package requires minSdkVersion = 26 on Android

• @react-native-community/netinfo

• react-native-inappbrowser-reborn: "^3.7.0" (for Socials Sign In)

  • There's an open issue on RN > 0.72: https://github.com/margelo/react-native-quick-crypto/issues/186 which you can fix by adding the following to your android/app/build.gradle file:

    packagingOptions {
        pickFirst 'lib/x86/libcrypto.so'
        pickFirst 'lib/x86_64/libcrypto.so'
        pickFirst 'lib/armeabi-v7a/libcrypto.so'
        pickFirst 'lib/arm64-v8a/libcrypto.so'
    }
    

  • When building the iOS app in release mode for RN 0.71 you need to enable the OpenSSL framework in XCode. There are several solutions for this here:

    • https://github.com/margelo/react-native-quick-crypto/issues/121#issuecomment-1369924076
    • https://github.com/margelo/react-native-quick-crypto/issues/121#issuecomment-1537576444

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={[inAppWallet()]}
>
  <YourApp />
</ThirdwebProvider>;

You can use the useInAppWallet 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 ina-- wallet.

function App() {
  const { connect } = useInAppWallet();
 
  const handleConnect = async () => {
    await connect({
      strategy: "google",
      redirectUrl: "redirect-url-to-your-app://",
    });
  };
 
  return <View> ... </View>;
}

function App() {
  const { connect, sendVerificationEmail } = useInAppWallet();
 
  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",
      email,
      verificationCode,
    });
  };
 
  return <View> ... </View>;
}

// email verification
type EmailVerificationAuthParams = {
  strategy: "email";
  email: string;
  verificationCode: string;
  recoveryCode?: string;
};
 
type SocialAuthParams = {
  strategy: "google" | "facebook" | "apple";
  redirectUrl: string;
};
 
// bring your own authentication
type JwtAuthParams = {
  strategy: "jwt";
  jwt: string;
  encryptionKey: string;
};

You can delete an account by calling, deleteActiveAccount from the InAppWallet instance:

function App() {
  const activeWallet = useWallet();
 
  const deleteAccount = async () => {
    await (activeWallet as InAppWallet).deleteActiveAccount();
  };
 
  return <View> ... </View>;
}

If you want to publish your app to the App Store you will need to allow users to delete their account as per Apple's Guidelines. You can use the deleteActiveAccount method for this purpose.

Android Google Play

Apple App Store