Web3Auth is where passwordless auth meets non-custodial key infrastructure for Web3 apps and wallets. By aggregating OAuth (Google, Twitter, Discord) logins, different wallets and innovative Multi Party Computation (MPC) - Web3Auth provides a seamless login experience to every user on your application.

Checkout the official Web3Auth Documentation and SDK Reference to get started!

• Plug and Play, OAuth based Web3 Authentication Service
• Fully decentralized, non-custodial key infrastructure
• End to end Whitelabelable solution
• Threshold Cryptography based Key Reconstruction
• Multi Factor Authentication Setup & Recovery (Includes password, backup phrase, device factor editing/deletion etc)
• Support for WebAuthn & Passwordless Login
• Support for connecting to multiple wallets
• DApp Active Session Management

...and a lot more

• Node.js 22+
• npm 10+
• For iOS, only iOS 12+ is supported since we require ASWebAuthenticationSession.
• For Android, Custom Tab support is required.

In React Native, you have the choice to use one of the following workflows:

• Bare Workflow: Your React Native app is entirely built on your own machine. You can customize your app with Swift/Kotlin native modules.
• Expo Managed Workflow: Your React Native Expo app is built on Expo's cloud, so you don't have control over the native modules used in the app.

npm install @web3auth/react-native-sdk

Install the workflow-specific browser and secure storage packages next.

npm install @toruslabs/react-native-web-browser react-native-encrypted-storage
npm install --save-optional react-native-quick-crypto

npx expo install expo-web-browser expo-secure-store expo-linking expo-constants
npm install --save-optional react-native-quick-crypto

react-native-quick-crypto is optional but recommended. Without it, Metro falls back to crypto-browserify.

Web3Auth requires Metro polyfills and a setup import before any other app code.

Wrap your Metro config with withWeb3Auth:

Bare

const { getDefaultConfig } = require("@react-native/metro-config");
const { withWeb3Auth } = require("@web3auth/react-native-sdk/metro-config");

const config = getDefaultConfig(__dirname);

module.exports = withWeb3Auth(config);

Expo

const { getDefaultConfig } = require("expo/metro-config");
const { withWeb3Auth } = require("@web3auth/react-native-sdk/metro-config");

const config = getDefaultConfig(__dirname);

module.exports = withWeb3Auth(config);

Import the setup module first in your root entry file (index.js / index.ts):

import "@web3auth/react-native-sdk/setup";

// ... rest of your app entry

Hop on to the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.

• Choose a custom URL scheme for your app (for example web3authrnexample). This does not have to match your Android package name or iOS bundle identifier.
• Add the exact redirectUrl you will pass to the SDK (for example web3authrnexample://auth) to Whitelist URLs.
• Copy the Client ID for usage later.

The scheme portion of redirectUrl must be registered in AndroidManifest.xml so the auth browser can return to your app.

Inside your MainActivity, add a browsable deep-link intent filter:

<activity
  android:name=".MainActivity"
  android:launchMode="singleTask"
  android:exported="true">
  <!-- existing MAIN/LAUNCHER intent-filter -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="web3authrnexample" />
  </intent-filter>
</activity>

Replace web3authrnexample with the scheme used in your redirectUrl.

Register the same scheme in your iOS Info.plist via CFBundleURLTypes:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>web3authrnexample</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>web3authrnexample</string>
    </array>
  </dict>
</array>

When using Expo, install the Expo browser/storage packages (see Installation) and declare a scheme in app.json:

{
  "expo": {
    "scheme": "web3authexpoexample"
  }
}

Derive redirectUrl with expo-linking. Expo Go and standalone/dev-client builds produce different URLs — whitelist both in the dashboard:

import Constants, { AppOwnership } from "expo-constants";
import * as Linking from "expo-linking";

const redirectUrl =
  Constants.appOwnership === AppOwnership.Expo || Constants.appOwnership === AppOwnership.Guest
    ? Linking.createURL("web3auth", {})
    : Linking.createURL("web3auth", { scheme: "web3authexpoexample" });

Standalone builds resolve to a URL like web3authexpoexample://web3auth. Expo Go resolves to an exp://…/--/web3auth URL for your current session.

Whitelist the literal redirectUrl string your app passes to the SDK:

The SDK sends anonymous usage events to Segment so Web3Auth can improve reliability and feature coverage.

What is tracked (SDK-observable events):

• SDK initialization (completed / failed / keystore corrupted)
• Connection, logout, MFA enablement/management, identity token
• Wallet UI open and wallet request() flows
• Initialization properties include chain metadata (CAIP ids, display names, RPC hostnames), whitelabel flags, account abstraction config, and wallet services config

Not tracked from React Native today:

• Hosted auth/wallet UI interactions such as user consent accept/decline and Terms of Service / Privacy Policy clicks. Those live inside the auth/wallet webviews and will only be trackable if a redirect/event contract is added later.

Defaults and controls:

const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
  clientId,
  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  redirectUrl: "web3authrnexample://auth",
  // buildEnv: BUILD_ENV.DEVELOPMENT, // QA only; uses the development Segment write key
  // disableAnalytics: true,          // full opt-out
});

When using Web3AuthProvider, integration_type is set to "React Hooks". Direct new Web3Auth(...) usage reports "Native SDK".

Optional Wagmi 3 integration is available from @web3auth/react-native-sdk/wagmi. It derives EIP-155 chains from your Web3Auth config and bridges connection.ethereumProvider into Wagmi through a React Native-safe connector (no window / injected discovery).

Install peers:

npm install wagmi@^3 @wagmi/core@^3 viem@^2 @tanstack/react-query@^5

Nest providers in this order. Keep your own QueryClientProvider; the SDK does not create one:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Web3AuthProvider } from "@web3auth/react-native-sdk";
import { WagmiProvider } from "@web3auth/react-native-sdk/wagmi";
import { createStorage } from "wagmi";
import AsyncStorage from "@react-native-async-storage/async-storage";

const queryClient = new QueryClient();
const storage = createStorage({
  storage: {
    getItem: async (key) => AsyncStorage.getItem(key),
    setItem: async (key, value) => {
      await AsyncStorage.setItem(key, value);
    },
    removeItem: async (key) => {
      await AsyncStorage.removeItem(key);
    },
  },
});

<QueryClientProvider client={queryClient}>
  <Web3AuthProvider webBrowser={...} storage={...} config={...}>
    <WagmiProvider config={{ storage }}>
      <App />
    </WagmiProvider>
  </Web3AuthProvider>
</QueryClientProvider>

Notes:

• EVM only. Solana sessions are not bound into Wagmi.
• After Web3Auth EVM login, standard Wagmi hooks (useAccount, useBalance, useSignMessage, …) work against the Web3Auth provider.
• A user-triggered Wagmi disconnect awaits web3Auth.logout(). A Web3Auth logout clears Wagmi without recursion.
• Pass only safe Wagmi overrides through config (for example storage, polling, batching). Chains, transports, and the Web3Auth connector are owned by the SDK.
• Expo/Hermes apps should force the legacy Hermes Babel profile and enable import.meta transforms. The default hermes-stable profile assumes native #private support, but Hermes in Expo 54 / RN 0.81 still throws private properties are not supported for ethers (and related packages):

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      [
        "babel-preset-expo",
        {
          unstable_transformProfile: "hermes-v0",
          unstable_transformImportMeta: true,
        },
      ],
    ],
  };
};

See demo/rn-expo-hooks-example for a complete Expo example.

Optional Solana Framework Kit integration is available from @web3auth/react-native-sdk/solana. It bridges the Auth Solana wallet into @solana/react-hooks through SolanaProvider.

Install peers:

npm install @solana/react-hooks@^1.4.0

Nest SolanaProvider under Web3AuthProvider:

import { Web3AuthProvider } from "@web3auth/react-native-sdk";
import { SolanaProvider } from "@web3auth/react-native-sdk/solana";

<Web3AuthProvider webBrowser={...} storage={...} config={...}>
  <SolanaProvider>
    <App />
  </SolanaProvider>
</Web3AuthProvider>

Notes:

• Solana only. Required when importing @web3auth/react-native-sdk/solana (the peer is optional for the core SDK).
• After Web3Auth Solana login, SDK hooks (useSolanaWallet, useSignMessage, useSignTransaction, useSignAndSendTransaction) work against the Auth wallet.
• SolanaProvider also enables Framework Kit hooks from @solana/react-hooks.
• Client wiring is owned by the SDK (walletPersistence: false). Nest under Web3AuthProvider.

Create a Web3Auth instance with your browser adapter, secure storage adapter, and project options. Call init() before connectTo().

import "@web3auth/react-native-sdk/setup";

import * as WebBrowser from "@toruslabs/react-native-web-browser";
import Web3Auth, { AUTH_CONNECTION, WEB3AUTH_NETWORK } from "@web3auth/react-native-sdk";
import EncryptedStorage from "react-native-encrypted-storage";

const scheme = "web3authrnexample";
const redirectUrl = `${scheme}://auth`;

const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
  clientId,
  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  redirectUrl,
});

await web3auth.init();

await web3auth.connectTo({
  authConnection: AUTH_CONNECTION.GOOGLE,
});

import "@web3auth/react-native-sdk/setup";

import Web3Auth, { AUTH_CONNECTION, WEB3AUTH_NETWORK } from "@web3auth/react-native-sdk";
import Constants, { AppOwnership } from "expo-constants";
import * as Linking from "expo-linking";
import * as SecureStore from "expo-secure-store";
import * as WebBrowser from "expo-web-browser";

const redirectUrl =
  Constants.appOwnership === AppOwnership.Expo || Constants.appOwnership === AppOwnership.Guest
    ? Linking.createURL("web3auth", {})
    : Linking.createURL("web3auth", { scheme: "web3authexpoexample" });

const web3auth = new Web3Auth(WebBrowser, SecureStore, {
  clientId,
  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  redirectUrl,
});

await web3auth.init();

await web3auth.connectTo({
  authConnection: AUTH_CONNECTION.GOOGLE,
});

Checkout the examples for your preferred blockchain and platform in our examples

Checkout the Web3Auth Demo to see how Web3Auth can be used in an application.

Further checkout the demo folder within this repository, which contains sample bare and Expo apps.

• Have a look at our Community Portal to see if anyone has any questions or issues you might be having. Feel free to create new topics and we'll help you out as soon as possible.
• Checkout our Troubleshooting Documentation Page to know the common issues and solutions.
• For Priority Support, please have a look at our Pricing Page for the plan that suits your needs.