Memindah RainbowKit SIWE ke NextAuth v5

Pakej @rainbow-me/rainbowkit-siwe-next-auth RainbowKit kini menyokong NextAuth v5. Ini adalah peningkatan yang memecahkan untuk aplikasi yang menggunakan adapter NextAuth SIWE kerana NextAuth telah mengubah konfigurasi API server, API pembantu sesi, dan aliran CSRF dalaman.

NextAuth.js kini sebahagian daripada projek yang lebih luas yang dipanggil Auth.js. Nama pakej masih next-auth, dan dokumentasi rasmi NextAuth.js masih tersedia di next-auth.js.org. Panduan ini menggunakan nama pakej next-auth yang anda pasang hari ini sambil memberi peringatan mengenai peralihan Auth.js di mana ia menjejaskan nama cookie dan API v5.

Ikut langkah di bawah jika aplikasi anda kini menggunakan @rainbow-me/rainbowkit-siwe-next-auth dengan NextAuth v4.

1. Tingkatkan kebergantungan

Pasang versi pakej NextAuth v5 yang disokong oleh RainbowKit.

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

2. Kemaskini konfigurasi pelayan NextAuth

NextAuth v5, didokumenkan sebagai sebahagian daripada projek Auth.js, menggunakan jenis NextAuthConfig, pengeksport penyedia Credentials, dan pembantu yang dikembalikan daripada NextAuth(authOptions).

Auth.js mengesyorkan pembolehubah persekitaran AUTH_URL dan AUTH_SECRET. Jika anda sudah mempunyai penggunaan NextAuth v4 menggunakan NEXTAUTH_URL dan NEXTAUTH_SECRET, simpan sebagai lalai semasa anda berhijrah.

- import type { NextAuthOptions } from 'next-auth';
- import CredentialsProvider from 'next-auth/providers/credentials';
+ import NextAuth from 'next-auth';
+ import type { NextAuthConfig } from 'next-auth';
+ import Credentials from 'next-auth/providers/credentials';

- export const authOptions: NextAuthOptions = {
+ export const authOptions: NextAuthConfig = {
    providers: [
-     CredentialsProvider({
+     Credentials({
        name: 'Ethereum',
        credentials: {
          message: { label: 'Message', type: 'text' },
          signature: { label: 'Signature', type: 'text' },
        },
        async authorize(credentials) {
          /* Validate SIWE message, domain, nonce, and signature */
        },
      }),
    ],
+   secret: process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET,
  };
+
+ export const { handlers, auth, signIn, signOut } = NextAuth(authOptions);

Untuk pengendali laluan Penghala Aplikasi, eksport pengendali GET dan POST yang dikembalikan.

export const { GET, POST } = handlers;

Untuk laluan API Penghala Halaman, serahkan authOptions v5 anda kepada NextAuth.

export default NextAuth(authOptions);

3. Kemaskini bacaan sesi pelayan

Jika anda membaca alamat yang disahkan dalam getServerSideProps, beralih daripada pembantu sesi v4 ke pembantu auth v5 yang dieksport oleh konfigurasi pengesahan anda.

Berikan req dan res secara berasingan. Memberikan objek penuh GetServerSidePropsContext kepada auth tidak disokong oleh lebihan v5.

- import { getServerSession } from 'next-auth';
- import { authOptions } from '../auth';
+ import { auth } from '../auth';

  export const getServerSideProps: GetServerSideProps = async (context) => {
-   const session = await getServerSession(
-     context.req,
-     context.res,
-     authOptions,
-   );
+   const session = await auth(context.req, context.res);

    return {
      props: {
        session,
      },
    };
  };

4. Kemaskini pengesahan nonce SIWE

Dalam pelaksanaan v4, contoh RainbowKit membandingkan nonce SIWE dengan getCsrfToken di dalam authorize.

Dalam NextAuth v5, penyedia Credentials menerima token CSRF yang disahkan sebagai credentials.csrfToken selepas NextAuth mengesahkan kuki CSRF permintaan.

- import { getCsrfToken } from 'next-auth/react';

- if (
-   siweMessage.nonce !==
-   (await getCsrfToken({ req: { headers: req.headers } }))
- ) {
-   return null;
- }
+ const csrfToken =
+   credentials && 'csrfToken' in credentials
+     ? credentials.csrfToken
+     : undefined;
+
+ if (siweMessage.nonce !== csrfToken) {
+   return null;
+ }

Kuki dalaman NextAuth v5 menggunakan awalan authjs Auth.js, termasuk authjs.csrf-token atau __Host-authjs.csrf-token bergantung kepada tetapan kuki selamat. Anda tidak perlu menyemak kuki itu sendiri untuk aliran SIWE RainbowKit.

5. Pulangkan alamat yang disahkan pada sesi

Jika aplikasi anda membaca session.address, teruskan pemetaan subjek JWT ke sesi dalam panggilan balik NextAuth anda.

callbacks: {
  async session({ session, token }) {
    session.address = token.sub;
    session.user = {
      ...session.user,
      name: token.sub,
    };
    return session;
  },
},

Anda boleh melihat persediaan penuh NextAuth v5 dalam contoh with-next-siwe-next-auth.

Jika anda juga melakukan peningkatan daripada integrasi SIWE RainbowKit lama, semak log perubahan 0.5.0 untuk migrasi viem/siwe dan log perubahan 0.3.0 untuk perubahan bentuk permintaan getCsrfToken lebih awal.