Using PnP Web No Modal SDK

Once you've installed and successfully initialized Web3AuthNoModal, you can use it to authenticate your users. Further, you can use the native provider given by Web3AuthNoModal to connect the users to the respective blockchain network.

Natively, the instance of Web3AuthNoModal (referred to as web3auth in our examples) returns the following functions:

• connectTo() - Logging in the User with the given Wallet Adapter and respective Login Parameters.
• getUserInfo() - Getting the User's Information.
• enableMFA() - Enable Multi Factor Authentication for the user.
• authenticateUser() - Getting the idToken from Web3Auth.
• addChain() - Add chain config details to the connected adapter.
• switchChain() - Switch chain as per chainId already added to the chain config.
• logout() - Logging out the User.
• getAdapter() - Retrieve a specific wallet adapter by its name.
• configureAdapter() - Configure a new or existing adapter.
• clearCache() - Clear cached session information.

Additionally, the following methods and properties are available to get or modify information about the current state of the instance:

• connected - Returns true or false depending on whether the user is connected or not.
• status - Returns the current status of the web3auth instance.
• provider (getter/setter) - Returns or sets the currently connected provider to the web3auth instance.
• connectedAdapterName - Returns the name of the currently connected adapter.

You can also extend functionality by using the following plugin management functions:

• addPlugin() - Add a plugin to extend the functionality of the Web3Auth instance.
• getPlugin() - Retrieve an added plugin by name.

Finally, with the Wallet Services Plugin, you can enable additional functionalities like:

• showWalletUI() - Show Wallet UI Screen.
• initiateTopup() - Initiate Topup for the user.
• showWalletConnectScanner() - Show WalletConnect QR Code Scanner.

Logging in the User

connectTo()

To log a user in the Web3Auth Plug and Play No Modal SDK, you need to call the connectTo() function. This function helps you customize the login process according to your own needs, by taking the following parameters:

Table

Variable	Description
walletName	Wallet Adapter you want to use for logging in your user. It accepts WALLET_ADAPTER_TYPE.
loginParams?	Login parameters specific to your wallet adapter. Although this is defined as a generic type T, you can use AuthLoginParams as a reference for typical parameters.

Function Definition

  connectTo<T>(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise<IProvider | null>;

export declare const WALLET_ADAPTERS: {
  AUTH: string;
  WALLET_CONNECT_V2: string;
  SFA: string;
  TORUS_SOLANA: string;
  TORUS_EVM: string;
  COINBASE: string;
};
export type WALLET_ADAPTER_TYPE = (typeof WALLET_ADAPTERS)[keyof typeof WALLET_ADAPTERS];

export type AuthLoginParams = LoginParams & {
  login_hint?: string;
};

export type LoginParams = BaseRedirectParams & {
  /**
   * loginProvider sets the oauth login method to be used.
   * You can use any of the valid loginProvider from the supported list.
   */
  loginProvider: LOGIN_PROVIDER_TYPE | CUSTOM_LOGIN_PROVIDER_TYPE;
  /**
   * You can set the `mfaLevel` to customize when mfa screen should be shown to user.
   * It currently accepts 4 values:-
   * - `'default'`: Setting mfa level to `default` will present mfa screen to user on every third login.
   * - `'optional'`: Setting mfa level to `default` will present mfa screen to user on every login but user can skip it.
   * - `'mandatory'`: Setting mfa level to `mandatory` will make it mandatory for user to setup mfa after login.
   * - `'none'`: Setting mfa level to `none` will make the user skip the mfa setup screen
   *
   * Defaults to `none`
   * @defaultValue `none`
   */
  mfaLevel?: MfaLevelType;
  /**
   * This option is for internal use only in torus wallet and has no effect
   * on user's login on other dapps.
   *
   * Defaults to false
   * @defaultValue false
   * @internal
   */
  getWalletKey?: boolean;
  /**
   * extraLoginOptions can be used to pass standard oauth login options to
   * loginProvider.
   *
   * For ex: you will have to pass `login_hint` as user's email and `domain`
   * as your app domain in `extraLoginOptions` while using `email_passwordless`
   * loginProvider
   */
  extraLoginOptions?: ExtraLoginOptions;
  /**
   * Custom Logins can get a dapp share returned to them post successful login.
   * This is useful if the dapps want to use this share to allow users to login seamlessly
   * dappShare is a 24 word seed phrase
   */
  dappShare?: string;
  /**
   * This curve will be used to determine the public key encoded in the jwt token which returned in
   * `getUserInfo` function after user login.
   * You can use that public key from jwt token as a unique user identifier in your backend.
   *
   * - `'secp256k1'`: secp256k1 based pub key is added as a wallet public key in jwt token to use.
   * - `'ed25519'`: ed25519 based pub key is added as a wallet public key in jwt token to use.
   *
   * Note: This parameter won't change format of private key returned by auth. Private key returned
   * by auth is always `secp256k1`.
   *
   *
   * @defaultValue secp256k1
   */
  curve?: SUPPORTED_KEY_CURVES_TYPE;
  /**
   * Allows the dapp to set a custom redirect url for the manage mfa flow.
   *
   */
  dappUrl?: string;
};

Returns

connectTo<T>(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise<IProvider | null>;

• On successful login, the connectTo() function returns a IProvider instance. This instance contains the respective provider corresponding to your selected blockchain. You can use this provider to connect your user to the blockchain and make transactions.

• On unsuccessful login, this function will return a null value.

Usage

Google

import { WALLET_ADAPTERS } from "@web3auth/base";
// inside your async function with on click handler
const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "google",
});

Auth0

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "jwt",
  extraLoginOptions: {
    verifierIdField: "sub", // same as your JWT Verifier ID
    domain: "https://YOUR-APPLICATION-DOMAIN", // your service provider domain, e.g. Auth0
  },
});

Farcaster

import { WALLET_ADAPTERS } from "@web3auth/base";
// inside your async function with on click handler
const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "farcaster",
});

JWT

// Login using JWT, either obtained from Firebase, Okta, Auth0 or bring your own JWT.
const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "jwt",
  extraLoginOptions: {
    id_token: "idToken", // in JWT Format
    verifierIdField: "sub", // same as your JWT Verifier ID
  },
});

Facebook

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "facebook",
});

Discord

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "email_passwordless",
  extraLoginOptions: {
    login_hint: "hello@web3auth.io", // email to send the OTP to
  },
});

Email Passwordless

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "sms_passwordless",
  extraLoginOptions: {
    login_hint: "+65-XXXXXXX",
  },
});

SMS Passwordless

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "discord",
});

Twitter

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "twitter",
});

Reddit

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "reddit",
});

Twitch

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "twitch",
});

Apple

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "apple",
});

GitHub

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "github",
});

LinkedIn

import { WALLET_ADAPTERS } from "@web3auth/base";

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "linkedin",
});

tip

You can use the connectTo() function to connect to the custom authentication verifiers you might have deployed on the Web3Auth Dashboard, as well as the default ones that Web3Auth provides. For the default verifiers, you don't need to provide any additional parameters, just pass on the login provider type.

tip

Read more about connecting your users with the selected blockchain in the Providers SDK Reference.

Wallet Adapter Name

walletName

Table

Variable	Value	Description
MULTI_CHAIN_ADAPTERS	AUTH, WALLET_CONNECT_V2, SFA	Multi-chain adapters for Auth.
SOLANA_ADAPTERS	AUTH, WALLET_CONNECT_V2, SFA, TORUS_SOLANA	Solana adapters for Auth.
EVM_ADAPTERS	AUTH, WALLET_CONNECT_V2, SFA, TORUS_EVM, COINBASE	EVM adapters for Auth.
WALLET_ADAPTERS	AUTH, WALLET_CONNECT_V2, SFA, TORUS_SOLANA, TORUS_EVM, COINBASE	All wallet adapters for Auth.
WALLET_ADAPTER_TYPE	WALLET_ADAPTERS[keyof WALLET_ADAPTERS]	Type for wallet adapters.
SOLANA_ADAPTER_TYPE	SOLANA_ADAPTERS[keyof SOLANA_ADAPTERS]	Type for Solana adapters.
EVM_ADAPTER_TYPE	EVM_ADAPTERS[keyof EVM_ADAPTERS]	Type for EVM adapters.
MULTI_CHAIN_ADAPTER_TYPE	MULTI_CHAIN_ADAPTERS[keyof MULTI_CHAIN_ADAPTERS]	Type for multi-chain adapters.
ADAPTER_NAMES	{ [adapter: string]: string }	Adapter names for Auth.

Type Declaration

export declare const MULTI_CHAIN_ADAPTERS: {
  AUTH: string;
  WALLET_CONNECT_V2: string;
  SFA: string;
};
export declare const SOLANA_ADAPTERS: {
  AUTH: string;
  WALLET_CONNECT_V2: string;
  SFA: string;
  TORUS_SOLANA: string;
};
export declare const EVM_ADAPTERS: {
  AUTH: string;
  WALLET_CONNECT_V2: string;
  SFA: string;
  TORUS_EVM: string;
  COINBASE: string;
};
export declare const WALLET_ADAPTERS: {
  AUTH: string;
  WALLET_CONNECT_V2: string;
  SFA: string;
  TORUS_SOLANA: string;
  TORUS_EVM: string;
  COINBASE: string;
};
export type WALLET_ADAPTER_TYPE = (typeof WALLET_ADAPTERS)[keyof typeof WALLET_ADAPTERS];
export type SOLANA_ADAPTER_TYPE = (typeof SOLANA_ADAPTERS)[keyof typeof SOLANA_ADAPTERS];
export type EVM_ADAPTER_TYPE = (typeof EVM_ADAPTERS)[keyof typeof EVM_ADAPTERS];
export type MULTI_CHAIN_ADAPTER_TYPE =
  (typeof MULTI_CHAIN_ADAPTERS)[keyof typeof MULTI_CHAIN_ADAPTERS];
export declare const ADAPTER_NAMES: {
  [x: string]: string;
};

Login Parameters

loginParams

The loginParams are specific for each and every function. Please refer to the Adapters SDK Reference to know more about the login parameters specific to each wallet adapter.

For auth-adapter which enables social logins, you can refer to the following loginParams.

Table

LoginSettings

Variable	Description
loginProvider	loginProvider sets the oauth login method to be used. You can use any of the valid loginProvider from the supported list.
mfaLevel	You can set the mfaLevel to customize when mfa screen should be shown to user. It currently accepts 4 values:- - 'default': Setting mfa level to default will present mfa screen to user on every third login. - 'optional': Setting mfa level to default will present mfa screen to user on every login but user can skip it. - 'mandatory': Setting mfa level to mandatory will make it mandatory for user to setup mfa after login. - 'none': Setting mfa level to none will make the user skip the mfa setup screen Defaults to none @defaultValue none
getWalletKey	This option is for internal use only in torus wallet and has no effect on user's login on other dapps. Defaults to false @defaultValue false @internal
extraLoginOptions	extraLoginOptions can be used to pass standard oauth login options to loginProvider. For ex: you will have to pass login_hint as user's email and domain as your app domain in extraLoginOptions while using email_passwordless loginProvider
dappShare	Custom Logins can get a dapp share returned to them post successful login. This is useful if the dapps want to use this share to allow users to login seamlessly dappShare is a 24 word seed phrase
curve	This curve will be used to determine the public key encoded in the jwt token which returned in getUserInfo function after user login. You can use that public key from jwt token as a unique user identifier in your backend. - 'secp256k1': secp256k1 based pub key is added as a wallet public key in jwt token to use. - 'ed25519': ed25519 based pub key is added as a wallet public key in jwt token to use. Note: This parameter won't change format of private key returned by auth. Private key returned by auth is always secp256k1.
dappUrl	Allows the dapp to set a custom redirect url for the manage mfa flow.

Type Declaration

export type LoginSettings = Partial<LoginParams> & Partial<BaseRedirectParams>;

export type LoginParams = BaseRedirectParams & {
  /**
   * loginProvider sets the oauth login method to be used.
   * You can use any of the valid loginProvider from the supported list.
   */
  loginProvider: LOGIN_PROVIDER_TYPE | CUSTOM_LOGIN_PROVIDER_TYPE;
  /**
   * You can set the `mfaLevel` to customize when mfa screen should be shown to user.
   * It currently accepts 4 values:-
   * - `'default'`: Setting mfa level to `default` will present mfa screen to user on every third login.
   * - `'optional'`: Setting mfa level to `default` will present mfa screen to user on every login but user can skip it.
   * - `'mandatory'`: Setting mfa level to `mandatory` will make it mandatory for user to setup mfa after login.
   * - `'none'`: Setting mfa level to `none` will make the user skip the mfa setup screen
   *
   * Defaults to `none`
   * @defaultValue `none`
   */
  mfaLevel?: MfaLevelType;
  /**
   * This option is for internal use only in torus wallet and has no effect
   * on user's login on other dapps.
   *
   * Defaults to false
   * @defaultValue false
   * @internal
   */
  getWalletKey?: boolean;
  /**
   * extraLoginOptions can be used to pass standard oauth login options to
   * loginProvider.
   *
   * For ex: you will have to pass `login_hint` as user's email and `domain`
   * as your app domain in `extraLoginOptions` while using `email_passwordless`
   * loginProvider
   */
  extraLoginOptions?: ExtraLoginOptions;
  /**
   * Custom Logins can get a dapp share returned to them post successful login.
   * This is useful if the dapps want to use this share to allow users to login seamlessly
   * dappShare is a 24 word seed phrase
   */
  dappShare?: string;
  /**
   * This curve will be used to determine the public key encoded in the jwt token which returned in
   * `getUserInfo` function after user login.
   * You can use that public key from jwt token as a unique user identifier in your backend.
   *
   * - `'secp256k1'`: secp256k1 based pub key is added as a wallet public key in jwt token to use.
   * - `'ed25519'`: ed25519 based pub key is added as a wallet public key in jwt token to use.
   *
   * Note: This parameter won't change format of private key returned by auth. Private key returned
   * by auth is always `secp256k1`.
   *
   *
   * @defaultValue secp256k1
   */
  curve?: SUPPORTED_KEY_CURVES_TYPE;
  /**
   * Allows the dapp to set a custom redirect url for the manage mfa flow.
   *
   */
  dappUrl?: string;
};

export type BaseRedirectParams = {
  /**
   * redirectUrl is the dapp's url where user will be redirected after login.
   *
   * @remarks
   * Register this url at {@link "https://dashboard.web3auth.io"| developer dashboard}
   * else initialization will give error.
   */
  redirectUrl?: string;
  /**
   * Any custom state you wish to pass along. This will be returned to you post redirect.
   * Use this to store data that you want to be available to the dapp after login.
   */
  appState?: string;
};

/**
 * {@label loginProviderType}
 */
export type LOGIN_PROVIDER_TYPE = (typeof LOGIN_PROVIDER)[keyof typeof LOGIN_PROVIDER];
export declare const LOGIN_PROVIDER: {
  readonly GOOGLE: "google";
  readonly FACEBOOK: "facebook";
  readonly REDDIT: "reddit";
  readonly DISCORD: "discord";
  readonly TWITCH: "twitch";
  readonly APPLE: "apple";
  readonly LINE: "line";
  readonly GITHUB: "github";
  readonly KAKAO: "kakao";
  readonly LINKEDIN: "linkedin";
  readonly TWITTER: "twitter";
  readonly WEIBO: "weibo";
  readonly WECHAT: "wechat";
  readonly FARCASTER: "farcaster";
  readonly EMAIL_PASSWORDLESS: "email_passwordless";
  readonly SMS_PASSWORDLESS: "sms_passwordless";
  readonly WEBAUTHN: "webauthn";
  readonly JWT: "jwt";
};

export type CUSTOM_LOGIN_PROVIDER_TYPE = string & {
  toString?: (radix?: number) => string;
};

/**
 * {@label MfaLevelType}
 */

export type MfaLevelType = (typeof MFA_LEVELS)[keyof typeof MFA_LEVELS];
export declare const MFA_LEVELS: {
  readonly DEFAULT: "default";
  readonly OPTIONAL: "optional";
  readonly MANDATORY: "mandatory";
  readonly NONE: "none";
};

/**
 * {@label SUPPORTED_KEY_CURVES_TYPE}
 */

export type SUPPORTED_KEY_CURVES_TYPE =
  (typeof SUPPORTED_KEY_CURVES)[keyof typeof SUPPORTED_KEY_CURVES];
export declare const SUPPORTED_KEY_CURVES: {
  readonly SECP256K1: "secp256k1";
  readonly ED25519: "ed25519";
};

Further, for Custom Authentication, ExtraLoginOptions can be used to pass the standard OAuth login options.

Table

ExtraLoginOptions

Parameter	Description
domain	Your Auth0 account domain such as 'example.auth0.com', 'example.eu.auth0.com' or , 'example.mycompany.com' (when using custom domains)
client_id	The Client ID found on your Application settings page
redirect_uri	The default URL where Auth0 will redirect your browser to with the authentication result. It must be whitelisted in the "Allowed Callback URLs" field in your Auth0 Application's settings. If not provided here, it should be provided in the other methods that provide authentication.
leeway	The value in seconds used to account for clock skew in JWT expirations. Typically, this value is no more than a minute or two at maximum. Defaults to 60s.
verifierIdField	The field in jwt token which maps to verifier id
isVerifierIdCaseSensitive	Whether the verifier id field is case sensitive
additionalParams	If you need to send custom parameters to the Authorization Server, make sure to use the original parameter name.
display	- 'page': displays the UI with a full page view - 'popup': displays the UI with a popup window - 'touch': displays the UI in a way that leverages a touch interface - 'wap': displays the UI with a "feature phone" type interface
prompt	- 'none': do not prompt user for login or consent on re-authentication - 'login': prompt user for re-authentication - 'consent': prompt user for consent before processing request - 'select_account': prompt user to select an account
max_age	Maximum allowable elapsed time (in seconds) since authentication. If the last time the user authenticated is greater than this value, the user must be re-authenticated.
ui_locales	The space-separated list of language tags, ordered by preference. For example: 'fr-CA fr en'.
id_token_hint	Previously issued ID Token.
login_hint	The user's email address or other identifier. When your app knows which user is trying to authenticate, you can provide this parameter to pre-fill the email box or select the right session for sign-in. This currently only affects the classic Lock experience.
acr_values
scope	The default scope to be used on authentication requests. The defaultScope defined in the Auth0Client is included along with this scope
audience	The default audience to be used for requesting API access.
connection	The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget.

Interface

export interface ExtraLoginOptions extends BaseLoginOptions {
  /**
   * Your Auth0 account domain such as `'example.auth0.com'`,
   * `'example.eu.auth0.com'` or , `'example.mycompany.com'`
   * (when using [custom domains](https://auth0.com/docs/custom-domains))
   */
  domain?: string;
  /**
   * The Client ID found on your Application settings page
   */
  client_id?: string;
  /**
   * The default URL where Auth0 will redirect your browser to with
   * the authentication result. It must be whitelisted in
   * the "Allowed Callback URLs" field in your Auth0 Application's
   * settings. If not provided here, it should be provided in the other
   * methods that provide authentication.
   */
  redirect_uri?: string;
  /**
   * The value in seconds used to account for clock skew in JWT expirations.
   * Typically, this value is no more than a minute or two at maximum.
   * Defaults to 60s.
   */
  leeway?: number;
  /**
   * The field in jwt token which maps to verifier id
   */
  verifierIdField?: string;
  /**
   * Whether the verifier id field is case sensitive
   * @defaultValue true
   */
  isVerifierIdCaseSensitive?: boolean;
}
export interface BaseLoginOptions {
  /**
   * If you need to send custom parameters to the Authorization Server,
   * make sure to use the original parameter name.
   */
  [key: string]: unknown;
  /**
   * - `'page'`: displays the UI with a full page view
   * - `'popup'`: displays the UI with a popup window
   * - `'touch'`: displays the UI in a way that leverages a touch interface
   * - `'wap'`: displays the UI with a "feature phone" type interface
   */
  display?: "page" | "popup" | "touch" | "wap" | string;
  /**
   * - `'none'`: do not prompt user for login or consent on re-authentication
   * - `'login'`: prompt user for re-authentication
   * - `'consent'`: prompt user for consent before processing request
   * - `'select_account'`: prompt user to select an account
   */
  prompt?: "none" | "login" | "consent" | "select_account" | string;
  /**
   * Maximum allowable elapsed time (in seconds) since authentication.
   * If the last time the user authenticated is greater than this value,
   * the user must be re-authenticated.
   */
  max_age?: string | number;
  /**
   * The space-separated list of language tags, ordered by preference.
   * For example: `'fr-CA fr en'`.
   */
  ui_locales?: string;
  /**
   * Previously issued ID Token.
   */
  id_token_hint?: string;
  /**
   * The user's email address or other identifier. When your app knows
   * which user is trying to authenticate, you can provide this parameter
   * to pre-fill the email box or select the right session for sign-in.
   *
   * This currently only affects the classic Lock experience.
   */
  login_hint?: string;
  acr_values?: string;
  /**
   * The default scope to be used on authentication requests.
   * The defaultScope defined in the Auth0Client is included
   * along with this scope
   */
  scope?: string;
  /**
   * The default audience to be used for requesting API access.
   */
  audience?: string;
  /**
   * The name of the connection configured for your application.
   * If null, it will redirect to the Auth0 Login Page and show
   * the Login Widget.
   */
  connection?: string;
}

Check if the user is connected

connected

You can check if the user is connected to the blockchain by calling the connected method on the web3auth instance. This property method a boolean value.

const isConnected = web3auth.connected;

Returns

connected: boolean;

tip

If you're using the uxMode: "redirect" option within your configuration, you need to check this event to handle the logging in implicitly. This is because, when redirected to a different application, the app state is not updated as per the login status.

Using this method, you can check if the user is connected and update the app state accordingly within the constructor.

Check which adapter is connected

connectedAdapterName

This function gives you the name of the connected adapter. This can be used to check which adapter is connected to the user.

const adapter = web3auth.connectedAdapterName;

Returns

connectedAdapterName: WALLET_ADAPTER_TYPE | null;

export type WALLET_ADAPTER_TYPE = (typeof WALLET_ADAPTERS)[keyof typeof WALLET_ADAPTERS];

export declare const WALLET_ADAPTERS: {
  AUTH: string;
  WALLET_CONNECT_V2: string;
  SFA: string;
  TORUS_SOLANA: string;
  TORUS_EVM: string;
  COINBASE: string;
};

• If a user is connected, it will return the name of the adapter via which the login has happened.
• If connecting via MIPD (EIP6163) in default evm/ solana adapters, it will return the name of the wallet connected.
• If no user is connected, this function will return a null value.

Get the connected provider

provider

Returns the private key provider connected to the web3auth instance.

Returns

provider: IProvider | null;

• If a user is connected, it will return the provider instance connected to the user.
• If no user is connected, however, the initialisation of the web3auth instance is done, it will return the provider instance, however the provider cannot be used for any operations.
• If no user is connected and the web3auth instance is not initialised, it will return a null value.

note

To know more in-depth about providers, have a look at the Providers reference.

Know the current status of the instance

status

Returns the current status of the web3auth instance.

const status = web3auth.status;

An adapter emits certain events like CONNECTED, CONNECTING and DISCONNECTED etc during login lifecycle of a user. Knowing to events help you trigger responses based on the status of the connection of the user. For example, you can use this to show an error message, if the user is not connected to the network.

Web3Auth provides the following lifecycle event to check the login status:

Table

Event	Description
NOT_READY	Triggered when the adapter is not ready.
READY	Triggered when the adapter is ready.
CONNECTING	Triggered when the user is connecting to the wallet.
CONNECTED	Triggered when the user is connected to the wallet.
ERRORED	Triggered when an error occurs during the login lifecycle.

Type Declarations

export declare const ADAPTER_STATUS: {
  readonly NOT_READY: "not_ready";
  readonly READY: "ready";
  readonly CONNECTING: "connecting";
  readonly CONNECTED: "connected";
  readonly ERRORED: "errored";
};

Get User's Information

getUserInfo()

You can get the information about connected user by calling getUserInfo() function.

note

This function will only return information based on the connected adapter. These details are not stored anywhere and are fetched from the adapter during the connection and remain in the session.

await web3auth.getUserInfo();

Returns

Table

Variable	Type	Description
email	string	Email of the user.
name	string	Name of the user.
profileImage	string	Profile image of the user.
aggregateVerifier	string	Aggregate verifier of the user.
verifier	string	Verifier of the user.
verifierId	string	Verifier ID of the user.
typeOfLogin	string	Type of login provider.
dappShare	string	Dapp share of the user.
idToken	string	Token issued by Web3Auth.
oAuthIdToken	string	Token issued by OAuth provider. Will be available only if you are using custom verifiers.
oAuthAccessToken	string	Access Token issued by OAuth provider. Will be available only if you are using custom verifiers.
appState	string	App state of the user.
touchIDPreference	string	Touch ID preference of the user.
isMfaEnabled	boolean	Whether Multi Factor Authentication is enabled for the user.

Type Declarations

getUserInfo(): Promise<Partial<AuthUserInfo>>;

declare type UserInfo = AuthUserInfo;

export type AuthUserInfo = {
  email?: string;
  name?: string;
  profileImage?: string;
  aggregateVerifier?: string;
  verifier: string;
  verifierId: string;
  typeOfLogin: LOGIN_PROVIDER_TYPE | CUSTOM_LOGIN_PROVIDER_TYPE;
  dappShare?: string;
  /**
   * Token issued by Web3Auth.
   */
  idToken?: string;
  /**
   * Token issued by OAuth provider. Will be available only if you are using
   * custom verifiers.
   */
  oAuthIdToken?: string;
  /**
   * Access Token issued by OAuth provider. Will be available only if you are using
   * custom verifiers.
   */
  oAuthAccessToken?: string;
  appState?: string;
  touchIDPreference?: string;
  isMfaEnabled?: boolean;
};

Sample Response

{
  "email": "john@gmail.com",
  "name": "John Dash",
  "profileImage": "https://lh3.googleusercontent.com/a/Ajjjsdsmdjmnm...",
  "aggregateVerifier": "tkey-google-lrc",
  "verifier": "torus",
  "verifierId": "john@gmail.com",
  "typeOfLogin": "google",
  "dappShare": "<24 words seed phrase>", // will be sent only incase of custom verifiers
  "idToken": "<jwtToken issued by Web3Auth>",
  "oAuthIdToken": "<jwtToken issued by OAuth Provider>", // will be sent only incase of custom verifiers
  "oAuthAccessToken": "<accessToken issued by OAuth Provider>" // will be sent only incase of custom verifiers
}

Enable Multi Factor Authentication (MFA)

enableMFA()

You can enable Multi Factor Authentication for the user by calling the enableMFA() function. This function will trigger a redirect to the MFA setup page, where the user will be asked to login again and set up the MFA Methods according to the configuration set in the web3auth instance.

await web3auth.enableMFA();

Interface

enableMFA<T>(loginParams?: T): Promise<void>;

Get idToken

authenticateUser()

You can get the idToken from Web3Auth by calling authenticateUser() function.

note

This function will only return information based on the connected adapter. These details are not stored anywhere and are fetched from the adapter during the connection and remain in the session.

await web3auth.authenticateUser();

Returns

Social Login

Table

Parameter	Type	Description
iat	number	The "iat" (issued at) claim identifies the time at which the JWT was issued.
aud	string	The "aud" (audience) claim identifies the recipients that the JWT is intended for. (Here, it's the dapp client_id)
iss	string	The "iss" (issuer) claim identifies who issued the JWT. (Here, it's Web3Auth https://api.openlogin.com/)
email	string	The email address of the user (optional)
name	string	The name of the user (optional)
profileImage	string	The profile image of the user (optional)
verifier	string	Web3auth's verifier used while user login
verifierId	string	Unique user id given by OAuth login provider
aggregateVerifier	string	Name of the verifier if you are using a single id verifier (aggregateVerifier) (optional)
exp	number	The "exp" (expiration time) claim identifies the expiration time on or after which the JWT MUST NOT be accepted for processing.
wallets	array	list of wallets for which this token is issued: curve "secp256k1" (default) or "ed25519" You can specify which curve you want use for the encoded public key in the login parameters type "web3auth_key" incase of social logins public_key compressed public key derived based on the specified curve

Type Declarations

authenticateUser(): Promise<UserAuthInfo>

export type UserAuthInfo = { idToken: string };

Sample Response

{
  "iat": 1655835494,
  "aud": "BCtbnOamqh0cJFEUYA0NB5YkvBECZ3HLZsKfvSRBvew2EiiKW3UxpyQASSR0artjQkiUOCHeZ_ZeygXpYpxZjOs",
  "iss": "https://api.openlogin.com/",
  "email": "xyz@xyz.com",
  "name": "John Doe",
  "profileImage": "https://lh3.googleusercontent.com/a/AATXAJx3lnGmHiM4K97uLo9Rb0AxOceH-dQCBSRqGbck=s96-c",
  "verifier": "torus",
  "verifierId": "xyz@xyz.com",
  "aggregateVerifier": "tkey-google-lrc",
  "exp": 1655921894,
  "wallets": [
    {
      "public_key": "035143318b83eb5d31611f8c03582ab1200494f66f5e11a67c34f5581f48c1b70b",
      "type": "web3auth_key",
      "curve": "secp256k1"
    }
  ]
}

External Wallet

Table

Parameter	Type	Description
iat	number	The "iat" (issued at) claim identifies the time at which the JWT was issued.
aud	string	The "audience" claim identifies the recipients that the JWT is intended for. (Here, it's website's url)
iss	string	The "issuer" claim identifies who issued the JWT. Here, issuer could be torus-evm, torus-solana, metamask, phantom, walletconnect-v1, coinbase, solflare
wallets	array	list of wallets for which this token is issued: address : Wallet public address type Network Type such as "ethereum", "solana" or "starkware" incase of external wallets

Type Declarations

authenticateUser(): Promise<UserAuthInfo>

export type UserAuthInfo = { idToken: string };

Sample Response

{
  "iat": 1661158877,
  "issuer": "<issuer-name>",
  "audience": "https://requesting.website",
  "wallets": [
    {
      "address": "0x809d4310d578649d8539e718030ee11e603ee8f3",
      "type": "ethereum"
    }
  ],
  "exp": 1661245277
}

Add Chain

addChain()

To add a chain config to a connected adapter, you need to call addChain() function. This function helps you add the chain config by taking the following parameter:

Table

Variable	Description
chainConfig	CustomChainConfig for the chain you want to add.

Function Definition

async addChain(chainConfig: CustomChainConfig): Promise<void> {
    if (this.status !== ADAPTER_STATUS.CONNECTED || !this.connectedAdapterName) throw WalletLoginError.notConnectedError(`No wallet is connected`);
    return this.walletAdapters[this.connectedAdapterName].addChain(chainConfig);
}

export type CustomChainConfig = {
  chainNamespace: ChainNamespaceType;
  /**
   * The chain id of the chain
   */
  chainId: string;
  /**
   * RPC target Url for the chain
   */
  rpcTarget: 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 chain
   */
  logo: string;
  /**
   * Whether the network is testnet or not
   */
  isTestnet?: boolean;
};

await web3auth.addChain({
  chainId: "0xaa36a7",
  displayName: "Ethereum Sepolia",
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  tickerName: "Sepolia",
  ticker: "ETH",
  decimals: 18,
  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
  blockExplorerUrl: "https://sepolia.etherscan.io",
  logo: "https://images.toruswallet.io/eth.svg",
  isTestnet: true,
});

Switch Chain

switchChain()

To switch the Chain to the added chain config, you need to call switchChain() function. This function takes the following parameter:

Table

Variable	Description
{ chainId: "0xaa36a7" }	chainId of the added chain config, e.g { chainId: "0xaa36a7" }

Function Definition

async switchChain(params: { chainId: string }): Promise<void> {
    if (this.status !== ADAPTER_STATUS.CONNECTED || !this.connectedAdapterName) throw WalletLoginError.notConnectedError(`No wallet is connected`);
    return this.walletAdapters[this.connectedAdapterName].switchChain(params);
}

await web3auth.switchChain({ chainId: "0xaa36a7" });

Logging out the User

web3auth.logout()

You can disconnect from connected wallet using logout function.

await web3auth.logout();

Type Reference

logout(options?: { cleanup: boolean; }): Promise<void>;

Connecting to a Blockchain

For Connecting to Blockchain and making RPC calls within your dApp, you can use the IProvider instance returned while logging in the user. This instance gives you the respective provider for your selection of blockchain. This provider can be used to interact with the connected chain using exposed functions within the provider.

Web3Auth is chain agnostic, ie. be it any chain you're connecting to, you can use Web3Auth to connect to it. You can use the EVM or Solana provider, that contain the native functions to connect to the blockchain or use the private key directly to connecting to the respective blockchain.

Currently web3auth supports providers for both EVM and Solana chains. For other chains, one can easily get the private key from the base provider from Web3Auth.

tip

Checkout the Providers SDK Reference to learn more.

• For EVM based Chains @web3auth/ethereum-provider
• For Solana Blockchain @web3auth/solana-provider
• Default Provider for all other Blockchains

Fetching the Connected Adapter

connectedAdapterName

This function gives you the name of the connected adapter. This can be used to check which adapter is connected to the user.

const adapter = web3auth.connectedAdapterName;

Returns

connectedAdapterName: WALLET_ADAPTER_TYPE | null;

export type WALLET_ADAPTER_TYPE = (typeof WALLET_ADAPTERS)[keyof typeof WALLET_ADAPTERS];

export declare const WALLET_ADAPTERS: {
  AUTH: string;
  WALLET_CONNECT_V2: string;
  SFA: string;
  TORUS_SOLANA: string;
  TORUS_EVM: string;
  COINBASE: string;
};

• If a user is connected, it will return the name of the adapter via which the login has happened.
• If connecting via MIPD (EIP6163) in default evm/ solana adapters, it will return the name of the wallet connected.
• If no user is connected, this function will return a null value.

Wallet Services Plugin Methods

You can use the Wallet Services Plugin to enable additional functionalities like showing the Wallet UI Screen, Wallet Connect Scanner, and initiating topup for the user.

tip

Learn more about the Wallet Services Plugin in the Wallet Services SDK Reference.

Show WalletConnect Scanner

You can use the showWalletConnectScanner function to show the Wallet Connect Scanner, and connect with dApps having Wallet Connect login option. This is useful for interoperability with dApps having Wallet Connect login option. Learn more about showWalletConnectScanner.

Fiat On Ramp

You can use the showCheckout function to show the TopUp modal, allowing users to select their local currency and specify the token to top up their wallet. Learn more about showCheckout.

Embedded Wallet UI

You can use the showWalletUI function to show the templated wallet UI services. Learn more about showWalletUI.

Transaction Confirmatons Screen

You can use the wallet services provider to integrate prebuilt transaction confirmation screens into your application. Upon successful completion, you can retrieve the signature for the request. Learn more about transaction confirmation screens.