Користувальницька аутентифікація

Підключіться до власного бекенду аутентифікації

Хоча RainbowKit забезпечує підтримку Вхід з Ethereum і NextAuth на першокласному рівні, ви також можете інтегруватися з користувальницькими бекендами та форматами повідомлень.

Створення користувальницького адаптера

Спочатку створіть адаптер аутентифікації. Це дозволяє RainbowKit створювати/готувати повідомлення та взаємодіяти з вашим бекендом.

Як приклад, ми можемо створити адаптер аутентифікації, який дозволяє нам використовувати Sign-In з Ethereum за допомогою деяких налаштовуваних точок API, наприклад, iron-session.

import { createAuthenticationAdapter } from '@rainbow-me/rainbowkit';
import { createSiweMessage } from 'viem/siwe';

const authenticationAdapter = createAuthenticationAdapter({
  getNonce: async () => {
    const response = await fetch('/api/nonce');
    return await response.text();
  },

  createMessage: ({ nonce, address, chainId }) => {
    return createSiweMessage({
      domain: window.location.host,
      address,
      statement: 'Sign in with Ethereum to the app.',
      uri: window.location.origin,
      version: '1',
      chainId,
      nonce,
    });
  },

  verify: async ({ message, signature }) => {
    const verifyRes = await fetch('/api/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message, signature }),
    });

    return Boolean(verifyRes.ok);
  },

  signOut: async () => {
    await fetch('/api/logout');
  },
});

Створення повідомлення на сервері

createMessage також підтримує повернення Promise, що дозволяє вам створювати EIP-4361 повідомлення на сервері. Для більш строгої безпеки, серверний ендпоінт повинен виводити або перевіряти критично важливі поля безпеки, такі як domain, nonce та мітки часу issued-at, замість довіри до значень клієнта. Дивіться документацію SIWE для отримання додаткової інформації.

  createMessage: async ({ address, chainId }) => {
    const response = await fetch('/api/siwe/message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ address, chainId }),
    });

    if (!response.ok) {
      throw new Error('Failed to create message');
    }

    return await response.text();
  },

Надання стану аутентифікації

Припускаючи, що ваш додаток вже певним чином керує життєвим циклом аутентифікації, ви можете передати поточний статус аутентифікації разом із вашим користувальницьким адаптером до RainbowKitAuthenticationProvider, обгортаючи ваш існуючий RainbowKitProvider.

import {
  createAuthenticationAdapter,
  RainbowKitAuthenticationProvider,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';

const authenticationAdapter = createAuthenticationAdapter({
  /* See above... */
});

const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  // You'll need to resolve AUTHENTICATION_STATUS here
  // using your application's authentication system.
  // It needs to be either 'loading' (during initial load),
  // 'unauthenticated' or 'authenticated'.

  return (
    <WagmiProvider {...etc}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitAuthenticationProvider
          adapter={authenticationAdapter}
          status={AUTHENTICATION_STATUS}
        >
          <RainbowKitProvider {...etc}>
            <Component {...pageProps} />
          </RainbowKitProvider>
        </RainbowKitAuthenticationProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Якщо ви вже створили адаптер для існуючої бібліотеки аутентифікації з відкритим вихідним кодом, будь ласка, розгляньте можливість створення пакета, який можуть використовувати інші!

Огляд

Початок роботи

Розширені можливості

Користувальницька аутентифікація

Підключіться до власного бекенду аутентифікації

Створення користувальницького адаптера

Створення повідомлення на сервері

Надання стану аутентифікації