Integrate WalletConnect for Crypto Wallet Login on Your Site

Integrate WalletConnect for Crypto Wallet Login on Your Site

You've built a dApp and hit a problem: users can't log in from a mobile wallet. Browser extensions like MetaMask don't work on phones, and integrating each wallet separately is a never-ending headache. We solve this with WalletConnect—an open protocol that enables connecting 400+ wallets in a few days via QR code or deep link. Below is how we do it, with code and real configs. If you're looking for a ready-made Web3 authentication solution, reach out: we'll implement the integration tailored to your requirements.

Why WalletConnect v2, Not v1?

WalletConnect v2 (via Reown AppKit) fully replaced the first version. It's faster: connection takes under a second versus several seconds in v1. Supports multichain: can connect simultaneously to Ethereum, Polygon, and Arbitrum (up to 5 networks). And crucially—built-in authorization via message signing (EIP-712). V1 is no longer supported and is not recommended for new projects.

How Wallet Connection Works

The process looks like this:

1. User clicks "Connect Wallet".
2. A WalletConnect session is generated, a QR code or deep link is displayed.
3. The user's wallet scans the QR, signs the connection request.
4. The dApp receives the wallet address and can request transaction signatures.

For authorization, we additionally request a message signature (Sign-in with Ethereum): the user signs a nonce, the server verifies the signature and issues a JWT token. No passwords.

How Is Authorization Security Ensured?

The WalletConnect Protocol uses end-to-end encryption and does not store private keys on the server.

Authorization via nonce signing protects against replay attacks. The nonce is generated by the server, has a short lifetime (usually 5 minutes), and is invalidated after use. Additional CORS restrictions can be configured on the API side.

Implementation in React + Wagmi (AppKit)

Install the packages:

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi [email protected] @tanstack/react-query 

Register the project on Reown Cloud (free plan – up to 50,000 active users per month). Get the projectId.

Connection code:

import { createAppKit } from '@reown/appkit/react'; import { WagmiProvider } from 'wagmi'; import { mainnet, polygon, arbitrum } from '@reown/appkit/networks'; import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID; const networks = [mainnet, polygon, arbitrum]; const wagmiAdapter = new WagmiAdapter({ networks, projectId }); createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata: { name: 'My App', description: 'My Web3 Application', url: 'https://example.com', icons: ['https://example.com/icon.png'] }, features: { analytics: false, email: false, socials: false } }); function App() { return ( <WagmiProvider config={wagmiAdapter.wagmiConfig}> <QueryClientProvider client={queryClient}> <YourApp /> </QueryClientProvider> </WagmiProvider> ); } 

Connect Button and Authorization

import { useAppKit, useAppKitAccount } from '@reown/appkit/react'; import { useSignMessage } from 'wagmi'; function ConnectButton() { const { open } = useAppKit(); const { address, isConnected } = useAppKitAccount(); const { signMessageAsync } = useSignMessage(); const handleLogin = async () => { if (!isConnected) { await open(); return; } // Authorization via signature const nonce = await fetch(`/api/auth/nonce?address=${address}`) .then(r => r.json()).then(d => d.nonce); const message = `Authorization on our site\nNonce: ${nonce}`; const signature = await signMessageAsync({ message }); const { token } = await fetch('/api/auth/web3', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ address, signature, message }) }).then(r => r.json()); setAuthToken(token); }; return ( <button onClick={handleLogin}> {isConnected ? `Log in as ${address?.slice(0, 6)}...` : 'Connect Wallet'} </button> ); } 

Configuring Deep Link for Mobile Wallets

Deep link allows opening the wallet directly from the site on a mobile device, bypassing the QR code. We configure universal link for iOS and intent for Android. In Reown Cloud, enable deep link in the project settings and specify supported schemes (e.g., wc:). For correct operation on Android, intent handling via WalletConnectBridge is required.

Handling Connection Errors

It's important to handle errors: user rejection, timeout, unsupported network. Wagmi AppKit provides the useWalletInfo and useConnectionError hooks. We add a fallback: if connection fails, offer the option to use a browser extension. We also log events for debugging.

Project ID

WalletConnect v2 requires project registration on Reown Cloud to obtain a projectId. Free plan: up to 50,000 active users/month. This is enough for most startups. If a large volume is needed, paid plans are available.

Supported Wallets

WalletConnect works with MetaMask Mobile, Trust Wallet, Rainbow, Coinbase Wallet, Ledger Live, Argent, Safe, and hundreds of others. For mobile—QR code or universal link.

Reown Cloud Plan Comparison

What's Included in the Work?

• Project registration and API key configuration.
• Development of the wallet connect component (button, modal, state handling).
• Implementation of authorization via message signing (Sign-in with Ethereum).
• Multichain support (up to 5 networks).
• Integration documentation and user instructions.
• Compatibility guarantee with major wallets.

Timelines

Basic WalletConnect integration with authorization—3–5 days. If a custom modal, deep link, or referral links are needed—up to 2 weeks. We'll assess your project for free—contact us to discuss details.

Get a consultation on WalletConnect integration—let's discuss your project and suggest an optimal plan. Order a turnkey integration with a compatibility guarantee: our engineers with years of blockchain experience will implement everything quickly and securely.