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

Надання аутентифікованого доступу до вашого застосунку

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

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

Налаштування Входу за допомогою Ethereum та NextAuth

Встановлення

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

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

Якщо ви оновлюєте існуючу інтеграцію NextAuth v4 SIWE, дотримуйтесь посібника з міграції 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>
  );
}

Для отримання додаткової інформації про управління сесією ви можете звернутися до наступної документації:

Огляд

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

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