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 dan NextAuth v5.

npm install @rainbow-me/rainbowkit-siwe-next-auth [email protected]

Jika Anda memperbarui integrasi SIWE NextAuth v4 yang sudah ada, ikuti panduan migrasi NextAuth v5.

Siapkan NextAuth

Buat konfigurasi NextAuth yang menggunakan penyedia Credentials v5 dan ekspor helper auth. Implementasi authorize Anda harus memvalidasi pesan SIWE, tanda tangan, domain, dan nonce sebelum mengembalikan alamat yang terautentikasi.

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

Lihat contoh lengkap with-next-siwe-next-auth untuk validasi SIWE, pemeriksaan nonce, dan verifikasi sisi server.

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

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 default.

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 sesi menggunakan fungsi auth yang diekspor dari konfigurasi otentikasi Anda. Jika pengguna telah berhasil terautentikasi, properti address di sesi 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 { 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>
  );
}

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

Ikhtisar

Memulai

Lanjutan