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