Skip to main content

Initializing PnP Web No Modal SDK

After Installation, the next step to use Web3Auth is to Initialize the SDK.

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, Multi Factor Authentication and Custom Authentication have to be configured within this step, if you wish to customize your Web3Auth Instance.

Instantiating Web3AuthNoModal

Import the Web3AuthNoModal class from @web3auth/no-modal

import { Web3AuthNoModal } from "@web3auth/no-modal";

Assign the Web3AuthNoModal class to a variable

const web3auth = new Web3AuthNoModal(IWeb3AuthCoreOptions);

This Web3AuthNoModal constructor takes an object with IWeb3AuthCoreOptions as input.

Arguments

IWeb3AuthCoreOptions

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.
chainConfigCustom chain configuration for chainNamespace.
enableLoggingSetting to true will enable logs.
storageKeySetting to "local" will persist social login session across browser tabs.
sessionTimeSessionTime (in seconds) for idToken issued by Web3Auth for server-side verification.
web3AuthNetworkWeb3Auth Network to use for the session & the issued idToken.
useCoreKitKeyUses core-kit key with Web3Auth provider.
uiConfigWhiteLabel options for Web3Auth.
privateKeyProviderPrivate key provider for your chain namespace.

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.

Adding a Private Key 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.

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

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

const web3auth = new Web3AuthNoModal({
clientId: "", // Get your Client ID from the Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
});

Whitelabeling

Within the uiConfig parameter, you can configure the Web3Auth Modal according to your application's requirements. It accepts a WhiteLabelData object.

tip

This is just one of the aspects of whitelabeling you can achieve with Web3Auth. To know more in-depth about how you can Whitelabel your application with Web3Auth Plug and Play Modal SDK, have a look at our Whitelabeling SDK Reference.

WhiteLabelData

ParameterDescription
appNameApp name to display in the UI
appUrlApp url
logoLightApp logo to use in light mode
logoDarkApp logo to use in dark mode
defaultLanguagelanguage which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
modetheme
useLogoLoaderUse logo loader
themeUsed to customize your theme
tncLinkLanguage specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
privacyPolicyLanguage specific link for privacy policy on torus-website. See (examples/vue-app) to configure
uiConfig: {
appName: "W3A Heroes",
appUrl: "https://web3auth.io",
logoLight: "https://web3auth.io/logo-light.png",
logoDark: "https://web3auth.io/logo-dark.png",
defaultLanguage: "en",
mode: "theme",
useLogoLoader: true,
},

Returns

Object: The web3auth instance with all its methods and events.

Configuring Adapters

An adapter in Web3Auth is a pluggable package that implements the IAdapter interface. Some, like AuthAdapter, extend the BaseAdapter class, which also implements IAdapter. Adapters can be plugged into or removed from the Web3Auth instance. After successful user login, each adapter exposes a provider to invoke RPC calls on the wallet and connected blockchain. You can configure and use any Web3Auth adapter when initializing Web3AuthNoModal.

Configuring Auth Adapter [Social Logins]

The default adapter of Web3Auth is the auth-adapter. This adapter is a wrapper around the auth library from Web3Auth and enables the social login features. For customising features of the main Web3Auth flow, like Whitelabel, Custom Authentication, etc. you need to customise the Auth Adapter.

tip

Checkout the auth-adapter SDK Reference for more details on different configurations you can pass for customisations.

Whitelabeling

whiteLabel

For customising the redirect screens while logging in and constructing the key, you need to pass on whiteLabel configurations to the adapterSettings property of the auth-adapter.

tip

This is just one of the aspects of whitelabeling you can achieve with Web3Auth. To know more in depth about how you can Whitelabel your application with Web3Auth, have a look at our Whitelabeling SDK Reference.

import { AuthAdapter, WHITE_LABEL_THEME, WhiteLabelData } from "@web3auth/auth-adapter";
import {
CHAIN_NAMESPACES,
IProvider,
UX_MODE,
WALLET_ADAPTERS,
WEB3AUTH_NETWORK,
} from "@web3auth/base";

const authAdapter = new AuthAdapter({
adapterSettings: {
clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
uxMode: UX_MODE.REDIRECT,
whiteLabel: {
appName: "W3A Heroes",
appUrl: "https://web3auth.io",
logoLight: "https://web3auth.io/images/web3auth-logo.svg",
logoDark: "https://web3auth.io/images/web3auth-logo---Dark.svg",
defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
mode: "dark", // whether to enable dark mode. defaultValue: auto
theme: {
primary: "#00D1B2",
} as WHITE_LABEL_THEME,
useLogoLoader: true,
} as WhiteLabelData,
},
privateKeyProvider,
});
web3auth.configureAdapter(authAdapter);

Multi Factor Authentication

mfaLevel

For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the MFA screen by setting the mfaLevel argument. You can enable or disable a backup factor and change their order. Currently, there are four values for mfaLevel:

  • default: presents the MFA screen every third login
  • optional: presents the MFA screen on every login, but you can skip it
  • mandatory: make it mandatory to set up MFA after login
  • none: skips the MFA setup screen
import { AuthAdapter } from "@web3auth/auth-adapter";

const authAdapter = new AuthAdapter({
loginSettings: {
mfaLevel: "mandatory", // default, optional, mandatory, none
},
});
Note

Users of default Web3Auth verifiers may see MFA prompts across all dApps using these verifiers if they've enabled MFA on any one of them. This MFA can't be turned off once activated.

mfaSettings

For customising the MFA settings, you need to pass on mfaSettings configurations to the adapterSettings property of the AuthAdapter.

tip

Read more about mfaSettings in the Multi Factor Authentication Section SDK Reference.

import { AuthAdapter } from "@web3auth/auth-adapter";

const authAdapter = new AuthAdapter({
adapterSettings: {
// SCALE and above plan only feature
mfaSettings: {
deviceShareFactor: {
enable: true,
priority: 1,
mandatory: true, // at least two factors are mandatory
},
backUpShareFactor: {
enable: true,
priority: 2,
mandatory: true, // at least two factors are mandatory
},
socialBackupFactor: {
enable: true,
priority: 3,
mandatory: false,
},
passwordFactor: {
enable: true,
priority: 4,
mandatory: false,
},
},
},
});

Custom Authentication

loginConfig

With Web3Auth, you have the option to configure logins using your own authentication services. For adding your own authentication, you have to first configure your verifiers in the Web3Auth Dashboard.

Custom Authentication in Web3Auth is supported by the Auth Adapter, which is the default adapter for the Web3Auth SDK. For this, you need to configure the loginConfig parameter in the adapterSettings of the auth-adapter package.

tip

Refer to the Custom Authentication Documentation for more information.

Example

Since we're using the @web3auth/no-modal, ie. the Plug and Play No Modal SDK, the loginConfig can include custom JWT-based authentication as well. This way, we can use any of our preferred login providers and further setup their configs while logging the user in and passing over the extraLoginOptions in the connectTo function. Read more about this in the Custom Authentication Guide.

import { AuthAdapter } from "@web3auth/auth-adapter";

const authAdapter = new AuthAdapter({
adapterSettings: {
loginConfig: {
jwt: {
verifier: "YOUR-VERIFIER-NAME-ON-WEB3AUTH-DASHBOARD",
typeOfLogin: "jwt",
clientId: "YOUR-CLIENTID-FROM-LOGIN-PROVIDER",
},
},
},
privateKeyProvider,
});

web3auth.configureAdapter(authAdapter);

Configuring External Wallet Adapters

External Adapters helps you to connect with external wallets like Metamask, Coinbase, Phantom, and more. To configure an adapter, create the instance of the adapter and pass the instance in the configureAdapter function.

Default EVM Adapter

The @web3auth/default-evm-adapter package enables seamless detection of injected EVM wallets and WalletConnect-supported wallets, allowing interaction with just a single line of code. Learn more about Default EVM Adapter.

Default Solana Adapter

The @web3auth/default-solana-adapter enables seamless detection of injected Solana wallets, allowing interaction with just a single line of code. Learn more about Default Solana Adapter.

tip

Refer to the Adapters documentation to know more deeply about what adapters are available and how to configure them.

Configuring Plugins

info

This step is optional. If you do not plan to use any plugins, you can skip this section.

Plugins are essentially extensions to the core functionality of Web3Auth, allowing you to add additional features to your dApp. These features can be used to extend the UI functionalities, making your integration more interoperable, and a lot more, even having the functionality to be customised extremely and to your liking.

tip

Refer to the Wallet Services Plugin Documentation to know more deeply about how you utilise our plugins to extend the functionality of your dApp.

import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";

const walletServicesPlugin = new WalletServicesPlugin();

web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth

Initializing Web3Auth

init()

The final step in the whole initialization process is the initialize the Web3AuthNoModal instance, ie. web3auth in our case.

This is done by calling the init function of the web3auth instance we created above.

await web3auth.init();

This is a simple function, that doesn't take any input, nor does return anything. It just makes sure that the web3auth instance is initialized and ready for the user to log in.

note

The Web3Auth No Modal React Hooks SDK doesn't require an additional step to init from v9 onwards, it's auto-inited.

Quick Starts