Web3Auth

https://web3auth.io/docs
Admin
Web3Auth provides a suite of SDKs for seamless Web3 authentication, multi-factor authentication, and...
Tokens:79,774
Snippets:842
Trust Score:9.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize React Quick Start Project

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&product=PNP&sdk=PNP_FLUTTER&stepindex=1&stepindex=0

This command uses degit to download the React quick start example from the Web3Auth repository to bootstrap a new project. Ensure you have npx installed.

```shell
npx degit Web3Auth/web3auth-examples/quick-starts/react-quick-start w3a-quick-start
```

--------------------------------

### Install Web3Auth and Dependencies

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&product=PNP&sdk=PNP_FLUTTER&stepindex=1&stepindex=0

Installs the necessary Web3Auth modal package along with wagmi and @tanstack/react-query for blockchain interactions. Supports installation via npm, yarn, pnpm, and bun.

```bash
npm install --save @web3auth/modal wagmi @tanstack/react-query
```

```bash
yarn add @web3auth/modal wagmi @tanstack/react-query
```

```bash
pnpm add @web3auth/modal wagmi @tanstack/react-query
```

```bash
bun add @web3auth/modal wagmi @tanstack/react-query
```

--------------------------------

### package.json Dependencies for Web3Auth

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&stepindex=0

Lists the dependencies required in the 'package.json' file for a Web3Auth integration. This includes core Web3Auth packages and related libraries necessary for frontend Web3 development. Ensure these are installed to use the provided functionalities.

```json
{
  "name": "my-app",
  "version": "0.1.0",
  "dependencies": {
    "@web3auth/modal": "^8.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "ethers": "^6.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
```

--------------------------------

### Web3Auth Web SDK Integration Example

Source: https://web3auth.io/docs/connect-blockchain/evm/moonbeam/web

Demonstrates how to integrate Web3Auth into a web application using the Web SDK. This snippet shows the basic setup required to get started with Web3Auth authentication in just a few lines of code.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: YOUR_WEB3AUTH_CLIENT_ID,
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
  },
});

await web3auth.initModal();
await web3auth.connectTo('google');

```

--------------------------------

### Switch Network with TypeScript

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&stepindex=0

Provides a TypeScript example for switching the blockchain network using Web3Auth. This function requires the Web3Auth instance and the target network's chain ID. It facilitates seamless network transitions for the user within the application.

```typescript
import { Web3Auth } from "@web3auth/modal";

async function switchNetwork(web3auth: Web3Auth, chainId: string): Promise<void> {
  try {
    await web3auth.requestProvider({ 
      method: "wallet_switchEthereumChain", 
      params: [{ chainId: chainId }]
    });
    console.log(`Switched to network with chain ID: ${chainId}`);
  } catch (error) {
    console.error("Error switching network:", error);
  }
}
```

--------------------------------

### Initialize Web3Auth Web SDK

Source: https://web3auth.io/docs/quick-start_framework=IOS&product=PNP&sdk=PNP_REACT_NATIVE&stepindex=0

Initializes the Web3Auth SDK for web applications. This code snippet demonstrates the basic setup and configuration required to get started with the Web3Auth SDK in a web environment. It uses JavaScript and requires the Web3Auth library.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Get your Client ID from https://dashboard.web3auth.io
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1", // chain ID of the Ethereum network
    rpcTarget: "https://rpc.ankr.com/eth", // RPC URL of the Ethereum network
  },
  uiConfig: {
    theme: "light",
    loginMethodsOrder: ["google", "facebook", "twitter"],
  },
});

await web3auth.init();
```

--------------------------------

### Web3Auth Mobile SDK Integration Example

Source: https://web3auth.io/docs/connect-blockchain/evm/cronos/ios

This example shows the basic integration of the Web3Auth Mobile SDK. It outlines the initialization process for mobile applications. Ensure you have the Web3Auth Mobile SDK installed.

```javascript
import { Web3AuthMobile } from "@web3auth/web3auth-mobile";

const web3authMobile = new Web3AuthMobile({
  clientId: YOUR_CLIENT_ID,
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
  },
});

await web3authMobile.init();

const provider = await web3authMobile.connect();

// Use the provider for blockchain interactions on mobile
```

--------------------------------

### Web3Auth Web SDK Integration

Source: https://web3auth.io/docs/sdk/gaming/unreal/examples

Integrate Web3Auth into your web application using the Web SDK. This snippet demonstrates the basic setup and initialization of the Web3Auth instance. Ensure you have the necessary dependencies installed.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

// Initialize the Web3Auth instance
const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Get your Client ID from https://dashboard.web3auth.io
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1", // Ethereum Mainnet
  },
});

// Call init() to initialize the Web3Auth instance
await web3auth.init();

// Now you can use web3auth.connect() to log in users
```

--------------------------------

### Web3Auth Web SDK Integration - Initialization

Source: https://web3auth.io/docs/connect-blockchain/evm/unichain/android

Example of initializing the Web3Auth Web SDK. This code snippet demonstrates how to set up the Web3Auth instance with specific configuration options for web applications. It is a basic setup required before using other Web3Auth functionalities.

```javascript
const web3auth = new Web3Auth({ clientId: "YOUR_WEB3AUTH_CLIENT_ID" });
```

--------------------------------

### Install Web3Auth Web SDK

Source: https://web3auth.io/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication

Install the Web3Auth Web SDK using npm or yarn. This is the first step to integrating Web3Auth into your web application.

```bash
npm install @web3auth/web3auth
# or
yarn add @web3auth/web3auth
```

--------------------------------

### Web3Auth Web SDK Integration Example

Source: https://web3auth.io/docs/features/mfa

This HTML snippet demonstrates the initial setup for integrating Web3Auth's Web SDK. It includes links to necessary CSS and JavaScript files, along with basic HTML structure for navigation and announcements. The provided JavaScript initializes the theme and handles user preferences.

```html
<script src="https://cmp.osano.com/AzZMxHTbQDOQD8c1J/da3b35cc-707f-44ba-a83e-b28b8a08eeac/osano.js" async defer="defer"></script><link rel="stylesheet" href="/docs/assets/css/styles.7d76b142.css">
<script src="/docs/assets/js/runtime~main.fc9a3b3a.js" defer="defer"></script>
<script src="/docs/assets/js/main.b7a8deb6.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_s0pr" role="banner"><div class="content_zf74 announcementBarContent_dpRF"><a href="https://web3auth.io/community/t/web3auth-developer-office-hours/8777" target="_blank">Stuck somewhere in the integration? Join the biweekly MetaMask Office Hours →</a></div><button type="button" aria-label="Close" class="clean-btn close closeButton_ZdWa announcementBarClose_iXyO"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" target="_self" href="/docs/"><div class="navbar__logo"><img src="/docs/images/logo.svg" alt="Web3Auth&#x27;s Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/docs/images/logo-dark.svg" alt="Web3Auth&#x27;s Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Documentation</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/docs/sdk">SDKs</a><ul class="dropdown__menu"><li class=""><div class="sdk-menu">
  <span class="product-selection-menu">
    <ul>
      <li>
        <a id="web-menu-button" class="selected" onfocus='document.getElementById("web-menu-button").classList.add("selected"),document.getElementById("web-menu").classList.add("selected-menu"),document.getElementById("mobile-menu-button").classList.remove("selected"),document.getElementById("mobile-menu").classList.remove("selected-menu"),document.getElementById("gaming-menu-button").classList.remove("selected"),document.getElementById("gaming-menu").classList.remove("selected-menu"),document.getElementById("enterprise-menu-button").classList.remove("selected"),document.getElementById("enterprise-menu").classList.remove("selected-menu")' onmouseover='document.getElementById("web-menu-button").classList.add("selected"),document.getElementById("web-menu").classList.add("selected-menu"),document.getElementById("mobile-menu-button").classList.remove("selected"),document.getElementById("mobile-menu").classList.remove("selected-menu"),document.getElementById("gaming-menu-button").classList.remove("selected"),document.getElementById("gaming-menu").classList.remove("selected-menu"),document.getElementById("enterprise-menu-button").classList.remove("selected"),document.getElementById("enterprise-menu").classList.remove("selected-menu")'>
          <div>
            <h2>Web SDKs</h2>
            <p>Integrate Web3Auth in just 4 lines of code.</p>
          </div>
        </a>
      </li>
      <li>
```

--------------------------------

### Web3Auth Web SDK Integration

Source: https://web3auth.io/docs/dashboard/create-new-project

Integrate Web3Auth into your web application using the Web SDK. This example demonstrates the core initialization process. Ensure you have the Web3Auth library installed.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
  },
  // Other configurations...
});

await web3auth.init();

```

--------------------------------

### Web3Auth Context Configuration (TypeScript)

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&product=PNP&sdk=PNP_FLUTTER&stepindex=1&stepindex=0

This snippet shows the setup for the Web3Auth context, which is crucial for managing authentication state and providing access to Web3Auth functionalities across your application. It imports necessary types from the '@web3auth/modal' package.

```tsx
import { WEB3AUTH_NETWORK, type Web3AuthContextConfig } from "@web3auth/modal";
```

--------------------------------

### Initialize Web3Auth with Customization (Web)

Source: https://web3auth.io/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/signing

This example shows how to initialize the Web3Auth Web SDK with additional customization options, such as specifying the UI mode and enabling specific social login providers. It builds upon the basic initialization by allowing developers to tailor the user experience. Ensure the Web3Auth library is installed.

```javascript
import { Web3Auth } from "@web3auth/web3auth";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID",
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
  },
});

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    uxMode: "redirect", // or "popup"
    loginMethodsOrder: ["google", "facebook", "twitter"],
  },
});

web3auth.addAdapter(openloginAdapter);

async function initializeCustomWeb3Auth() {
  await web3auth.initModal({
    modalConfig: {
      mode: "light", // or "dark"
    },
  });
  console.log("Customized Web3Auth initialized successfully");
}

initializeCustomWeb3Auth();

```

--------------------------------

### Web3Auth Context Example

Source: https://web3auth.io/docs/quick-start_framework=IOS&product=PNP&sdk=PNP_IOS&stepindex=0

This snippet demonstrates how to import and use the Web3Auth context configuration, showing the type definition for Web3AuthContextConfig.

```APIDOC
## Import Web3Auth Context Configuration

### Description
This section shows how to import the `WEB3AUTH_NETWORK` enum and the `Web3AuthContextConfig` type from the `@web3auth/modal` package. This is a foundational step for configuring and using Web3Auth within your application.

### Method
Import Statement

### Endpoint
N/A

### Parameters
None

### Request Example
```typescript
import { WEB3AUTH_NETWORK } from "@web3auth/modal";
import { type Web3AuthContextConfig } from "@web3auth/modal";
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Web3Auth Web SDK Integration

Source: https://web3auth.io/docs/sdk/web

This snippet demonstrates the basic integration of the Web3Auth Web SDK into a web application. It requires the `@web3auth/web-modal` package and involves initializing the Web3Auth instance with specific configurations like `clientId`, `chainConfig`, and `authProvider`. The code shown is a simplified example of how to start using the SDK.

```javascript
import { Web3Auth } from "@web3auth/web-modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Get your Client ID from https://dashboard.web3auth.io
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.walletconnect.com/v1/",
  },
});

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    uxMode: "popup",
    loginMethodsFromCommon: ["google", "facebook", "twitter", "twitch", "reddit", "discord", "apple", "line", "github", "kakao", "linkedin", "wechat", "email", "phone", "farcaster"],
  },
});

web3auth.addAdapter(openloginAdapter);

await web3auth.initModal();

// Now you can use web3auth.connect() to authenticate users
```

--------------------------------

### Integrate Web3Auth Web SDK

Source: https://web3auth.io/docs/connect-blockchain/evm/aleph-zero/react-native

This snippet demonstrates the basic integration of the Web3Auth Web SDK. It covers initialization and setup required to get started with Web3Auth in a web application. The SDK simplifies Web3 access through social logins and wallet management.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

// Initialize the Web3Auth instance
const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID", // Get your client id from https://dashboard.web3auth.io
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1", // Ethereum Mainnet
  },
});

// Initialize the Web3Auth instance
await web3auth.init();

// Login using a social provider (e.g., Google)
await web3auth.connectTo("google");

// Get the user's public address
const provider = new ethers.providers.Web3Provider(web3auth.provider);
const signer = provider.getSigner();
const address = await signer.getAddress();
console.log("User Address:", address);
```

--------------------------------

### Web3Auth Web SDK Integration Example

Source: https://web3auth.io/docs/connect-blockchain/evm/celo/ios

This snippet demonstrates the minimal code required to integrate the Web3Auth SDK into a web application. It requires the Web3Auth SDK to be installed and configured.

```javascript
import Web3Auth from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Get your client ID from Web3Auth Dashboard
  chainConfig: {
    chainId: "0x1", // Example: Ethereum Mainnet
    displayName: "Ethereum Mainnet",
    blockExplorer: "https://etherscan.io",
    ticker: "ETH",
    tickerName: "Ethereum"
  },
  uiConfig: {
    theme: "light",
    loginMethodsOrder: ["google", "facebook", "twitter"]
  }
});

await web3auth.init();

const provider = await web3auth.connect();

console.log("Web3Auth Provider: ", provider);
console.log("User logged in successfully!");
```

--------------------------------

### Integrate Web3Auth Web SDK

Source: https://web3auth.io/docs/connect-blockchain/evm/bitkub

This snippet shows how to integrate the Web3Auth Web SDK. It requires minimal setup, as indicated by the '4 lines of code' claim. The integration focuses on initializing and connecting a user's wallet.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID", // Get your client ID from Web3Auth Dashboard
});

await web3auth.init();
const provider = await web3auth.connect();
```

--------------------------------

### Making Blockchain Calls with Wagmi Hooks

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&stepindex=0

Demonstrates how to leverage wagmi hooks for interacting with the blockchain after authentication. It shows common hooks like useBalance, useAccount, useSignMessage, useSendTransaction, and useSwitchChain. This relies on the application having wagmi configured.

```javascript
import { useBalance, useAccount, useSignMessage, useSendTransaction, useSwitchChain } from 'wagmi';

// Example usage of wagmi hooks
const { data: balance } = useBalance({
  address: account?.address,
});

const { address } = useAccount();

// ... other hook usages
```

--------------------------------

### Web3Auth Web SDK Integration Example

Source: https://web3auth.io/docs/migration-guides/ios-v8

This snippet demonstrates how to integrate the Web3Auth Web SDK into a web application. It covers initialization and basic usage, simplifying Web3 authentication. Ensure the Web3Auth library is installed or included in your project.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID", // Get your client ID from the Web3Auth Developer Dashboard
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1", // Example: Ethereum Mainnet
  },
});

async function initializeWeb3Auth() {
  await web3auth.init();
  console.log("Web3Auth initialized successfully");
}

initializeWeb3Auth();

async function login() {
  if (!web3auth.ready) {
    console.error("Web3Auth is not ready yet.");
    return;
  }

  try {
    const userInfo = await web3auth.connectTo( "google" ); // Example: Login with Google
    console.log("User logged in:", userInfo);
    // You can now get the user's private key or public address
    const provider = await web3auth.getProvider();
    console.log("Provider:", provider);
  } catch (error) {
    console.error("Error during login:", error);
  }
}

// Call login() when a button is clicked or as needed
// login();
```

--------------------------------

### Integrate Web3Auth with Web SDK

Source: https://web3auth.io/docs/sdk/web/js/examples

This code snippet demonstrates the basic integration of Web3Auth into a web application using their Web SDK. It requires minimal setup, typically around 4 lines of code, to get started with social logins and wallet management.

```javascript
<!-- This is a placeholder for actual code. -->
// Initialize Web3Auth with your client ID
// const web3auth = new Web3Auth({ clientId: "YOUR_CLIENT_ID" });
// await web3auth.init();
// const provider = await web3auth.connect();
// Now you can use the provider to interact with the blockchain.
```

--------------------------------

### Integrate Web3Auth with Web SDK

Source: https://web3auth.io/docs/product-fit

This snippet demonstrates the basic integration of Web3Auth into a web application using the Web SDK. It requires minimal setup, typically around 4 lines of code, to get started with social logins and wallet management.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: YOUR_WEB3AUTH_CLIENT_ID,
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
  },
});

await web3auth.initModal();
await web3auth.connect();
```

--------------------------------

### Web3Auth Web SDK Integration Example

Source: https://web3auth.io/docs/connect-blockchain/evm/klaytn/ios

This snippet demonstrates a basic integration of the Web3Auth Web SDK. It shows how to initialize Web3Auth with specific configurations and manage the user's login state. Dependencies include the Web3Auth library.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({ 
  clientId: "YOUR_WEB3AUTH_CLIENT_ID",
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.walletconnect.com/v1/",
  },
});

async function initializeWeb3Auth() {
  await web3auth.initModal();
  // Now you can use web3auth.connect() to login
}

initializeWeb3Auth();
```

--------------------------------

### Initialize Web3Auth Web SDK

Source: https://web3auth.io/docs/connect-blockchain/evm/neon/web

Demonstrates the initial setup for integrating the Web3Auth Web SDK. This involves importing the necessary library and initializing the Web3Auth instance with configuration options. It's a foundational step for enabling decentralized authentication in web applications.

```javascript
import Web3Auth from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
  },
});

await web3auth.init();
```

--------------------------------

### Making Blockchain Calls with Wagmi Hooks

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&product=PNP&sdk=PNP_FLUTTER&stepindex=1&stepindex=0

Leverage Wagmi hooks like `useBalance`, `useAccount`, `useSignMessage`, `useSendTransaction`, and `useSwitchChain` to interact with the blockchain. Ensure Wagmi is configured in your application. Refer to the wagmi documentation for detailed hook information.

```javascript
import { useBalance, useAccount, useSignMessage, useSendTransaction, useSwitchChain } from 'wagmi';

// Example usage of hooks (within a React component)
const { data: balance } = useBalance({
  address: account.address,
});

const { address } = useAccount();

const { data: message, error: signError, isLoading: isSigning, signMessage } = useSignMessage({
  message: 'Hello World',
});

const { sendTransaction, error: sendTxError, isLoading: isSendingTx } = useSendTransaction({
  to: '0xd213a203a51c708291976b21913b28f102f6d151',
  value: ethers.utils.parseEther('0.01'),
});

const { switchChain, error: switchChainError, isLoading: isSwitchingChain } = useSwitchChain();
```

--------------------------------

### Web3Auth - Web SDK Initialization with Customizations

Source: https://web3auth.io/docs/sdk/mobile/pnp/ios/mfa

This example shows how to initialize the Web3Auth SDK for web with custom UI settings. It allows for specifying the theme and other visual preferences. The initialization returns a configured Web3Auth instance.

```javascript
import { Web3Auth } from "@web3auth/modal";

const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID", // Get your Client ID from https://dashboard.web3auth.io
  authMode: "WALLET",
  web3AuthNetwork: "mainnet",
  uiConfig: {
    theme: "dark",
    loginMethodsOrder: ["google", "facebook"],
    defaultLanguage: "en",
    appName: "My App",
  },
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
  },
});

await web3auth.initModal();
```

--------------------------------

### Web3Auth Web SDK Integration

Source: https://web3auth.io/docs/connect-blockchain/evm/ethereum/unity

This snippet demonstrates the basic integration of the Web3Auth Web SDK. It initializes the Web3Auth instance with provided configurations and handles authentication flow. Ensure the necessary dependencies like `@web3auth/web-modal` and `@web3auth/base` are installed.

```javascript
import { Web3Auth } from "@web3auth/web-modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const clientId = "YOUR_WEB3AUTH_CLIENT_ID";

const options = {
  clientId: clientId,
  authMode: "WALLET",
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
  },
  uiConfig: {
    theme: "dark",
    loginMethodsOrder: ["google", "facebook", "twitter"],
  },
  web3AuthNetwork: "mainnet",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    chainConfig: {
      chainNamespace: "eip155",
      chainId: "0x1",
      rpcTarget: "https://rpc.ankr.com/eth",
    },
  },
});

const web3auth = new Web3Auth({ ...options, privateKeyProvider });

async function initializeWeb3Auth() {
  await web3auth.init();
  console.log("Web3Auth initialized");
}

async function login() {
  if (!web3auth.connected) {
    await web3auth.connect();
    console.log("User logged in");
  }
}

async function getUserInfo() {
  if (web3auth.connected) {
    const user = await web3auth.getUserInfo();
    console.log(user);
  }
}

async function logout() {
  if (web3auth.connected) {
    await web3auth.logout();
    console.log("User logged out");
  }
}

// Example usage:
// initializeWeb3Auth();
// login();
// getUserInfo();
// logout();

```

--------------------------------

### Initialize Web3Auth SDK for Web

Source: https://web3auth.io/docs/sdk/mobile/sfa/ios

This snippet demonstrates the basic initialization of the Web3Auth SDK for web applications. It sets up the core configuration and prepares the SDK for user authentication. Ensure you have the Web3Auth SDK installed and any necessary environment variables configured.

```javascript
import Web3Auth from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
  },
  clientId: {
    // Get your Client ID from https://dashboard.web3auth.io
    true: "YOUR_WEB3AUTH_CLIENT_ID",
  },
  uiConfig: {
    theme: "dark",
    loginMethodsOrder: ["google", "facebook", "twitter"],
  },
});

await web3auth.init();
```

--------------------------------

### Making Blockchain Calls with Wagmi Hooks

Source: https://web3auth.io/docs/quick-start_framework=IOS&stepindex=0

Leverage configured Wagmi hooks such as useBalance, useAccount, useSignMessage, useSendTransaction, and useSwitchChain to interact with the blockchain. Ensure Wagmi is properly configured within your application. Refer to the wagmi documentation for detailed hook information.

```javascript
import { useBalance, useAccount, useSignMessage, useSendTransaction, useSwitchChain } from 'wagmi';

// Example usage of wagmi hooks
const { data: balance } = useBalance({
  address: account.address,
});
const { address } = useAccount();

// ... other hook usages
```

--------------------------------

### Web3Auth Flutter SDK Integration

Source: https://web3auth.io/docs/sdk/gaming/unreal/examples

Integrate Web3Auth into your Flutter application using the Flutter SDK. This example demonstrates the basic setup for initializing Web3Auth. Make sure to follow the dependency setup instructions in the official Web3Auth Flutter documentation.

```dart
import 'package:flutter/material.dart';
import 'package:web3auth_flutter/web3auth_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  final web3authFlutter = Web3AuthFlutter(Web3AuthOptions(
    clientId: "YOUR_WEB3AUTH_CLIENT_ID",
    chainConfig: ChainConfig(chainNamespace: ChainNamespace.eip155, chainId: "0x1", rpcTarget: "https://rpc.ankr.com/eth"),
  ));
  
  await web3authFlutter.init();

  runApp(MyApp(web3auth: web3authFlutter));
}

class MyApp extends StatelessWidget {
  final Web3AuthFlutter web3auth;
  const MyApp({Key? key, required this.web3auth}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Web3Auth Flutter Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                final result = await web3auth.login({
                  'loginProvider': 'GOOGLE',
                });
                print('Login result: $result');
              } catch (e) {
                print('Error logging in: $e');
              }
            },
            child: const Text('Login with Google'),
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### Configure Web3Auth Context with TypeScript

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&stepindex=0

Sets up the Web3Auth context configuration using TypeScript. This involves importing necessary types and constants from the '@web3auth/modal' package. It defines the structure for Web3Auth context configurations, crucial for initializing and managing the Web3Auth instance within a React application.

```typescript
import { WEB3AUTH_NETWORK } from "@web3auth/modal";
import { type Web3AuthContextConfig
```

--------------------------------

### Initialize Web3Auth in Web Application

Source: https://web3auth.io/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication

Initialize the Web3Auth SDK in your web application. This setup involves configuring essential parameters like chain configuration and authentication methods. Ensure you have the necessary npm packages installed.

```typescript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Get your Client ID from https://dashboard.web3auth.io
  chainConfig: {
    chainNamespace: "eip155", // or "solana", "cosmos", "polkadot"
    chainId: "0x1", // or "0x5", "0x80001"
    rpcTarget: "https://rpc.walletconnect.com/v1/", // url of the ethereum node
  },
});

await web3auth.init();
```

--------------------------------

### Web3Auth Web SDK Integration Example (HTML/JavaScript)

Source: https://web3auth.io/docs/connect-blockchain/evm/aleph-zero/react-native

This HTML snippet demonstrates the initial setup for integrating the Web3Auth Web SDK. It includes event listeners for UI elements to manage theme selection (Web, Mobile, Gaming, Enterprise) and applies a 'selected' class to the active menu item.

```html
<li>
        <a id="web-menu-button" class="selected" onfocus='document.getElementById("web-menu-button").classList.add("selected"),document.getElementById("web-menu").classList.add("selected-menu"),document.getElementById("mobile-menu-button").classList.remove("selected"),document.getElementById("mobile-menu").classList.remove("selected-menu"),document.getElementById("gaming-menu-button").classList.remove("selected"),document.getElementById("gaming-menu").classList.remove("selected-menu"),document.getElementById("enterprise-menu-button").classList.remove("selected"),document.getElementById("enterprise-menu").classList.remove("selected-menu")' onmouseover='document.getElementById("web-menu-button").classList.add("selected"),document.getElementById("web-menu").classList.add("selected-menu"),document.getElementById("mobile-menu-button").classList.remove("selected"),document.getElementById("mobile-menu").classList.remove("selected-menu"),document.getElementById("gaming-menu-button").classList.remove("selected"),document.getElementById("gaming-menu").classList.remove("selected-menu"),document.getElementById("enterprise-menu-button").classList.remove("selected"),document.getElementById("enterprise-menu").classList.remove("selected-menu")'>
          <div>
            <h2>Web SDKs</h2>
            <p>Integrate Web3Auth in just 4 lines of code.</p>
          </div>
        </a>
      </li>
```

--------------------------------

### Web SDK Integration Example - JavaScript

Source: https://web3auth.io/docs/connect-blockchain/evm/chiliz

This snippet demonstrates how to integrate the Web3Auth SDK into a web application. It initializes the Web3Auth SDK with specific configuration options and handles user login. This example requires the Web3Auth SDK library to be included in the project.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID",
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
  },
});

await web3auth.init();

const provider = await web3auth.connect();

// Use the provider to interact with the blockchain
```

--------------------------------

### Web SDK Integration Example (HTML/JavaScript)

Source: https://web3auth.io/docs/authentication/social-logins/facebook

Demonstrates how to initiate the Web3Auth integration for web applications. It includes basic HTML structure and JavaScript event handlers to select the Web SDK and potentially display its features. This is a starting point for integrating Web3Auth into a web project.

```html
<div class="sdk-menu">
  <span class="product-selection-menu">
    <ul>
      <li>
        <a id="web-menu-button" class="selected" onfocus='document.getElementById("web-menu-button").classList.add("selected"),document.getElementById("web-menu").classList.add("selected-menu"),document.getElementById("mobile-menu-button").classList.remove("selected"),document.getElementById("mobile-menu").classList.remove("selected-menu"),document.getElementById("gaming-menu-button").classList.remove("selected"),document.getElementById("gaming-menu").classList.remove("selected-menu"),document.getElementById("enterprise-menu-button").classList.remove("selected"),document.getElementById("enterprise-menu").classList.remove("selected-menu")' onmouseover='document.getElementById("web-menu-button").classList.add("selected"),document.getElementById("web-menu").classList.add("selected-menu"),document.getElementById("mobile-menu-button").classList.remove("selected"),document.getElementById("mobile-menu").classList.remove("selected-menu"),document.getElementById("gaming-menu-button").classList.remove("selected"),document.getElementById("gaming-menu").classList.remove("selected-menu"),document.getElementById("enterprise-menu-button").classList.remove("selected"),document.getElementById("enterprise-menu").classList.remove("selected-menu")'>
          <div>
            <h2>Web SDKs</h2>
            <p>Integrate Web3Auth in just 4 lines of code.</p>
          </div>
        </a>
      </li>
      <li>
```

--------------------------------

### Retrieve Account Balance with TypeScript

Source: https://web3auth.io/docs/quick-start_framework=ANDROID&stepindex=0

Demonstrates how to fetch an Ethereum account's balance using TypeScript and the ethers.js library. It assumes an initialized Web3Auth provider is available. This function requires the provider instance and the user's account address as input and returns the balance in Wei.

```typescript
import { ethers } from "ethers";

async function getBalance(provider: any, address: string): Promise<string> {
  try {
    const ethersProvider = new ethers.BrowserProvider(provider);
    const balance = await ethersProvider.getBalance(address);
    return ethers.formatUnits(balance, "ether");
  } catch (error) {
    console.error("Error fetching balance:", error);
    return "0";
  }
}
```

--------------------------------

### Initialize Web SDK Authentication with Web3Auth

Source: https://web3auth.io/docs/connect-blockchain/evm/mint/web

Demonstrates how to initialize the Web3Auth SDK for web applications. It outlines the necessary configuration parameters for connecting to the Web3Auth service and setting up the authentication flow. This snippet is crucial for starting any web integration.

```javascript
const web3auth = new Web3Auth(window.provider, {
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
  },
  // context mode
  //uiConstructor: "ModalSignup",
  //uiConfig: {
  //  mode: "dark",
  //  useLogoLoader: true,
  //},
});

await web3auth.init();

const provider = await web3auth.connect();
```

--------------------------------

### Web3Auth Web SDK Integration Example

Source: https://web3auth.io/docs/connect-blockchain/solana

This snippet demonstrates the basic integration of the Web3Auth Web SDK into a web application. It involves initializing the Web3Auth constructor with specific parameters and calling the `init` method. Ensure you have the necessary configuration details for your Web3Auth project.

```javascript
import { Web3Auth } from "@web3auth/web-3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Developer Dashboard
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1", // or other chain ID
  },
});

await web3auth.init();
```

--------------------------------

### Initialize Web3Auth SDK (JavaScript)

Source: https://web3auth.io/docs/connect-blockchain/evm/arbitrum

This snippet demonstrates how to initialize the Web3Auth SDK for web applications. It highlights the minimal code required for integration. This example assumes a JavaScript environment and the availability of the Web3Auth library.

```javascript
const web3auth = new Web3Auth({ clientId: 'YOUR_CLIENT_ID' });
await web3auth.init();
console.log('Web3Auth SDK initialized successfully!');
```

--------------------------------

### Initialize Web3Auth Web SDK

Source: https://web3auth.io/docs/connect-blockchain/evm/neon/react-native

This snippet demonstrates how to initialize the Web3Auth Web SDK. It covers the basic setup required to integrate Web3Auth into a web application, including the necessary configuration parameters.

```javascript
const web3auth = new Web3Auth({ clientId: 'YOUR_WEB3AUTH_CLIENT_ID' });
await web3auth.init();

```

--------------------------------

### Initialize Web3Auth Web SDK

Source: https://web3auth.io/docs/sdk/web/react/advanced/mfa

This snippet demonstrates how to initialize the Web3Auth SDK for web applications. It requires minimal setup and focuses on a quick integration, typically within four lines of code.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Get your client ID from dashboard
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1", // Example: Ethereum Mainnet
  },
});

await web3auth.init();
```

--------------------------------

### Web3Auth Web SDK Integration Example

Source: https://web3auth.io/docs/connect-blockchain/evm/moonbeam/android

This HTML snippet demonstrates the initial setup for integrating the Web3Auth Web SDK. It includes JavaScript to manage the selection and display of different SDK menus (Web, Mobile, Gaming, Enterprise) based on user interaction (focus and mouseover events). The 'Web SDKs' option is pre-selected.

```html
<div class="sdk-menu">
  <span class="product-selection-menu">
    <ul>
      <li>
        <a id="web-menu-button" class="selected" onfocus='document.getElementById("web-menu-button").classList.add("selected"),document.getElementById("web-menu").classList.add("selected-menu"),document.getElementById("mobile-menu-button").classList.remove("selected"),document.getElementById("mobile-menu").classList.remove("selected-menu"),document.getElementById("gaming-menu-button").classList.remove("selected"),document.getElementById("gaming-menu").classList.remove("selected-menu"),document.getElementById("enterprise-menu-button").classList.remove("selected"),document.getElementById("enterprise-menu").classList.remove("selected-menu")' onmouseover='document.getElementById("web-menu-button").classList.add("selected"),document.getElementById("web-menu").classList.add("selected-menu"),document.getElementById("mobile-menu-button").classList.remove("selected"),document.getElementById("mobile-menu").classList.remove("selected-menu"),document.getElementById("gaming-menu-button").classList.remove("selected"),document.getElementById("gaming-menu").classList.remove("selected-menu"),document.getElementById("enterprise-menu-button").classList.remove("selected"),document.getElementById("enterprise-menu").classList.remove("selected-menu")'>
          <div>
            <h2>Web SDKs</h2>
            <p>Integrate Web3Auth in just 4 lines of code.</p>
          </div>
        </a>
      </li>
      <li>

```

--------------------------------

### Web3Auth Web SDK Integration - Initialization Example

Source: https://web3auth.io/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers

This JavaScript code demonstrates how to initialize the Web3Auth Web SDK. It sets up the necessary configurations for integrating Web3Auth into a web application, allowing users to authenticate via various blockchain wallets.

```javascript
const web3auth = new Web3Auth(new TorusWalletConnectorPlugin({
    torusInstantiationOptions: {
      buildEnv: ENV.TESTNET,
      enableLogging: true,
      network: 'testnet',
       idiomas: {
        'en':{
          ' பெறு': 'Get',
          'save': 'Save',
        }
      }
    },
    loginSettings: {
      promptSweetAlert: true,
      provider: 'google',
    },
  }), {
    chainConfig: {
      chainNamespace: 'eip155',
      chainId: '0x5',
      rpcTarget: 'https://rpc.ankr.com/eth_goerli',
      displayName: 'Goerli Testnet',
      blockExplorer: 'https://goerli.etherscan.io/',
      ticker: 'GÖETH',
      tickerName: 'Goerli Ether',
    },
    uiConstructorOptions: {
      theme: 'light',
      mode: 'auto',
    },
  });
  await web3auth.init();
```

--------------------------------

### Web3Auth Web SDK Integration Example

Source: https://web3auth.io/docs/connect-blockchain/evm/nibiru/react-native

This snippet demonstrates how to integrate the Web3Auth Web SDK into a web application. It requires the Web3Auth SDK and shows a basic initialization and login flow. The output is a user-friendly and secure entry point for Web3 interactions.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID", // Get your client id from https://dashboard.web3auth.io
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
  },
});

await web3auth.init();
const provider = await web3auth.connect();

// Now you can use the provider to interact with the blockchain
```

--------------------------------

### Initialize Web3Auth Web SDK

Source: https://web3auth.io/docs/connect-blockchain/other/polymesh

This snippet demonstrates the basic initialization of the Web3Auth SDK for web applications. It requires setting up a constructor with specific parameters and handling the authentication flow. Ensure the necessary Web3Auth SDK package is installed.

```javascript
import { Web3Auth } from "@web3auth/web3auth";

const web3auth = new Web3Auth({
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
  },
  clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
});

await web3auth.init();

const provider = web3auth.provider; // Get provider object for further interactions
```
Tokens:
Raw