Skip to main content

Initializing MPC Core Kit JS SDK

After Installation, the next step to use Web3Auth MPC Core Kit is to Initialize the SDK.

However, the Initialization is a two step process, ie.

Instantiating Web3Auth​

Import the Web3AuthMPCCoreKit class from @web3auth/mpc-core-kit package.​

import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from "@web3auth/mpc-core-kit";
Additional imports needed for React Native

In order to make this SDK compatible with the React Native development environment, you need to additionally import the following packages:

import EncryptedStorage from "react-native-encrypted-storage"; // Used to store the session & device factor keys
import * as TssLibRN from "@toruslabs/react-native-tss-lib-bridge"; // The TSS library for React Native
import { Bridge } from "@toruslabs/react-native-tss-lib-bridge"; // A bridge to be imported to the React Native environment

While initializing the SDK, you need to pass the EncryptedStorage and TssLibRN as arguments to the Web3AuthOptions object. The Bridge is used to bridge the TSS library to the React Native environment, it has to be imported in the React Native environment, at the end of the page.

App.tsx
import { Bridge } from "@toruslabs/react-native-tss-lib-bridge";

export default function App() {
  // Misc App related functions
  return (
    <View>
      {/* <YOUR APP GOES HERE> */}
      <Bridge /> // <- Add this line
    </View>
  );
}

Assign the Web3AuthMPCCoreKit class to a variable​

const coreKitInstance = new Web3AuthMPCCoreKit(Web3AuthOptions);

This Web3AuthMPCCoreKit constructor takes an object with Web3AuthOptions as input.

Arguments​

Web3AuthOptions​

ParameterTypeDescription
web3AuthClientIdstringThe Web3Auth Client ID for your application. Find one at https://dashboard.web3auth.io
chainConfigCustomChainConfigChain Config for the chain you want to connect to. Currently supports only EVM based chains.
manualSync?booleanEnables you to manually sync with the Web3Auth Metadata Server, helping you manage the API calls to the server. Ideal for managing custom flows.
baseUrl?stringURL of the service worker handling the authentication in popup flow. For general usecases, you don't need to change this value.
web3AuthNetworkWEB3AUTH_NETWORK_TYPEWeb3Auth Network used for MPC Wallet Management. Use Devnet/ Testnet in testing environment and Mainnet in production environment.
storageKey?SupportedStorageTypeSelect the session key storage across local storage or session storage. Setting to "local" will persist social login session accross browser tabs. @defaultValue "local"
asyncStorageKeyIAsyncStorageCustom Async Storage Implementation. For general usecases, you don't need to change this value.
sessionTime?numberDetermine the session length in seconds. By default the value is set at 86400 seconds, ie. 7 days.
uxMode?CoreKitModeFour uxModes are supported:
  • 'popup': In this uxMode, a popup will be shown to user for login.
  • 'redirect': In this uxMode, user will be redirected to a new window tab for login.
  • 'nodejs': Use this for Node.js projects.
  • 'react-native': Use this for React Native apps.
Use of 'redirect' mode is recommended in browsers where popups might get blocked.
enableLogging?booleanEnables Logs for the SDK
redirectPathName?stringSpecifies the url path where user will be redirected after login. Redirect Uri for OAuth is baseUrl/redirectPathName.
disableHashedFactorKey?booleanDisables the Hashed Key, making the sure user logs in always in a non-custodial mode. Recommended only if you have proper MFA flow setup for the user while creating the account.
tssLib?TssLibCustom TSS Library Implementation. For general usecases, you don't need to change this value.
hashedFactorNonce?stringNonce for the hashed factor.
setupProviderOnInit?booleanSetup the provider on init.
Usage​
chainConfig: {
  chainNamespace: "eip155",
  chainId: "0x89", // hex of 137, polygon mainnet
  rpcTarget: "https://rpc.ankr.com/polygon",
  // Avoid using public rpcTarget in production.
  // Use services like Infura, Quicknode etc
  displayName: "Polygon Mainnet",
  blockExplorer: "https://polygonscan.com",
  ticker: "MATIC",
  tickerName: "Matic",
}

Example​

Web​

import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from "@web3auth/mpc-core-kit";

const coreKitInstance = new Web3AuthMPCCoreKit({
  web3AuthClientId:
    "BILuyqFCuDXAqVmAuMbD3c4oWEFd7PUENVPyVC-zmsF9euHAvUjqbTCpKw6gO05DBif1YImIVtyaxmEbcLLlb6w",
  web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
  uxMode: "popup",
  manualSync: true, // This is the recommended approach
});

React Native​

import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from "@web3auth/mpc-core-kit";
import EncryptedStorage from "react-native-encrypted-storage"; // Used to store the session & device factor keys
import * as TssLibRN from "@toruslabs/react-native-tss-lib-bridge"; // The TSS library for React Native

const coreKitInstance = new Web3AuthMPCCoreKit({
  web3AuthClientId:
    "BILuyqFCuDXAqVmAuMbD3c4oWEFd7PUENVPyVC-zmsF9euHAvUjqbTCpKw6gO05DBif1YImIVtyaxmEbcLLlb6w",
  web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
  chainConfig,
  setupProviderOnInit: false,
  uxMode: "react-native",
  asyncStorageKey: {
    getItem: async (key: string) => {
      return EncryptedStorage.getItem(key);
    },
    setItem: async (key: string, value: string) => {
      return EncryptedStorage.setItem(key, value);
    },
  },
  tssLib: TssLibRN,
  manualSync: true, // This is the recommended approach
});

Instantiating Provider​

As a next step, you need to set up the particular signing provider from Web3Auth and pass the coreKitInstance into it. This provider is used to make calls to the selected blockchain. Currently, Web3Auth exposes the following signing provider packages to be integrated within the SDK:

Adding a Custom Chain Configuration​

warning

Currently Web3Auth MPC Core Kit supports only EVM Compatible Chains. We're constantly working on adding support for more chains.

chainConfig​

ParameterDescription
chainNamespaceThe namespace of your preferred chain. Checkout Providers SDK Reference for understanding RPC Calls. It accepts ChainNamespaceType as a value.
chainIdThe chain id of the selected blockchain in hex string format.
rpcTarget
  • RPC Target URL for the selected chainNamespace & chainId.
  • We provide a default RPC Target for certain blockchains, but due to congestion it might be slow hence it is recommended to provide your own RPC Target URL.
wsTargetWeb socket target URL for the chain in string.
displayNameDisplay Name for the chain in string.
blockExplorerUrlBlockchain's explorer URL in string. (eg: https://etherscan.io)
tickerDefault currency ticker in string for the network (e.g: ETH)
tickerNameName for currency ticker in string (e.g: Ethereum)
decimals?Number of decimals in number for the currency ticker (e.g: 18)
logoLogo for the chain.
isTestnet?Defines whether the network is testnet or not.
Usage
import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";
import { CHAIN_NAMESPACES } from "@web3auth/base";

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: "0xaa36a7", // Please use 0x1 for Mainnet
  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
  displayName: "Ethereum Sepolia Testnet",
  blockExplorerUrl: "https://sepolia.etherscan.io/",
  ticker: "ETH",
  tickerName: "Ethereum",
};

const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
evmProvider.setupProvider(coreKitInstance);

Initializing Web3Auth​

init(params?: InitParams)​

ParameterTypeDescription
handleRedirectResultbooleantrue to handle the redirect result during init()
rehydratebooleantrue to rehydrate the session during init()

The final step in the initialization process is to initialize the Web3AuthMPCCoreKit instance, ie. coreKitInstance in our case.

This is done by calling the init() function of coreKitInstance.

await coreKitInstance.init();