react-playground

MetaMask Embedded Wallets — React Playground

A comprehensive React demo showcasing the full capabilities of MetaMask Embedded Wallets (powered by Web3Auth): multiple social login methods, chain switching, transaction signing, user info retrieval, MFA, and more. Use this as a reference implementation before building your own integration.

Prerequisites

• Node.js 20+
• npm
• A Client ID from the Dashboard

Setup

1. Clone the repository

git clone https://github.com/Web3Auth/web3auth-examples.git
cd web3auth-examples/react-playground

2. Install dependencies

npm install

3. Configure environment variables

cp .env.example .env

Edit .env and set your Client ID:

VITE_WEB3AUTH_CLIENT_ID=YOUR_CLIENT_ID

4. Run the application

npm run dev

Visit http://localhost:5173 in your browser.

What this playground covers

• Social logins (Google, Facebook, Discord, and more)
• External wallet connections (MetaMask Extension, WalletConnect)
• EVM transaction signing and message signing
• User info and wallet address display
• Chain switching across EVM networks
• MFA setup flow

Resources

• MetaMask Embedded Wallets Documentation
• React SDK
• Dashboard
• Community — Builder Hub

License

MIT