This repository contains React Native example apps for integrating MetaMask Embedded Wallets (formerly Web3Auth). Each example demonstrates a specific use case and is fully runnable on iOS and Android.
All examples use the v10 hooks API (Web3AuthProvider, useWeb3AuthConnect, useWeb3AuthDisconnect, etc.) from @web3auth/react-native-sdk ^10.0.0, which mirrors the pattern of the Web SDK.
MetaMask Embedded Wallets (formerly Web3Auth Plug and Play) provides non-custodial social login wallets. Users authenticate with Google, Facebook, Auth0, Firebase, or any JWT provider — and get a deterministic, non-custodial wallet without ever managing a seed phrase.
- No seed phrases for users
- Social logins (Google, Facebook, Discord, Apple, and more)
- Custom authentication via Auth0, Firebase, or any JWT provider
- Built-in EVM and Solana wallets exposed via
connection.ethereumProviderandconnection.solanaWallet - Cross-platform — runs on iOS and Android
| Example | Description | Auth Method |
|---|---|---|
| Quick Start | Minimal integration with Ethereum and email OTP | Email OTP |
| Auth0 Example | SDK-native Auth0 login — no react-native-auth0 required |
Custom (Auth0, SDK-native) |
| Firebase Example | Bring-your-own-JWT with Firebase Authentication | Custom (Firebase JWT) |
| Solana Example | Solana chain integration with SolanaProvider and /solana hooks |
Email OTP |
| Grouped Connections | Link multiple auth methods so the same user always gets the same wallet | Social + Custom (grouped) |
| Example | Description | Auth Method |
|---|---|---|
| Expo Example | Expo managed workflow with expo-web-browser and expo-secure-store |
Email OTP |
Note: Bare examples require React Native 0.84+. The Expo example currently uses SDK 51 (RN 0.74) until Expo SDK 56 ships with RN 0.85+.
The deprecated SFA (Single Factor Auth / Core Kit) SDK has been removed. The bring-your-own-JWT pattern previously shown in SFA examples is now demonstrated by
rn-bare-firebase-example.
Examples follow one of two structures — pick the one that matches your goal:
Single-file (quick-start tier): rn-bare-quick-start and rn-expo-example put everything in one App.tsx. Read it top to bottom and you have the full integration. Start here if you are new to Web3Auth.
Split into components/ (feature tier): rn-bare-auth0-example, rn-bare-firebase-example, rn-bare-solana-example, and rn-bare-aggregate-verifier-example separate the login screen (LoginView.tsx), logged-in screen (HomeView.tsx), and console output (Console.tsx). The login file is the point of each example — it contains only what is unique to that auth method. Start with App.tsx (provider + routing), then open components/LoginView.tsx to see the auth-specific code.
Both tiers use the same web3authConfig.ts for chain and SDK configuration, and the same lib/evm.ts (viem helpers) or lib/solana.ts for blockchain calls.
- Clone this repository:
git clone https://github.com/Web3Auth/web3auth-react-native-examples.git
- Go to the example you want to run and follow its individual README.
- Get a Client ID from the Web3Auth Dashboard.
- Paste the Client ID into
web3authConfig.tsin the example folder and update the redirect URL. - Run on Android or iOS.
Hooks API — Every example wraps the app in <Web3AuthProvider webBrowser={...} storage={...} config={...}> and uses hooks: useWeb3Auth, useWeb3AuthConnect, useWeb3AuthDisconnect, useWeb3AuthUser, and more. The imperative new Web3Auth(...) style from older docs is superseded by this pattern.
Dashboard setup — Every example requires a Client ID from dashboard.web3auth.io. You must also allowlist your app's redirect URL scheme (e.g. web3authrnexample://auth) under Allowed Origins in the Dashboard.
AUTH_CONNECTION — Replaces the old LOGIN_PROVIDER enum. Use AUTH_CONNECTION.EMAIL_PASSWORDLESS, AUTH_CONNECTION.GOOGLE, AUTH_CONNECTION.CUSTOM, etc. when calling connectTo(...).
Connection object — After login, useWeb3Auth() exposes connection instead of provider. For EVM, use connection?.ethereumProvider with viem. For Solana, wrap the app in SolanaProvider and use hooks from @web3auth/react-native-sdk/solana.
Chain configuration — Instead of constructing EthereumPrivateKeyProvider or SolanaPrivateKeyProvider, pass a chains array and defaultChainId in web3AuthOptions. The SDK creates the appropriate wallet automatically based on the chainNamespace.
authConnectionId — Replaces loginConfig.jwt.verifier. Set it to the Connection ID in your Dashboard. For grouped connections, also pass groupedAuthConnectionId.
Sapphire networks — Use WEB3AUTH_NETWORK.SAPPHIRE_DEVNET during development and switch to WEB3AUTH_NETWORK.SAPPHIRE_MAINNET for production. The two networks derive different wallet addresses — never mix them.
Polyfills — Every example's index.js / index.ts imports @web3auth/react-native-sdk/setup as the very first statement (seeds crypto and Buffer polyfills). metro.config.js wraps the config with withWeb3Auth(getDefaultConfig(__dirname)) — no manual extraNodeModules block needed.
React Native version — Bare workflow examples require React Native 0.84+ for the native URL API (URL, URLSearchParams, etc.). Do not add react-native-url-polyfill on 0.84+. See the React Native support policy.
What 0.84 does not replace — You still need @web3auth/react-native-sdk/setup (crypto / Buffer), withWeb3Auth() in Metro (Node built-in aliases), and react-native-quick-crypto. The Solana example also keeps polyfills.js (Ed25519 crypto.subtle, AbortSignal.timeout, window event APIs) and @web3auth/auth Metro shims — none of those are fixed by the RN upgrade.
- MetaMask Embedded Wallets Docs
- React Native SDK Reference
- v8 to v9 Migration Guide
- v9 to v10 Migration Guide
- Hooks Reference
- Dashboard
- Metro Polyfill Troubleshooting
- Community (Builder Hub)
MIT — see LICENSE.