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