Skip to main content

Initializing Core Kit SFA React Native SDK

After Installation, the next step to use Web3Auth Single Factor Auth Web SDK is to Initialize the SDK.

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

Instantiating Web3Auth​

Import the Web3Auth class from @web3auth/single-factor-auth-react-native package.​

import { Web3Auth } from "@web3auth/single-factor-auth-react-native";

Assign the Web3Auth class to a variable​

import EncryptedStorage from "react-native-encrypted-storage";
import { Web3Auth } from "@web3auth/single-factor-auth-react-native";

const web3auth = new Web3Auth(EncryptedStorage, SdkInitOptions);

The react native SFA Web3Auth constructor takes EncryptedStorage and an object with SdkInitOptions as parameters for the bare workflow.

Arguments​

SdkInitOptions​

SdkInitOptions is an object with the following properties:

ParameterTypeDescriptionMandatory
clientIdstringWeb3Auth Client ID. Obtain your clientId from the Web3Auth Developer Dashboard.Yes
web3AuthNetwork?TORUS_LEGACY_NETWORK_TYPEWeb3Auth Network to use for login. @defaultValue mainnetNo
enableLogging?booleanSetting it to true will enable logs.No
usePnPKey?booleanSetting this to true returns the same key as PnP Web SDK, By default, this SDK returns CoreKitKey. Use this flag if you require the key returned by PnP SDK. Ideal for migrating from PnP Products to SFANo
sessionTime?numberDetermine the session length in seconds. By default, the value is set at 86400 seconds, ie. 7 days.No

Example​

const web3auth = new Web3Auth(EncryptedStorage, {
  clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
  web3AuthNetwork: "sapphire_mainnet",
  usePnPKey: false, // By default, this sdk returns CoreKitKey
});

Instantiating Provider​

For getting the appropriate key for your selected chain, you need to instantiate a provider. This provider is used to make calls to the selected blockchain. Currently, Web3Auth exposes the following provider packages to be integrated within the SDKs:

Usage
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES } from "@web3auth/base";

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    /*
      pass the chain config that you want to connect with.
      all chainConfig fields are required.
      */
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      chainId: "0x1",
      rpcTarget: "https://rpc.ankr.com/eth",
      displayName: "Ethereum Mainnet",
      blockExplorerUrl: "https://etherscan.io",
      ticker: "ETH",
      tickerName: "Ethereum",
    },
  },
});

Initializing Web3Auth​

init()​

To complete the initialization process, we need to initialize the Web3Auth instance, which we named web3auth. This is achieved by calling the init() function of the previously created web3auth instance, using a private key provider.

await web3auth.init(privateKeyProvider);

Example​

import EncryptedStorage from "react-native-encrypted-storage";
import { Web3Auth } from "@web3auth/single-factor-auth-react-native";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES } from "@web3auth/base";

// Swap with a different provider if you want to use a different blockchain
const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      chainId: "0x1",
      rpcTarget: "https://rpc.ankr.com/eth",
      displayName: "Ethereum Mainnet",
      blockExplorer: "https://etherscan.io",
      ticker: "ETH",
      tickerName: "Ethereum",
    },
  },
});

const web3auth = new Web3Auth(EncryptedStorage, {
  clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
  web3AuthNetwork: "sapphire_mainnet",
  usePnPKey: false, // By default, this sdk returns CoreKitKey
});

await web3auth.init(privateKeyProvider);