Otentikasi

Menyediakan akses terotentikasi ke aplikasi Anda

Anda secara opsional dapat mewajibkan pengguna untuk menandatangani pesan dengan dompet mereka selama proses koneksi, membuktikan bahwa mereka memiliki akun yang terhubung dan memungkinkan Anda untuk membuat sesi pengguna terotentikasi dengan akses istimewa ke aplikasi Anda.

Sementara itu mungkin untuk mengintegrasikan dengan back-end dan format pesan khusus, RainbowKit menyediakan dukungan kelas atas untuk Masuk Dengan Ethereum dan NextAuth.

Atur Masuk Dengan Ethereum dan NextAuth

Instal

Instal paket @rainbow-me/rainbowkit-siwe-next-auth.

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

Atur penyedia

Dalam komponen App Anda, import RainbowKitSiweNextAuthProvider.

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

Bungkus RainbowKitProvider dengan RainbowKitSiweNextAuthProvider, pastikan itu bersarang di dalam SessionProvider NextAuth sehingga memiliki akses ke sesi.

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

Dengan RainbowKitSiweNextAuthProvider di tempat, pengguna Anda sekarang akan diminta untuk mengautentikasi dengan menandatangani pesan setelah mereka telah menyambungkan dompet mereka.

Sesuaikan opsi pesan SIWE

Anda dapat menyesuaikan opsi pesan SIWE dengan melewatkan fungsi ke prop getSiweMessageOptions pada RainbowKitSiweNextAuthProvider.

Fungsi ini akan dipanggil setiap kali pesan baru dibuat. Opsi yang dikembalikan dari fungsi ini akan digabungkan dengan setelan bawaan.

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

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;

Akses sesi dari sisi server

Anda dapat mengakses token sesi dengan fungsi getToken dari NextAuth yang diimpor dari next-auth/jwt. Jika pengguna telah berhasil autentikasi, properti sub dari token sesi ("subjek" token, yaitu pengguna) akan menjadi alamat pengguna.

Anda juga dapat meneruskan objek sesi yang telah diselesaikan dari server melalui getServerSideProps sehingga NextAuth tidak perlu menyelesaikannya lagi di klien.

Sebagai contoh:

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

Untuk informasi lebih lanjut tentang mengelola sesi, Anda dapat merujuk ke dokumentasi berikut:

Ikhtisar

Memulai