인증

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

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

커스텀 백엔드와 메시지 형식에 통합하는 것이 가능하긴 하지만, 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 설정

v5 Credentials 공급자를 사용하는 NextAuth 구성을 생성하고 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);

SIWE 검증, nonce 점검, 서버 측 검증에 대한 완전한 with-next-siwe-next-auth 예제을 참조하세요.

프로바이더 설정

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

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>;

세션 서버에 접근

auth 구성을 내보낸 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>
  );
}

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

개요

시작하기

고급