Аутентификация

Предоставление аутентифицированного доступа к вашему приложению

Вы можете по желанию требовать, чтобы пользователи подписывали сообщение своим кошельком в процессе подключения, доказывая таким образом, что они владеют подключенным аккаунтом, и позволить вам создать аутентифицированный пользовательский сеанс с привилегированным доступом к вашему приложению.

Хотя возможно интегрироваться с собственными бэк-эндами и форматами сообщений, RainbowKit предоставляет первоклассную поддержку Вход по Ethereum и NextAuth.

Настройка Входа по Ethereum и NextAuth

Установить

Установите пакет @rainbow-me/rainbowkit-siwe-next-auth и NextAuth v5.

npm install @rainbow-me/rainbowkit-siwe-next-auth [email protected]

Если вы обновляете существующую интеграцию SIWE на NextAuth v4, следуйте руководству по миграции на NextAuth v5.

Настройка NextAuth

Создайте конфигурацию NextAuth, использующую провайдер v5 Credentials и экспортирующую помощник auth. Ваша реализация authorize должна проверять сообщение SIWE, подпись, домен и nonce перед возвратом аутентифицированного адреса.

import NextAuth from 'next-auth';
import type { NextAuthConfig } from 'next-auth';
import Credentials from 'next-auth/providers/credentials';

export const authOptions: NextAuthConfig = {
  providers: [
    Credentials({
      name: 'Ethereum',
      credentials: {
        message: { label: 'Message', type: 'text' },
        signature: { label: 'Signature', type: 'text' },
      },
      async authorize(credentials) {
        const siweMessage = await validateSiweCredentials(credentials);

        if (!siweMessage) {
          return null;
        }

        return {
          id: siweMessage.address,
        };
      },
    }),
  ],
  secret: process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET,
  session: {
    strategy: 'jwt',
  },
};

export const { handlers, auth, signIn, signOut } = NextAuth(authOptions);

Посмотрите полный пример with-next-siwe-next-auth, включающий проверку SIWE, проверку nonce и серверную верификацию.

Настройте провайдера

В вашем компоненте App импортируйте RainbowKitSiweNextAuthProvider.

import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';

Оберните RainbowKitProvider с помощью RainbowKitSiweNextAuthProvider, убедившись, что он вложен в SessionProvider от NextAuth, чтобы иметь доступ к сессии.

import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <WagmiProvider {...etc}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider {...etc}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>
  );
}

С RainbowKitSiweNextAuthProvider на месте, ваши пользователи теперь будут призываться к аутентификации путем подписания сообщения после того, как они подключили свой кошелек.

Настройте параметры сообщения SIWE

Вы можете настроить опции сообщений SIWE, передав функцию в свойство getSiweMessageOptions на RainbowKitSiweNextAuthProvider.

Эта функция будет вызываться каждый раз при создании нового сообщения. Опции, возвращенные этой функцией, будут объединены с умолчаниями.

import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;

Доступ к серверной сессии

Вы можете получить доступ к сессии, используя функцию auth, экспортированную из вашей конфигурации аутентификации. Если пользователь успешно аутентифицировался, свойство address сессии будет содержать адрес пользователя.

Вы также можете передать объект сессии, разрешенный на сервере, через getServerSideProps, чтобы NextAuth не нужно было разрешать его снова на клиенте.

Например:

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { auth } from '../auth';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await auth(context.req, context.res);

  const address = session?.address ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({
  address,
}: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}

Для получения дополнительной информации о управлении сессией вы можете обратиться к следующей документации:

Обзор

Начало работы

Продвинутый уровень