Інтеграція MetaMask для авторизації на сайті (Web3 Login)

Інтеграція MetaMask для авторизації на сайті (Web3 Login)

Web3 Login через MetaMask дозволяє користувачам авторизуватися на сайті, підписав сповіщення криптографічним ключем кошелька. Без паролей — доказ володіння адресою через підпис.

Механізм авторизації

1. Фронтенд запитує nonce у сервера для адреси кошелька
2. MetaMask показує користувачу сповіщення для підпису
3. Користувач підписує — MetaMask повертає підпис
4. Сервер верифікує підпис та видає JWT

Frontend: підключення MetaMask

import { ethers } from 'ethers';

async function loginWithMetaMask(): Promise<void> {
  // 1. Перевірити наявність MetaMask
  if (!window.ethereum) {
    throw new Error('MetaMask не встановлений');
  }

  // 2. Запросити доступ до аккаунтів
  const provider = new ethers.BrowserProvider(window.ethereum);
  await provider.send('eth_requestAccounts', []);
  const signer = await provider.getSigner();
  const address = await signer.getAddress();

  // 3. Отримати nonce від сервера
  const nonceResponse = await fetch(`/api/auth/nonce?address=${address}`);
  const { nonce } = await nonceResponse.json();

  // 4. Підписати сповіщення
  const message = `Войти на example.com\n\nNonce: ${nonce}\nTime: ${new Date().toISOString()}`;
  const signature = await signer.signMessage(message);

  // 5. Відправити підпис серверу
  const authResponse = await fetch('/api/auth/web3', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ address, signature, message })
  });

  const { token } = await authResponse.json();
  localStorage.setItem('auth_token', token);
}

Backend: верифікація підпису

// Node.js + ethers.js
import { ethers } from 'ethers';
import { randomBytes } from 'crypto';

// Зберігання nonce (Redis з TTL 5 хв)
async function getNonce(address: string): Promise<string> {
  const normalized = address.toLowerCase();
  const existing = await redis.get(`nonce:${normalized}`);
  if (existing) return existing;

  const nonce = randomBytes(16).toString('hex');
  await redis.setex(`nonce:${normalized}`, 300, nonce);
  return nonce;
}

// Верифікація
async function verifyWeb3Auth(req, res) {
  const { address, signature, message } = req.body;
  const normalized = address.toLowerCase();

  // Перевірити nonce у сповіщенні
  const storedNonce = await redis.get(`nonce:${normalized}`);
  if (!storedNonce || !message.includes(storedNonce)) {
    return res.status(401).json({ error: 'Invalid or expired nonce' });
  }

  // Відновити адресу з підпису
  const recoveredAddress = ethers.verifyMessage(message, signature).toLowerCase();

  if (recoveredAddress !== normalized) {
    return res.status(401).json({ error: 'Signature verification failed' });
  }

  // Видалити використаний nonce
  await redis.del(`nonce:${normalized}`);

  // Знайти або створити користувача
  let user = await userRepo.findByWalletAddress(normalized);
  if (!user) {
    user = await userRepo.create({ walletAddress: normalized });
  }

  const token = jwt.sign(
    { sub: user.id, walletAddress: normalized },
    process.env.JWT_SECRET,
    { expiresIn: '7d' }
  );

  res.json({ token, userId: user.id });
}

Підтримка кількох кошельків

// Привязка додаткового кошелька до аккаунта
async function linkWallet(userId: string, address: string, signature: string) {
  const existing = await walletRepo.findByAddress(address.toLowerCase());
  if (existing) throw new Error('Wallet already linked to another account');

  await walletRepo.create({
    userId,
    address: address.toLowerCase(),
    linkedAt: new Date()
  });
}

Терміни

MetaMask Login з nonce-верифікацією та JWT — 2–3 дні.