인증

응용 프로그램에 인증된 액세스 제공

필요에 따라 사용자가 연결 과정에서 지갑으로 메시지에 서명하도록 요구하여 연결된 계정을 소유하고 있음을 입증하게 할 수 있으며, 이를 통해 응용 프로그램에 대한 특권을 가진 인증된 사용자 세션을 생성할 수 있습니다.

커스텀 백엔드와 메시지 형식에 통합하는 것이 가능하긴 하지만, RainbowKit은 Ethereum으로 로그인 및 NextAuth.js.에 대해 일급 지원을 제공합니다

Ethereum과 NextAuth.js로 로그인 설정

아직 설정하지 않았다면, 먼저 NextAuth.js용 공식 Ethereum 로그인 보일러 플레이트로 Next.js 프로젝트를 설정하세요.

설치

@rainbow-me/rainbowkit-siwe-next-auth 패키지와 그 피어 종속성을 설치하세요, ethers.

npm install @rainbow-me/rainbowkit-siwe-next-auth siwe@^2 ethers@^5

참고: siwe는 ethers 피어 종속성을 필요로 하는 반면, wagmi은 현재 대체 수단인 viem에 의존합니다.

프로바이더 설정

App 컴포넌트에서 RainbowKitSiweNextAuthProvider를 가져옵니다.

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

RainbowKitProvider를 RainbowKitSiweNextAuthProvider로 래핑하고, 세션에 접근할 수 있도록 NextAuth의 SessionProvider 내에 중첩되어 있는지 확인하세요.

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 메시지 옵션 사용자 정의

RainbowKitSiweNextAuthProvider의 getSiweMessageOptions prop에 함수를 전달하여 SIWE 메시지 옵션을 사용자 정의할 수 있습니다.

새 메시지가 생성될 때마다 이 함수가 호출됩니다. 이 함수에서 반환된 옵션은 기본값과 병합됩니다.

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 속성 (토큰의 "subject", 즉 사용자)이 사용자의 주소가 될 것입니다.

또한, 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>
  );
}

세션 관리에 대한 자세한 정보는 다음 문서를 참조하십시오:

개요

시작하기

고급

인증

응용 프로그램에 인증된 액세스 제공

Ethereum과 NextAuth.js로 로그인 설정

설치

프로바이더 설정

SIWE 메시지 옵션 사용자 정의

세션 서버에 접근