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

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

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

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

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

Как это работает технически

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

1. OAuth flow → 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, password, или социальный фактор

Для восстановления достаточно 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 спонсирует gas). Zero friction.

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

Privy позиционируется как "auth for crypto apps" с более выраженным фокусом на developer experience и embedded wallet концепции. Кошелёк создаётся автоматически при первом входе и привязан к аккаунту пользователя, а не к устройству.

Ключевые отличия от Web3Auth

Privy хранит key shares на своих серверах в encrypted виде, пользователь может восстановить доступ через email verification без 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 wallet автоматически создан
  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 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

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