Skip to main content

Initializing Core Kit SFA Web 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 package.​

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

Assign the Web3Auth class to a variable​

const web3auth = new Web3Auth(Web3AuthOptions);

This Web3Auth constructor takes an object with Web3AuthOptions as input.

Arguments​

Web3AuthOptions​

ParameterDescription
clientIdClient id for web3auth. You can obtain your client ID from the web3auth developer dashboard. You can set any random string for this on localhost.
web3AuthNetworkWeb3Auth Network to use for login. The default value is mainnet.
enableLoggingSetting to true will enable logs. The default value is false.
usePnPKeySetting this to true returns the same key as web SDK (i.e., plug-n-play key). By default, this SDK returns CoreKitKey.
sessionTimeHow long should a login session last at a minimum in seconds? The default value is 86400 seconds. The max value of sessionTime can be 7 * 86400 (7 days).
storageKeySetting to "local" will persist the social login session across browser tabs. The default value is local.
storageServerUrlSpecify a custom storage server URL. The default value is https://session.web3auth.io.

Usage​

const web3auth = new Web3Auth({
  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.

web3auth.init(privateKeyProvider);

Example​

import { Web3Auth } from "@web3auth/single-factor-auth";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } 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",
      blockExplorerUrl: "https://etherscan.io",
      ticker: "ETH",
      tickerName: "Ethereum",
    },
  },
});

const web3auth = new Web3Auth({
  clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  usePnPKey: false, // By default, this SDK returns CoreKitKey by default.
});

web3auth.init(privateKeyProvider);