Advanced Configuration
The Web3Auth SDK provides extensive configuration options that allow you to customize authentication flows, UI appearance, blockchain integrations, and security features to meet your React Native application's specific requirements.
Configuration Structure
When setting up Web3Auth, you'll pass in the options to the constructor. This consists of:
- Expo Managed Workflow
- Bare React Native Workflow
import Web3Auth, { WEB3AUTH_NETWORK } from '@web3auth/react-native-sdk'
import * as WebBrowser from 'expo-web-browser'
import * as SecureStore from 'expo-secure-store'
const scheme = 'web3authrnexample'
const resolvedRedirectUrl = `${scheme}://auth`
const web3auth = new Web3Auth(WebBrowser, SecureStore, {
  clientId: 'YOUR_CLIENT_ID', // Get your Client ID from Web3Auth Dashboard
  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
  redirectUrl: resolvedRedirectUrl,
})
import Web3Auth, { WEB3AUTH_NETWORK } from '@web3auth/react-native-sdk'
import * as WebBrowser from '@toruslabs/react-native-web-browser'
import EncryptedStorage from 'react-native-encrypted-storage'
const scheme = 'web3authrnexample'
const resolvedRedirectUrl = `${scheme}://auth`
const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
  clientId: 'YOUR_CLIENT_ID', // Get your Client ID from Web3Auth Dashboard
  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
  redirectUrl: resolvedRedirectUrl,
})
Web3AuthOptions
The Web3Auth Constructor takes an object with Web3AuthOptions as input.
- Table
- Interface
| Parameter | Description | 
|---|---|
| clientId | Your Web3Auth Client ID from the Dashboard. It's a mandatory field of type string. | 
| network | Web3Auth Network: SAPPHIRE_MAINNET,SAPPHIRE_DEVNET,MAINNET,CYAN,AQUAorTESTNET. Mandatory field of typeWEB3AUTH_NETWORK. | 
| redirectUrl | URL that Web3Auth will redirect API responses upon successful authentication. It's a mandatory field of type string. | 
| whiteLabel? | WhiteLabel options for custom UI, branding, and translations. Takes WhiteLabelDataas a value. | 
| loginConfig? | Login config for custom verifiers. Takes LoginConfigas a value. | 
| mfaLevel? | Configure MFA level for authentication. Takes MFA_LEVELSas a value. | 
| sessionTime? | Configure session management time in seconds. Default is 86400 seconds (1 day). Max 30 days. | 
export interface Web3AuthOptions {
  clientId: string
  network: WEB3AUTH_NETWORK
  redirectUrl?: string
  whiteLabel?: WhiteLabelData
  loginConfig?: LoginConfig
  mfaLevel?: MFA_LEVELS
  sessionTime?: number
}
Session Management
Control how long users stay authenticated and how sessions persist in React Native.
Key Configuration Options:
- sessionTime- Session duration in seconds. Controls how long users remain authenticated before needing to log in again.- Minimum: 1 second (1).
- Maximum: 30 days (86400 * 30).
- Default: 1 day (86400).
 
- Minimum: 1 second (
const web3auth = new Web3Auth(WebBrowser, SecureStore, {
  clientId: 'YOUR_CLIENT_ID',
  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  redirectUrl: resolvedRedirectUrl,
  sessionTime: 86400 * 7, // 7 days (in seconds)
})
Custom Authentication Methods
Control the login options presented to your users. For detailed configuration options and implementation examples, see the Custom Authentication section.
UI Customization
Create a seamless brand experience by customizing the Web3Auth Login Screens to match your React Native application's design. For complete customization options, refer to the Whitelabeling & UI Customization section.
Multi-Factor Authentication (MFA)
Add additional security layers to protect user accounts with two-factor authentication. For detailed configuration options and implementation examples, see the Multi-Factor Authentication section.
DApp Share
Share authentication sessions across different applications. For detailed configuration options and implementation examples, see the DApp Share section.