Skip to main content

Initializing PnP React Native SDK

After Installation, the next step to use Web3Auth is to Initialize the SDK. The Initialization is a two-step process,

Please note that these are the most critical steps where you need to pass on different parameters according to the preference of your project. Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customize your Web3Auth Instance.

Importing Required packages​

Importing Web3Auth​

You may also import additional types from the SDK to help in the development process.

import Web3Auth, { WEB3AUTH_NETWORK, LOGIN_PROVIDER } from "@web3auth/react-native-sdk";

Importing a WebBrowser implementation​

import * as WebBrowser from "expo-web-browser";

Importing a Storage implementation​

import * as SecureStore from "expo-secure-store";

Instantiating Web3Auth​

NOTE

Now with react-native-sdk v4 SecureStore or EncryptedStorage gets passed with the Web3Auth constructor, depending on the workflow you are using. This is due to the addition of session management without storing the private key in the device.

const web3auth = new Web3Auth(WebBrowser, SecureStore, SdkInitParams);

SdkInitParams object​

The Web3Auth constructor in the React Native SDK takes an SdkInitParams object respectively as an argument. The fields of such objects are listed below.

ParameterDescription
clientIdYour Web3Auth Client ID. You can get it from Web3Auth Dashboard under project details. It's a mandatory field of type string
networkDefines the Web3Auth network. It's a mandatory field of type WEB3AUTH_NETWORK_TYPE.
redirectUrlURL that Web3Auth will redirect API responses upon successful authentication from browser. It's a mandatory field of type string.
privateKeyProviderPrivate key provider for your chain namespace.
accountAbstractionProvider?Account abstraction provider for your preferred chain and provider.
whiteLabel?WhiteLabel options for web3auth. It helps you define custom UI, branding, and translations for your brand app. It takes WhiteLabelData as a value.
loginConfig?Login config for the custom verifiers. It takes LoginConfig as a value.
useCoreKitKey?Use CoreKit Key to get core kit key. It's an optional field with default value as false.
mfaSettings?Allows developers to configure the Mfa settings for authentication. It takes MfaSettings as a value.
sessionTime?It allows developers to configure the session management time. Session Time is in seconds, default is 86400 seconds which is 1 day. sessionTime can be max 7 days
storageServerUrl?Specify a custom storage url. Default value is https://broadcast-server.tor.us.
storageKey?Specify the storage key. Setting to "local" will persist social login session accross browser tabs. Available options are "local" and "session".

Adding a Custom Chain Configuration​

chainConfig​

const chainConfig = {
  chainId: "0x1", // Please use 0x1 for Mainnet
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io/",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/eth.svg",
};
ParameterDescription
chainNamespaceNamespace of the chain
chainIdChain ID of the chain
rpcTargetRPC target URL for the chain
wsTarget?Web socket target URL for the chain
displayName?Display name for the chain
blockExplorerUrl?URL of the block explorer
ticker?Default currency ticker of the network
tickerName?Name for currency ticker
decimals?Number of decimals for the currency
logo?Logo for the token
isTestnet?Whether the network is testnet or not
note

It's mandatory to pass the logo parameter when using WalletServices.

tip

Get the Chain Config for your preferred Blockchain from the Connect Blockchain Reference.

Instantiating a Provider​

privateKeyProvider​

privateKeyProvider parameter helps you to connect with various wallet SDKs. These are preconfigured RPC clients for different blockchains used to interact with the respective blockchain networks.

note

It's mandatory to provide privateKeyProvider for your corresponding chain namespace. To know more in-depth about providers, have a look at the Providers reference.

You can choose between the following providers based on your usecase.

Usage
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } 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",
    },
  },
});

Usage​

import * as WebBrowser from "@toruslabs/react-native-web-browser";
import EncryptedStorage from "react-native-encrypted-storage";
import Web3Auth, {
  LOGIN_PROVIDER,
  WEB3AUTH_NETWORK,
  ChainNamespace,
} from "@web3auth/react-native-sdk";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const scheme = "web3authrnexample"; // Or your desired app redirection scheme
const redirectUrl = `${scheme}://auth`;

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io

const chainConfig = {
  chainNamespace: ChainNamespace.EIP155,
  chainId: "0xaa36a7",
  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
  // Avoid using public rpcTarget in production.
  // Use services like Infura, Quicknode etc
  displayName: "Ethereum Sepolia Testnet",
  blockExplorerUrl: "https://sepolia.etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  decimals: 18,
  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    chainConfig,
  },
});

const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
  clientId,
  redirectUrl,
  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
  privateKeyProvider,
});