Initializing PnP Web Modal SDK
After Installation, the next step to use Web3Auth is to Initialize the SDK. However, the Initialization is a two-step process, with an additional two steps for customizations, i.e.
- Instantiation of Web3Auth
- Configuration of Adapters (optional)
- Configuration of Plugins (optional)
- Initialization of Modal
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, If you wish to customize your Web3Auth Instance, Whitelabeling, Multi Factor Authentication and Custom Authentication have to be configured within this step.
Instantiating Web3Auth
Import the Web3Auth
class from @web3auth/modal
import { Web3Auth } from "@web3auth/modal";
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. |
chainConfig | custom chain configuration for chainNamespace. |
enableLogging | setting to true will enable logs. |
storageKey | setting to "local" will persist social login session across browser tabs. |
sessionTime | sessionTime (in seconds) for idToken issued by Web3Auth for server side verification. |
web3AuthNetwork | Web3Auth Network to use for the session & the issued idToken. |
useCoreKitKey | Uses core-kit key with web3auth provider. |
uiConfig | WhiteLabel options for web3auth. |
privateKeyProvider | Private key provider for your chain namespace. |
export interface Web3AuthOptions extends IWeb3AuthCoreOptions {
/**
* Config for configuring modal ui display properties
*/
uiConfig?: Omit<UIConfig, "adapterListener">;
/**
* Private key provider for your chain namespace
*/
privateKeyProvider: IBaseProvider<string>;
}
export interface IWeb3AuthCoreOptions {
/**
* 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;
/**
* custom chain configuration for chainNamespace
*
* @defaultValue mainnet config of provided chainNamespace
*/
chainConfig?: CustomChainConfig;
/**
* setting to true will enable logs
*
* @defaultValue false
*/
enableLogging?: boolean;
/**
* setting to "local" will persist social login session across browser tabs.
*
* @defaultValue "local"
*/
storageKey?: "session" | "local";
/**
* sessionTime (in seconds) for idToken issued by Web3Auth for server side verification.
* @defaultValue 86400
*
* Note: max value can be 7 days (86400 * 7) and min can be 1 day (86400)
*/
sessionTime?: number;
/**
* Web3Auth Network to use for the session & the issued idToken
* @defaultValue mainnet
*/
web3AuthNetwork?: OPENLOGIN_NETWORK_TYPE;
/**
* Uses core-kit key with web3auth provider
* @defaultValue false
*/
useCoreKitKey?: boolean;
/**
* WhiteLabel options for web3auth
*/
uiConfig?: WhiteLabelData;
/**
* Private key provider for your chain namespace
*/
privateKeyProvider?: IBaseProvider<string>;
}
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",
};
- Table
- Type Declarations
Parameter | Description |
---|---|
chainNamespace | The namespace of the chain. |
chainId | The chain id of the chain. |
rpcTarget | RPC 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 (e.g: ETH). |
tickerName | Name for currency ticker (e.g: Ethereum ). |
decimals | Number of decimals for the currency ticker (e.g: 18). |
logo | Logo for the token. |
isTestnet | Whether the network is testnet or not. |
export declare const CHAIN_NAMESPACES: {
readonly EIP155: "eip155";
readonly SOLANA: "solana";
readonly CASPER: "casper";
readonly XRPL: "xrpl";
readonly OTHER: "other";
};
export type ChainNamespaceType = (typeof CHAIN_NAMESPACES)[keyof typeof CHAIN_NAMESPACES];
export type CustomChainConfig = {
chainNamespace: ChainNamespaceType;
/**
* The chain id of the chain
*/
chainId: string;
/**
* RPC target Url for the chain
*/
rpcTarget: string;
/**
* web socket target Url for the chain
*/
wsTarget?: string;
/**
* Display Name for the chain
*/
displayName?: string;
/**
* Url of the block explorer
*/
blockExplorerUrl?: string;
/**
* Default currency ticker of the network (e.g: ETH)
*/
ticker?: string;
/**
* Name for currency ticker (e.g: `Ethereum`)
*/
tickerName?: string;
/**
* Number of decimals for the currency ticker (e.g: 18)
*/
decimals?: number;
/**
* Logo for the token
*/
logo?: string;
/**
* Whether the network is testnet or not
*/
isTestnet?: boolean;
};
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.
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
- EIP1193 Provider
- Solana Provider
- XRPL Provider
- Common Provider
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const web3auth = new Web3AuthModal({
clientId: "", // Get your Client ID from the Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
});
import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
const privateKeyProvider = new SolanaPrivateKeyProvider({
config: { chainConfig },
});
const web3auth = new Web3AuthModal({
clientId: "", // Get your Client ID from the Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
});
import { XrplPrivateKeyProvider } from "@web3auth/xrpl-provider";
const privateKeyProvider = new XrplPrivateKeyProvider({
config: { chainConfig },
});
const web3auth = new Web3AuthModal({
clientId: "", // Get your Client ID from the Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
});
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig },
});
const web3auth = new Web3AuthModal({
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.
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.
uiConfig
- Table
- Interface
Parameter | Description |
---|---|
loginMethodsOrder | order of how login methods are shown |
modalZIndex | Z-index of the modal and iframe |
displayErrorsOnModal | Whether to show errors on Web3Auth modal. |
loginGridCol | number of columns to display the Social Login buttons |
primaryButton | Decides which button will be the focus of the modal |
uxMode | UX Mode for the openlogin adapter |
appName? | App name to be displayed in the User Flow Screens. It accepts string as a value. |
appUrl? | App URL to be displayed in the User Flow Screens. It accepts string as a value. |
logoLight? | App logo to be shown on the light background (light theme). It accepts string as a value. |
logoDark? | App logo to be shown on the dark background (dark theme). It accepts string as a value. |
defaultLanguage? | Default Language to use. Choose from:
en |
mode? | Choose between auto , light or dark background modes. Default is auto . |
theme? | Used to customize the theme of the login modal with the following options 'primary' - To customize the primary color of the modal's content. It accepts Record as a value. |
tncLink? | Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure e.g. tncLink: {en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja"} |
privacyPolicy? | Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure e.g. privacyPolicy: { en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja", } |
export interface UIConfig extends WhiteLabelData {
/**
* order of how login methods are shown
*
* @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
*/
loginMethodsOrder?: string[];
/**
* Z-index of the modal and iframe
* @defaultValue 99998
*/
modalZIndex?: string;
/**
* Whether to show errors on Web3Auth modal.
*
* @defaultValue `true`
*/
displayErrorsOnModal?: boolean;
/**
* number of columns to display the Social Login buttons
*
* @defaultValue `3`
*/
loginGridCol?: 2 | 3;
/**
* Decides which button will be the focus of the modal
* For `socialLogin` the social icon will be colored
* For other options like `emailLogin` and `externalLogin` the respective buttons will be coverted into a primary button
*
* @defaultValue `socialLogin`
*/
primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";
/**
* UX Mode for the openlogin adapter
*/
uxMode?: UX_MODE_TYPE;
}
export type WhiteLabelData = {
/**
* App name to display in the UI
*/
appName?: string;
/**
* App url
*/
appUrl?: string;
/**
* App logo to use in light mode
*/
logoLight?: string;
/**
* App logo to use in dark mode
*/
logoDark?: string;
/**
* language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
* en: english
* de: german
* ja: japanese
* ko: korean
* zh: mandarin
* es: spanish
* fr: french
* pt: portuguese
* nl: dutch
*
* @defaultValue en
*/
defaultLanguage?: LANGUAGE_TYPE;
/**
theme
*
* @defaultValue auto
*/
mode?: THEME_MODE_TYPE;
/**
* Use logo loader
*
* @defaultValue false
*/
useLogoLoader?: boolean;
/**
* Used to customize theme of the login modal with following options
* `'primary'` - To customize primary color of modal's content.
*/
theme?: {
primary?: string;
gray?: string;
red?: string;
green?: string;
success?: string;
warning?: string;
error?: string;
info?: string;
white?: string;
};
/**
* Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
* e.g.
* tncLink: {
* en: "http://example.com/tnc/en",
* ja: "http://example.com/tnc/ja",
* }
*/
tncLink?: Partial<Record<LANGUAGE_TYPE, string>>;
/**
* Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure
* e.g.
* privacyPolicy: {
* en: "http://example.com/tnc/en",
* ja: "http://example.com/tnc/ja",
* }
*/
privacyPolicy?: Partial<Record<LANGUAGE_TYPE, string>>;
};
uiConfig: {
appName: "W3A Heroes",
mode: "dark", // light, dark or auto
loginMethodsOrder: ["apple", "google", "twitter"],
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
loginGridCol: 3,
primaryButton: "socialLogin", // "externalLogin" | "socialLogin" | "emailLogin"
},
Returns
Object
: The web3auth instance with all its methods and events.
Configuring Adapters
An adapter is a pluggable package that implements an IAdapter
interface for a wallet within
Web3Auth. An adapter can be plugged in and out of web3auth modal. Each adapter exposes the provider
on successful user login that can be used to invoke RPC calls on the wallet and on the connected
blockchain. Web3Auth's modal UI supports a set of default adapters depending on the
authMode
being used.
This step is generally optional. You don't have to configure any default adapter unless you want to override default configs for the adapter.
Only those adapters that are marked are nondefault
in this table on the Adapters Documentation
are required to be configured always based on the authMode
you are using.
Configuring Openlogin Adapter [Social Logins]
The default adapter of Web3Auth is the openlogin-adapter
. This
adapter is a wrapper around the openlogin
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 Openlogin Adapter.
Checkout the openlogin-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
openlogin-adapter
.
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 { OpenloginAdapter } from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
network: "sapphire_mainnet", // Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
uxMode: "popup",
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",
},
useLogoLoader: true,
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
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 loginoptional
: presents the MFA screen on every login, but you can skip itmandatory
: make it mandatory to set up MFA after loginnone
: skips the MFA setup screen
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
loginSettings: {
mfaLevel: "mandatory", // default, optional, mandatory, none
},
});
If you are using default verifiers, your users may have set up MFA on other dApps that also use default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
mfaSettings
For customising the MFA settings, you need to pass on mfaSettings
configurations to the
adapterSettings
property of the OpenloginAdapter
.
Read more about mfaSettings
in the Multi Factor Authentication Section SDK Reference.
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
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 Openlogin Adapter, which is the default
adapter for the Web3Auth SDK. For this, you need to configure the loginConfig
parameter in the
adapterSettings
of the openlogin-adapter
package.
Refer to the Custom Authentication Documentation for more information.
Usage
Since we're using the @web3auth/modal
, ie. the Plug and Play Modal SDK, the loginConfig
should
correspond to the socials mentioned in the modal. Here, we're customizing Google and Facebook to be
custom verified, rest of all other socials will be the default. You can customize other social
logins or remove them using the whitelabeling option.
- Discord
- Twitch
- Github
- Apple
- Line
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Google login
google: {
verifier: "YOUR_GOOGLE_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: "google", // Pass on the login provider of the verifier you've created
clientId: "GOOGLE_CLIENT_ID.apps.googleusercontent.com", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Facebook login
facebook: {
verifier: "YOUR_FACEBOOK_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
clientId: "FACEBOOK_CLIENT_ID_1234567890", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Discord login
discord: {
verifier: "YOUR_DISCORD_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: "discord", // Pass on the login provider of the verifier you've created
clientId: "DISCORD_CLIENT_ID_1234567890", //use your app client id you got from discord
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Facebook login
facebook: {
verifier: "YOUR_TWITCH_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: "twitch", // Pass on the login provider of the verifier you've created
clientId: "TWITCH_CLIENT_ID_1234567890", //use your app client id you got from twitch
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Twitter login
twitter: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since twitter login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "twitter",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since twitter login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// LinkedIn login
linkedin: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since linkedin login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "linkedin",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since linkedin login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Github login
github: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since github login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "github",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since github login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Apple login
apple: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since apple login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "apple",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since apple login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Line login
line: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since line login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "line",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since line login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
Configuring External Wallet Adapters
configureAdapter(ADAPTER)
To configure an adapter, create the instance of the adapter by using its corresponding package and
pass the returned adapter
instance in the configureAdapter
function.
Refer to the Adapters documentation to know more deeply about what adapters are available and how to configure them.
- Default EVM Adapters
- Default Solana Adapters
If you want to support All EVM External Wallets, your should use the Default External Adapter for EVM. This adapter supports MIPD (EIP6163) so all available wallets in the browser will automatically be detected as well.
- Import the
getDefaultExternalAdapters
from@web3auth/default-evm-adapter
package - Get all the adapters in the
adapters
variable as an array ofIAdapter
. - Iterate over the
adapters
array and configure each adapter usingconfigureAdapter
function.
import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter";
const adapters = await getDefaultExternalAdapters({
options: {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
},
});
adapters.forEach((adapter) => {
web3auth.configureAdapter(adapter);
});
If you want to support All Solana External Wallets, your should use the Default External Adapter for Solana.
- Import the
getDefaultExternalAdapters
from@web3auth/default-solana-adapter
package - Get all the adapters in the
adapters
variable as an array ofIAdapter
. - Iterate over the
adapters
array and configure each adapter usingconfigureAdapter
function.
import { getDefaultExternalAdapters } from "@web3auth/default-solana-adapter";
const adapters = await getDefaultExternalAdapters({
options: {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
},
});
adapters.forEach((adapter) => {
web3auth.configureAdapter(adapter);
});
Configuring Plugins
This step is totally optional. If you don't want to use any plugins, feel free to 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.
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 Modal
initModal()
The final step in the whole initialization process is the initialize the Modal from Web3Auth.
This is done by calling the initModal
function of the web3auth
instance we created above.
await web3auth.initModal(params);
Arguments
The web3auth.initModal
takes an optional params
config object as input.
params?: {
modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
}
This params
object further takes a modalConfig
object using which you can configure the
visibility of each adapter within the modal. Each modal config has the following configurations:
modalConfig
- Table
- Interface
modalConfig: { ADAPTER : { params } }
Parameter | Description |
---|---|
label | Label of the adapter you want to configure. It's a mandatory field which accepts string . |
showOnModal? | Whether to show an adapter in modal or not. Default value is true . |
showOnDesktop? | Whether to show an adapter in desktop or not. Default value is true . |
showOnMobile? | Whether to show an adapter in mobile or not. Default value is true . |
Additionally, to configure the Openlogin Adapter's each login method, we have the loginMethods?
parameter.
Parameter | Description |
---|---|
loginMethods? | To configure visibility of each social login method for the openlogin adapter. It accepts LoginMethodConfig as a value. |
initModal(params?: {
modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
}): Promise<void>;
interface ModalConfig extends BaseAdapterConfig {
loginMethods?: LoginMethodConfig;
}
interface BaseAdapterConfig {
label: string;
showOnModal?: boolean;
showOnMobile?: boolean;
showOnDesktop?: boolean;
}
loginMethods: { label: { params } }
In loginMethods
, you can configure the visibility of each social login method for the openlogin adapter. The social login is corresponded by the
label
parameter. Below is the table indicating the different params
available for customization.
For labels
you can choose between these options: google
, facebook
, twitter
, reddit
, discord
, twitch
, apple
, line
, github
, kakao
,
linkedin
, weibo
, wechat
, email_passwordless
- Table
- Type Declaration
params
Parameter | Description |
---|---|
name? | Display Name. It accepts string as a value. |
description? | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts string as a value. |
logoHover? | Logo to be shown on mouse hover. It accepts string as a value. |
logoLight? | Light logo for dark background. It accepts string as a value. |
logoDark? | Dark logo for light background. It accepts string as a value. |
mainOption? | Show login button on the main list. It accepts oolean as a value. Default value is false. |
showOnModal? | Whether to show the login button on modal or not. Default value is true. |
showOnDesktop? | Whether to show the login button on desktop. Default value is true. |
showOnMobile? | Whether to show the login button on mobile. Default value is true. |
declare type LoginMethodConfig = Record<
string,
{
/**
* Display Name. If not provided, we use the default for openlogin app
*/
name: string;
/**
* Description for button. If provided, it renders as a full length button. else, icon button
*/
description?: string;
/**
* Logo to be shown on mouse hover. If not provided, we use the default for openlogin app
*/
logoHover?: string;
/**
* Logo to be shown on dark background (dark theme). If not provided, we use the default for openlogin app
*/
logoLight?: string;
/**
* Logo to be shown on light background (light theme). If not provided, we use the default for openlogin app
*/
logoDark?: string;
/**
* Show login button on the main list
*/
mainOption?: boolean;
/**
* Whether to show the login button on modal or not
*/
showOnModal?: boolean;
/**
* Whether to show the login button on desktop
*/
showOnDesktop?: boolean;
/**
* Whether to show the login button on mobile
*/
showOnMobile?: boolean;
}
>;
Usage
- With Modal Configurations
- Without Modal Configurations
await web3auth.initModal({
modalConfig: {
[WALLET_ADAPTERS.OPENLOGIN]: {
label: "openlogin",
loginMethods: {
google: {
name: "google login",
logoDark: "url to your custom logo which will shown in dark mode",
},
facebook: {
// it will hide the facebook option from the Web3Auth modal.
name: "facebook login",
showOnModal: false,
},
},
// setting it to false will hide all social login methods from modal.
showOnModal: true,
},
},
});
await web3auth.initModal();
Quick Starts
PnP Modal SDK React Quick Start
A quick integration of Plug and Play Modal SDK in React
PnP Modal SDK Angular Quick Start
A quick integration of Plug and Play Modal SDK in angular
PnP Modal SDK Vue Quick Start
A quick integration of Plug and Play Modal SDK in Vue
PnP Modal SDK NextJS Quick Start
A quick integration of Plug and Play Modal SDK in NextJS
PnP Modal SDK Nuxt Quick Start
A quick integration of Plug and Play Modal SDK in Nuxt