認証
認証
あなたのアプリケーションへの認証されたアクセスの提供
接続プロセス中にユーザーがウォレットでメッセージに署名することを必要とすることも可能で、これにより接続されたアカウントを所有していることの証明と、アプリケーションへの特権アクセスを持つ認証されたユーザーセッションを作成することができる。
カスタムのバックエンドやメッセージ形式と統合することも可能ですが、RainbowKitは Sign-In with 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メッセージオプションをカスタマイズするには、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;
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>
);
}
セッションの管理に関する詳細は、以下のドキュメンテーションを参照してください: