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
- 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. |
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 . |
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>;
}
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.
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.
- EIP1193 Private Key Provider for EVM Compatible Chains
- Solana Private Key Provider for Solana Blockchain
- XRPL Private Key Provider for XRPL Blockchain
- Common Private Key Provider for Connecting to any Blockchain
- ETH
- Solana
- XRPL
- Other Chains
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",
},
},
});
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",
},
},
});
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",
},
},
});
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",
},
},
});
Usage
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
});
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();
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,
privateKeyProvider,
usePnPKey: false, // By default, this SDK returns CoreKitKey by default.
});
await web3auth.init();