認証

あなたのアプリケーションへの認証されたアクセスの提供

接続プロセス中にユーザーがウォレットでメッセージに署名することを必要とすることも可能で、これにより接続されたアカウントを所有していることの証明と、アプリケーションへの特権アクセスを持つ認証されたユーザーセッションを作成することができる。

カスタムのバックエンドやメッセージ形式と統合することも可能ですが、RainbowKitは Sign-In with Ethereum と NextAuth.js. のファーストクラスサポートを提供しています。

EthereumとNextAuth.jsを使用したサインインを設定する

まだ設定していない場合、最初に Next.jsプロジェクトを公式のSign-In with EthereumのボイラープレートとNextAuth.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';

RainbowKitSiweNextAuthProviderでRainbowKitProviderをラップし、それが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メッセージオプションのカスタマイズ

SIWEメッセージオプションをカスタマイズするには、getSiweMessageOptions propに関数を渡すことにより、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>;

セッションをサーバーサイドでアクセスします

next-auth/jwtからインポートしたNextAuthのgetToken関数を使用してセッショントークンにアクセスできます。ユーザーが正常に認証されている場合、セッショントークンのsubプロパティ（トークンの「主題」、つまりユーザー）はユーザーの住所になります。

また、NextAuthがクライアント側で再度それを解決する必要がないように、解決済みのセッションオブジェクトをgetServerSideProps経由で渡すこともできます。

例えば：

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

セッションの管理に関する詳細は、以下のドキュメンテーションを参照してください：

概要

入門