Initializing Single Factor Auth JS SDK

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

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

Instantiation of Web3Auth
Initialization of Web3Auth

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`

Table
Interface

Parameter	Description
`clientId`	Client id for web3auth. You can obtain your client ID from the web3auth developer dashboard. You can set any random string for this on localhost.
`web3AuthNetwork`	Web3Auth Network to use for login. The default value is `mainnet`.
`privateKeyProvider`	Private key provider for your chain namespace.
`accountAbstractionProvider?`	Account abstraction provider for your preferred chain and provider.
`enableLogging?`	Setting to true will enable logs. The default value is `false`.
`usePnPKey?`	Setting this to true returns the same key as web SDK (i.e., plug-n-play key). By default, this SDK returns CoreKitKey.
`sessionTime?`	How 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).
`storageKey?`	Setting to "local" will persist the social login session across browser tabs. The default value is `local`.
`storageServerUrl?`	Specify a custom storage server URL. The default value is `https://session.web3auth.io`.
`serverTimeOffset?`	Specify a custom server time offset. The default value is `0`.
`mode?`	Defines the mode of the SDK. The default value is `web`. You can use `react-native` or `node` for respective platforms.
`storage?`	Storage for SFA's local state. The default value is `localStorage`. You need to pass the storage instance for `react-native` mode.

export interface Web3AuthOptions {
  /**
   * Client id for web3auth.
   * You can obtain your client ID from the web3auth developer dashboard.
   * You can set any random string for this on localhost.
   */
  clientId: string;
  /**
   * Web3Auth Network to use for login
   * @defaultValue mainnet
   */
  web3AuthNetwork?: TORUS_NETWORK_TYPE;
  /**
   * setting to true will enable logs
   *
   * @defaultValue false
   */
  enableLogging?: boolean;
  /**
   * setting this to true returns the same key as web SDK (i.e., plug-n-play key)
   * By default, this SDK returns CoreKitKey
   */
  usePnPKey?: boolean;
  /**
   * How long should a login session last at a minimum in seconds
   *
   * @defaultValue 86400 seconds
   * @remarks Max value of sessionTime can be 7 * 86400 (7 days)
   */
  sessionTime?: number;
  /**
   * setting to "local" will persist social login session across browser tabs.
   *
   * @defaultValue "local"
   */
  storageKey?: "session" | "local";
  /**
   * Specify a custom storage server URL
   * @defaultValue https://session.web3auth.io
   */
  storageServerUrl?: string;
  /**
   * Specify a custom server time offset.
   *
   * @defaultValue 0
   */
  serverTimeOffset?: number;

  /**
   * Private key provider for your chain namespace
   */
  privateKeyProvider: IBaseProvider<string>;
  /**
   * Account abstraction provider for your chain namespace
   */
  accountAbstractionProvider?: IBaseProvider<IProvider>;
  /**
   * Defines the mode of the SDK
   *
   * @defaultValue "web"
   */
  mode?: SDK_MODE_TYPE;
  /**
   *  storage for sfa's local state.
   *
   *  - undefined with localStorage
   *  - "local" with localStorage
   *  - "session" with sessionStorage
   *
   *  For asyncStorage, provide instance of IAsyncStorage.
   *
   */
  storage?: IAsyncStorage | ISecureStore | "session" | "local";
}

Instantiating 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.

ETH
Solana
XRPL
Other Chains

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 { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";

const privateKeyProvider = new SolanaPrivateKeyProvider({
  config: {
    /*
      pass the chain config that you want to connect with.
      all chainConfig fields are required.
      */
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.SOLANA,
      chainId: "0x1",
      rpcTarget: "https://rpc.ankr.com/solana",
      displayName: "Solana Mainnet",
      blockExplorerUrl: "https://explorer.solana.com/",
      ticker: "SOL",
      tickerName: "Solana",
    },
  },
});

Usage
import { XrplPrivateKeyProvider } from "@web3auth/xrpl-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";

const privateKeyProvider = new XrplPrivateKeyProvider({
  config: {
    /*
      pass the chain config that you want to connect with.
      all chainConfig fields are required.
      */
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.OTHER,
      chainId: "0x1",
      rpcTarget: "https://s.altnet.rippletest.net:51234",
      displayName: "XRPL",
      blockExplorerUrl: "https://testnet.xrpl.org",
      ticker: "XRP",
      tickerName: "XRP",
    },
  },
});

Usage
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";

const privateKeyProvider = new CommonPrivateKeyProvider({
  config: {
    /*
      pass the chain config that you want to connect with.
      all chainConfig fields are required.
      */
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.OTHER,
      chainId: "0x1",
      rpcTarget: `https://rpc.target.url`,
      displayName: "Display Name",
      blockExplorerUrl: "https://chain.explorer.link",
      ticker: "TKR",
      tickerName: "Ticker Name",
    },
  },
});

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.

await web3auth.init();

Usage

Web

For Web, you need to simply pass the basic Web3AuthOptions, and the private key provider, and the SDK will handle the rest.

import { Web3Auth } from "@web3auth/single-factor-auth";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const chainConfig = {
  chainId: "0x1",
  displayName: "Ethereum Mainnet",
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  tickerName: "Ethereum",
  ticker: "ETH",
  decimals: 18,
  rpcTarget: "https://rpc.ankr.com/eth",
  blockExplorerUrl: "https://etherscan.io",
  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

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

React Native

While configuring the React Native Instance, you need to pass the storage option, and the mode of the SDK should be set to react-native.

Bare React Native
Expo

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

const chainConfig = {
  chainId: "0x1",
  displayName: "Ethereum Mainnet",
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  tickerName: "Ethereum",
  ticker: "ETH",
  decimals: 18,
  rpcTarget: "https://rpc.ankr.com/eth",
  blockExplorerUrl: "https://etherscan.io",
  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

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

import { Web3Auth, SDK_MODE } from "@web3auth/single-factor-auth";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import * as SecureStore from "expo-secure-store";

const chainConfig = {
  chainId: "0x1",
  displayName: "Ethereum Mainnet",
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  tickerName: "Ethereum",
  ticker: "ETH",
  decimals: 18,
  rpcTarget: "https://rpc.ankr.com/eth",
  blockExplorerUrl: "https://etherscan.io",
  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

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

Node JS

import { Web3Auth, SDK_MODE } from "@web3auth/single-factor-auth";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const chainConfig = {
  chainId: "0x1",
  displayName: "Ethereum Mainnet",
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  tickerName: "Ethereum",
  ticker: "ETH",
  decimals: 18,
  rpcTarget: "https://rpc.ankr.com/eth",
  blockExplorerUrl: "https://etherscan.io",
  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

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

For Node JS, you just need to set the mode of the SDK to node.

Quick Starts

Single Factor Auth React Quick Start

QUICK START

A quick integration of Single Factor Auth SDK in React

Source Code Integration Builder

mpc core kit

sfa

web

@web3auth/single-factor-auth

evm

javascript

react

id token login

Single Factor Auth Angular Quick Start

QUICK START

A quick integration of Single Factor Auth SDK in angular

Source Code Integration Builder

single factor auth

sfa

web

@web3auth/single-factor-auth

javascript

evm

angular

id token login

Single Factor Auth Vue Quick Start

QUICK START

A quick integration of Single Factor Auth SDK in Vue

Source Code Integration Builder

single factor auth

sfa

web

@web3auth/single-factor-auth

javascript

evm

vue

id token login

Single Factor Auth NextJS Quick Start

QUICK START

A quick integration of Single Factor Auth SDK in NextJS

Source Code Integration Builder

single factor auth

sfa

web

@web3auth/single-factor-auth

javascript

evm

nextjs

id token login

Single Factor Auth Vanilla JS Quick Start

QUICK START

A quick integration of Single Factor Auth SDK in Vanilla JS

Source Code Integration Builder

single factor auth

sfa

web

@web3auth/single-factor-auth

javascript

evm

id token login

Web3Auth Single Factor Auth React Native SDK Quick Start

QUICK START

A quick integration of Web3Auth Single Factor Auth React Native SDK in Android and iOS

Source Code Integration Builder

single factor auth

sfa

javascript

android

ios

evm

react native

Web3Auth Single Factor Auth Node SDK Quick Start

QUICK START

A quick integration of Web3Auth Single Factor Auth Node SDK

Source Code Integration Builder

single factor auth

sfa

node

evm

Plug and Play

Single Factor Auth

MPC Core Kit

Infra SDKs

Web

Modal SDK

No Modal SDK

Gaming

Unity SDK

Unreal SDK

Mobile

Android SDK

iOS SDK

React Native SDK

Flutter SDK

SFA JS SDK

SFA Android SDK

SFA Swift SDK

SFA Flutter SDK

MPC Core Kit JS SDK

tKey JS SDK

tKey Android SDK

tKey iOS SDK

Auth Provider Setup

Dashboard Setup

Infrastructure

Connect Blockchain

Examples

Troubleshooting

Support Forum

Troubleshooting

Talk to Sales

Instantiating Web3Auth​

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

Assign the Web3Auth class to a variable​

Arguments​

Web3AuthOptions​

Instantiating Provider​

privateKeyProvider​

Initializing Web3Auth​

init()​

Usage​

Web​

React Native​

Node JS​

Quick Starts​

Single Factor Auth React Quick Start

Single Factor Auth Angular Quick Start

Single Factor Auth Vue Quick Start

Single Factor Auth NextJS Quick Start

Single Factor Auth Vanilla JS Quick Start

Web3Auth Single Factor Auth React Native SDK Quick Start

Web3Auth Single Factor Auth Node SDK Quick Start

Instantiating Web3Auth

Import the `Web3Auth` class from `@web3auth/single-factor-auth` package.

Assign the `Web3Auth` class to a variable

Arguments

`Web3AuthOptions`

Instantiating Provider

`privateKeyProvider`

Initializing Web3Auth

`init()`

Usage

Web

React Native

Node JS

Quick Starts