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

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

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

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

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

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

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

npm install @rainbow-me/rainbowkit-siwe-next-auth

Налаштуйте провайдера

У вашому компоненті 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 {
  QueryClientProvider,
  QueryClient,
} 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>;

Доступ до сесії на серверній стороні

Ви можете отримати доступ до токену сесії за допомогою функції NextAuth getToken, яка імпортується з next-auth/jwt. Якщо користувач успішно аутентифікувався, властивість sub токену сесії ("предмет" токену, тобто користувач) буде адресою користувача.

Ви також можете передати об'єкт сесії, який був розгорнутий на сервері, через getServerSideProps, щоб NextAuth не потребував його повторного розгортання на клієнті.

Наприклад:

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await getSession(context);
  const token = await getToken({ req: context.req });

  const address = token?.sub ?? 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>
  );
}

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

Огляд

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