React Hooks for PnP No Modal SDK
Web3Auth provides essential React hooks for Web3Auth No Modal SDK for managing authentication, chain
configuration, and user interactions within your application. These hooks can be directly imported
from the @web3auth/no-modal-react-hooks
package. Here's an example of how to import them:
import { useWeb3Auth } from "@web3auth/no-modal-react-hooks";
For more information on React hooks, refer to the official React documentation.
Available Hooks
useWeb3Auth
: Provides access to the Web3Auth context initialized via theWeb3AuthProvider
component.
Hook Context Interface
- Table
- Interface
Parameter | Description |
---|---|
isConnected | Indicates whether a user is currently logged in or not. |
provider | The current provider, or null if not connected. |
userInfo | Information about the logged-in user. |
isMFAEnabled | Indicates whether Multi-Factor Authentication (MFA) is enabled or not. |
isInitialized | Indicates whether Web3Auth has been initialized or not. |
status | The current status of Web3Auth. Can take the following values: NOT_READY , READY , CONNECTING , CONNECTED , DISCONNECTED , ERRORED . |
enableMFA(params?) | Enables Multi-Factor Authentication for the user. Returns a Promise. |
logout(params?) | Logs out the user, with an optional cleanup parameter. Returns a Promise. |
addAndSwitchChain | Adds and switches to a new blockchain. Takes chainConfig of type CustomChainConfig as a parameter. Returns a Promise. |
addPlugin | Adds a plugin to the Web3Auth instance. Takes a plugin of type IPlugin as a parameter. |
getPlugin | Retrieves a plugin by name. Takes pluginName of type string as parameter. Returns an IPlugin or null . |
authenticateUser | Retrieves the idToken for the logged-in user. Returns a Promise. |
addChain | Adds a new blockchain configuration. Takes chainConfig of type CustomChainConfig as a parameter. Returns a Promise. |
switchChain | Switches to a specified blockchain by chain ID. Takes params of type { chainId: string } as a parameter. Returns a Promise. |
interface IBaseWeb3AuthHookContext {
/**
* Indicates whether a user is currently logged in or not.
*/
isConnected: boolean;
/**
* The current provider, or `null` if not connected.
*/
provider: IProvider | null;
/**
* Information about the logged-in user.
*/
userInfo: Partial<AuthUserInfo> | null;
/**
* Indicates whether Multi-Factor Authentication (MFA) is enabled or not.
*/
isMFAEnabled: boolean;
/**
* Indicates whether Web3Auth has been initialized or not.
*/
isInitialized: boolean;
/**
* The current status of the Web3Auth adapter.
*/
status: ADAPTER_STATUS_TYPE | null;
/**
* Enables Multi-Factor Authentication for the user.
* @param params - Optional login parameters.
* @returns A Promise that resolves when the MFA is enabled.
*/
enableMFA(params?: LoginParams): Promise<void>;
/**
* Logs out the user, optionally performing cleanup.
* @param params - Optional cleanup parameter.
* @returns A Promise that resolves when the user is logged out.
*/
logout(params?: { cleanup: boolean }): Promise<void>;
/**
* Adds a new blockchain configuration and switches to it.
* @param chainConfig - The configuration for the new blockchain.
* @returns A Promise that resolves when the chain is added and switched to.
*/
addAndSwitchChain(chainConfig: CustomChainConfig): Promise<void>;
/**
* Adds a plugin to the Web3Auth instance.
* @param plugin - The plugin to add.
*/
addPlugin(plugin: IPlugin): void;
/**
* Retrieves a plugin by name.
* @param pluginName The name of the plugin.
* @returns The plugin instance or `null` if not found.
*/
getPlugin(pluginName: string): IPlugin | null;
/**
* Retrieves the idToken for the logged-in user.
* @returns A Promise that resolves with the authenticated user's information.
*/
authenticateUser(): Promise<UserAuthInfo>;
/**
* Adds a new blockchain configuration.
* @param chainConfig Configuration for the new blockchain.
* @returns A Promise that resolves when the chain is added.
*/
addChain(chainConfig: CustomChainConfig): Promise<void>;
/**
* Switches to a specified blockchain by chain ID.
* @param params Parameters for switching the chain.
* @returns A Promise that resolves when the chain is switched.
*/
switchChain(params: { chainId: string }): Promise<void>;
}
Web3AuthProvider
The Web3AuthProvider
component wraps the main component and injects the Web3Auth-related context
into it. It takes the following properties as its context:
- Table
- Interface
Parameter | Description |
---|---|
web3AuthOptions | Configuration options for Web3Auth. |
adapters | An array of adapters for connecting to different blockchain networks. |
plugins | An array of plugins to add additional functionality to Web3Auth. |
export interface Web3AuthProviderProps {
config: Web3AuthContextConfig;
}
export type Web3AuthContextConfig = {
web3AuthOptions: Web3AuthOptions;
adapters?: IAdapter<unknown>[];
plugins?: IPlugin[];
};
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 {
clientId: string;
chainConfig?: CustomChainConfig;
enableLogging?: boolean;
storageKey?: "session" | "local";
sessionTime?: number;
web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
useCoreKitKey?: boolean;
uiConfig?: WhiteLabelData;
privateKeyProvider?: IBaseProvider<string>;
}
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";
adapterListener: SafeEventEmitter;
/**
* UX Mode for the openlogin adapter
*/
uxMode?: UX_MODE_TYPE;
}
Please check out the PnP No Modal SDK references for interfaces for the inner parameters.
Shared Methods Descriptions
Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your users. Further, you can use the native provider given by Web3Auth to connect the users to the respective blockchain network.
Natively, the instance of Web3Auth
(referred to as web3auth
in our examples) returns the
following functions:
-
init()
- Initializes the Web3Auth instance.await init();
Returns:
init(): Promise<void>;
-
connectTo(walletName, loginParams?)
- Connect to a specific wallet adapter.await connectTo(WALLET_ADAPTERS.AUTH, {
loginProvider: "google",
});Returns:
connectTo<T>(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise<IProvider | null>;
On successful login, the
connectTo
function returns anIProvider
instance. You can use this provider to connect your user to the blockchain and make transactions. -
provider()
- Returns the native provider that can be used to make different blockchain transactions. Returns:get provider(): IProvider | null;
-
connected()
- Returnstrue
orfalse
depending on whether the web3auth instance is available or not. Returns:get connected(): boolean;
-
getUserInfo()
- Getting the User's Information.const userInfo = await getUserInfo();
-
authenticateUser()
- Getting the idToken from Web3Auth.const idToken = await authenticateUser();
-
addChain()
- Add chain config details to the connected adapter.await addChain(chainConfig);
-
switchChain()
- Switch chain as per chainId already added to chain config.await switchChain({ chainId: "0x1" });
-
getAdapter()
- Get the connected adapter instance.const adapter = await getAdapter(adapterName);
-
configureAdapter()
- Configure the adapter instance.await configureAdapter(adapterConfig);
-
clearCache()
- Clear the cache.await clearCache();
-
addPlugin()
- Add a plugin to Web3Auth.await addPlugin(plugin);
-
logout()
- Logging out the User.await logout();
Usage
import React from "react";
import { Web3AuthProvider, useWeb3Auth } from "@web3auth/no-modal-react-hooks";
import { web3AuthContextConfig } from "./web3AuthProviderProps";
import { WALLET_ADAPTERS } from "@web3auth/base";
const App = () => {
const {
init,
connectTo,
logout,
isConnected,
enableMFA,
addAndSwitchChain,
authenticateUser,
addChain,
switchChain,
} = useWeb3Auth();
React.useEffect(() => {
const initialize = async () => {
await init();
};
initialize();
}, [init]);
return (
<Web3AuthProvider config={web3AuthContextConfig}>
<div>
{isConnected ? (
<>
<button onClick={logout}>Logout</button>
<button onClick={enableMFA}>Enable MFA</button>
<button
onClick={() =>
addAndSwitchChain({
chainId: "0x89",
rpcTarget: "https://rpc.ankr.com/polygon",
displayName: "Polygon Ecosystem Token",
ticker: "POL",
})
}
>
Add and Switch Chain
</button>
<button onClick={authenticateUser}>Authenticate User</button>
<button
onClick={() =>
addChain({
chainId: "0x89",
rpcTarget: "https://rpc.ankr.com/polygon",
displayName: "Polygon Mainnet",
ticker: "MATIC",
})
}
>
Add Chain
</button>
<button onClick={() => switchChain({ chainId: "0x89" })}>Switch Chain</button>
</>
) : (
<button
onClick={() =>
connectTo(WALLET_ADAPTERS.AUTH, {
loginProvider: "google",
})
}
>
Login
</button>
)}
</div>
</Web3AuthProvider>
);
};
export default App;
Examples
PnP Web SDK React Playground
A playground to test all the features of Plug and Play SDKs in React