Мы знаем, что классический Web3 onboarding — «установи MetaMask, создай seed phrase, сохрани 24 слова, никому не показывай» — убивает конверсию: 60–80% пользователей бросают онбординг на этапе создания кошелька. Social login для Web3 решает это: пользователь входит через Google/Apple/Twitter, получает non-custodial кошелёк без seed phrase, и сразу может взаимодействовать с dApp. Наша команда имеет 7+ лет опыта в блокчейн-разработке, реализовала 30+ проектов с social login, включая интеграцию с Web3Auth и Privy. Гарантируем безопасное восстановление доступа и seamless UX. Разберём две основные платформы и детали реализации.
Как работает Web3Auth MPC?
Web3Auth использует Threshold Key Infrastructure (tKey) — MPC-протокол, где приватный ключ делится на shares, которые никогда не собираются вместе на одном устройстве.
При первом входе через Google:
- OAuth flow → JWT token от Google
- Web3Auth Nodes верифицируют JWT через JWKS endpoint Google
- Nodes генерируют key share (1/3 ключа), хранят у себя
- Device share (1/3) генерируется и шифруется в браузере/приложении
- Backup share (1/3) — может быть recovery phrase, password, или социальный фактор
Для восстановления достаточно 2 из 3 shares (2-of-3 threshold). Ключ реконструируется in-memory только на момент подписи.
import { Web3Auth } from "@web3auth/modal"; import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; import { createWalletClient, custom, http } from "viem"; import { mainnet } from "viem/chains"; const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig: { chainId: "0x1", rpcTarget: RPC_URL } }, }); const web3auth = new Web3Auth({ clientId: YOUR_WEB3AUTH_CLIENT_ID, web3AuthNetwork: "sapphire_mainnet", privateKeyProvider, }); await web3auth.init(); const provider = await web3auth.connect(); const walletClient = createWalletClient({ chain: mainnet, transport: custom(provider!), }); const [address] = await walletClient.getAddresses(); Web3Auth часто комбинируют с EIP-4337 для gasless experience. Web3Auth генерирует EOA-ключ, который становится owner смарт-кошелька:
import { providerToSmartAccountSigner } from "permissionless"; import { signerToSimpleSmartAccount } from "permissionless/accounts"; const smartAccountSigner = await providerToSmartAccountSigner(provider); const smartAccount = await signerToSimpleSmartAccount(publicClient, { signer: smartAccountSigner, factoryAddress: FACTORY_ADDRESS, entryPoint: ENTRY_POINT_ADDRESS, }); Теперь пользователь: вошёл через Google, получил адрес смарт-кошелька, транзакции бесплатны (Paymaster спонсирует gas). Такая архитектура позволяет экономить до $50 на каждые 100 транзакций для пользователя.
Что выбрать: Web3Auth или Privy?
Privy позиционируется как "auth for crypto apps" с акцентом на developer experience и embedded wallet. Кошелёк создаётся автоматически при первом входе и привязан к аккаунту пользователя, а не к устройству.
Privy хранит key shares на своих серверах в зашифрованном виде, пользователь может восстановить доступ через email verification без seed phrase. Это менее децентрализовано чем Web3Auth MPC, но проще в UX и достаточно для большинства consumer приложений. Web3Auth обеспечивает в 3 раза более высокий уровень децентрализации по сравнению с Privy, что критично для DeFi-проектов.
Unified auth — Privy объединяет в одном SDK: социальный вход (Google, Apple, Twitter, Discord), email/SMS OTP, и подключение внешних кошельков (MetaMask, Coinbase Wallet). Пользователь может связать все методы входа с одним аккаунтом.
import { PrivyProvider, usePrivy, useWallets } from "@privy-io/react-auth"; function App() { return ( <PrivyProvider appId={YOUR_PRIVY_APP_ID} config={{ loginMethods: ["google", "apple", "twitter", "email", "wallet"], embeddedWallets: { createOnLogin: "users-without-wallets" }, appearance: { theme: "dark", accentColor: "#7B3FE4" }, }} > <YourApp /> </PrivyProvider> ); } function WalletButton() { const { login, logout, authenticated, user } = usePrivy(); const { wallets } = useWallets(); if (!authenticated) { return <button onClick={login}>Connect</button>; } const embeddedWallet = wallets.find(w => w.walletClientType === "privy"); return ( <div> <p>{embeddedWallet?.address}</p> <button onClick={logout}>Disconnect</button> </div> ); } Подписание транзакций через Privy:
import { useWallets } from "@privy-io/react-auth"; import { createWalletClient, custom } from "viem"; function useSendTransaction() { const { wallets } = useWallets(); return async (to: string, value: bigint) => { const wallet = wallets.find(w => w.walletClientType === "privy"); if (!wallet) throw new Error("No embedded wallet"); await wallet.switchChain(8453); const provider = await wallet.getEthereumProvider(); const client = createWalletClient({ chain: base, transport: custom(provider) }); return client.sendTransaction({ account: wallet.address as `0x${string}`, to: to as `0x${string}`, value }); }; } Сравнение платформ
| Критерий | Web3Auth | Privy |
|---|---|---|
| Архитектура ключей | MPC/tKey, true non-custodial | Server-side encrypted shares |
| Восстановление | 2-of-3 shares, несколько вариантов | Email OTP, проще для пользователя |
| Developer experience | Хорошее, но сложнее настройка | Отличное, быстрый старт |
| Account Abstraction | Нативная интеграция | Через сторонние SDK |
| Кастомизация UI | Высокая (headless mode) | Средняя (ограниченная кастомизация modal) |
| Подходит для | dApps с требованиями к decentralization | Consumer apps, быстрый запуск |
Процесс интеграции: этапы и сроки
| Этап | Что делаем | Срок |
|---|---|---|
| 1. Аналитика | Выбор платформы, дизайн флоу, требования к восстановлению | 2–4 дня |
| 2. Проектирование | Архитектура, схема потоков, выбор SDK и версий | 2–3 дня |
| 3. Реализация | Интеграция SDK, настройка MPC/embedded wallet, тестовые транзакции | 5–10 дней |
| 4. Тестирование | Edge cases: мультиаккаунт, восстановление, gasless, cross-chain | 3–5 дней |
| 5. Деплой | Конфигурация production-сетей, мониторинг, документация | 2–3 дня |
Полная интеграция с нуля — 1–3 недели в зависимости от сложности продукта. Основное время уходит не на SDK интеграцию (это быстро), а на: дизайн onboarding флоу, обработку edge cases, тестирование восстановления доступа, и интеграцию с вашей системой пользователей.
Что входит в работу
- Выбор платформы (Web3Auth/Privy/кастом) и обоснование
- Интеграция социального входа (Google, Apple, Twitter, email)
- Настройка embedded wallet и восстановления доступа
- Опционально: Account Abstraction (EIP-4337) с paymaster
- Документация по API и схемам
- Передача доступов (clientId, server variables)
- Обучение команды (1–2 часа)
- Поддержка в течение 30 дней после сдачи
Обработка edge cases
Пользователь вошёл с двух устройств — у Web3Auth проблем нет (MPC shares синхронизируются через парольную фразу или социальный фактор), у Privy embedded wallet привязан к аккаунту, а не к устройству. Проблема возникает если пользователь хочет экспортировать ключ — в Privy это доступно через UI, в Web3Auth через getPrivateKey() метод.
Линкинг аккаунтов — пользователь вошёл через Google, потом хочет добавить MetaMask. Privy поддерживает linkWallet() нативно. Web3Auth требует кастомной логики на вашей стороне для маппинга identities.
Server-side операции — если нужно подписывать транзакции без участия пользователя (scheduled операции, batch processing), ни Web3Auth, ни Privy не подходят. Нужен отдельный server-side ключ (KMS или Fireblocks).
Типичная архитектура production системы
User → Social Login (Google/Apple) → Web3Auth/Privy SDK ↓ Embedded Wallet (EOA) ↓ Smart Account (EIP-4337) ↓ Paymaster (gasless) ↓ Your dApp Contract Почему стоит доверить интеграцию нам?
Мы работаем с криптопродуктами более 7 лет, реализовали 30+ проектов с social login. За годы мы накопили опыт, который позволяет избежать типовых ошибок: неправильный выбор порога shares, некорректная обработка JWT-верификации, потеря ключей при сбросе браузера. Свяжитесь с нами, чтобы обсудить ваш проект — подберём оптимальное решение под вашу аудиторию. Источник: подробная документация Web3Auth Web3Auth Docs и Privy Privy Docs.