Мы знаем, что классический 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.