Розробка системи social login для Web3 (Web3Auth, Privy)

Розроблення системи social login для Web3 (Web3Auth, Privy)

Класичний Web3 onboarding — "встанови MetaMask, створи seed phrase, збереги 24 слова, нікому не показуй" — вбиває конверсію. За дослідженнями, 60–80% потенційних користувачів Web3-застосунків кидають онбординг на етапі створення гаманця. Social login для Web3 розв'язує це: користувач входить через Google/Apple/Twitter, отримує non-custodial гаманець без seed phrase, та сразу може взаємодіяти з dApp. Розберемо дві основні платформи та деталі реалізації.

Web3Auth: MPC під капотом

Web3Auth використовує Threshold Key Infrastructure (tKey) — MPC-протокол, де приватний ключ ділиться на shares, які ніколи не збираються разом на одному пристрої.

Як це працює технічно

При першому вході через Google:

1. OAuth флоу → JWT token від Google
2. Web3Auth Nodes верифікують JWT через JWKS endpoint Google
3. Nodes генерують key share (1/3 ключа), зберігають у себе
4. Device share (1/3) генерується та шифрується у браузері/застосунку
5. Backup share (1/3) — може бути recovery phrase, пароль, або соціальний фактор

Для відновлення достатньо 2 з 3 shares (2-of-3 threshold). Ключ реконструюється in-memory тільки на момент підпису.

Інтеграція Web3Auth з Viem

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", // production мережа
  privateKeyProvider,
});

await web3auth.init();

// Кнопка "Войти через Google"
const provider = await web3auth.connect();

// Створюємо walletClient як звичайно
const walletClient = createWalletClient({
  chain: mainnet,
  transport: custom(provider!),
});

const [address] = await walletClient.getAddresses();

Web3Auth + Account Abstraction

Web3Auth часто комбінюють з EIP-4337 для gasless experience. Web3Auth генерує EOA-ключ, який стає owner смарт-гаманця:

import { providerToSmartAccountSigner } from "permissionless";
import { signerToSimpleSmartAccount } from "permissionless/accounts";

// Web3Auth provider → signer → Smart Account
const smartAccountSigner = await providerToSmartAccountSigner(provider);
const smartAccount = await signerToSimpleSmartAccount(publicClient, {
  signer: smartAccountSigner,
  factoryAddress: FACTORY_ADDRESS,
  entryPoint: ENTRY_POINT_ADDRESS,
});

Тепер користувач: війшов через Google, отримав адресу смарт-гаманця, транзакції безплатні (Paymaster спонсирує газ). Нульовий фрикшн.

Privy: акцент на embedded wallets

Privy позиціонується як "auth для крипто застосунків" з більш вираженим фокусом на developer experience та embedded wallet концепцію. Гаманець створюється автоматично при першому вході та привʼязаний до рахунку користувача, а не пристрою.

Ключові відмінності від Web3Auth

Privy зберігає key shares на своїх серверах у зашифрованому вигляді, користувач може відновити доступ через email верифікацію без seed phrase. Менш децентралізовано ніж Web3Auth MPC, але простіше у UX та достатньо для більшості consumer застосунків.

Unified auth — Privy об'єднує в одному SDK: соціальний вхід (Google, Apple, Twitter, Discord), email/SMS OTP, та підключення зовнішніх гаманців (MetaMask, Coinbase Wallet). Користувач може привʼязати всі методи входу до одного рахунку.

import { PrivyProvider, usePrivy, useWallets } from "@privy-io/react-auth";

// Provider обгортає застосунок
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>;
  }

  // embedded гаманець автоматично створений
  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); // Base

    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,
    });
  };
}

Порівняння платформ

Обробка edge cases

Користувач війшов з двох пристроїв — у Web3Auth проблем нема (MPC shares синхронізуються), у Privy embedded гаманець привʼязаний до рахунку, а не пристрою. Проблема виникає якщо користувач хоче експортувати ключ — у 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

Повна інтеграція з нуля — 1–3 тижні залежно від складності продукту. Основне час йде не на SDK інтеграцію (це швидко), а на: дизайн onboarding флоу, обробку edge cases, тестування відновлення доступу, та інтеграцію з вашою системою користувачів/аутентифікації.