Authentification

Fournir un accès authentifié à votre application

Vous pouvez éventuellement exiger que les utilisateurs signent un message avec leur portefeuille lors du processus de connexion, prouvant qu'ils possèdent le compte connecté et vous permettant de créer une session utilisateur authentifiée avec un accès privilégié à votre application.

Alors qu'il est possible d'intégrer avec des back-ends personnalisés et des formats de messages, RainbowKit offre un support de première classe pour Se connecter avec Ethereum et NextAuth.js.

Configurer Se connecter avec Ethereum et NextAuth.js

Si vous ne l'avez pas déjà fait, commencez par configurer votre projet Next.js avec le modèle officiel Se connecter avec Ethereum pour NextAuth.js.

Installer

Installez le paquet @rainbow-me/rainbowkit-siwe-next-auth et sa dépendance de pair, ethers.

npm install @rainbow-me/rainbowkit-siwe-next-auth siwe@^2 ethers@^5

Remarque: siwe nécessite la dépendance de pair ethers, tandis que wagmi repose maintenant sur l'alternative viem.

Configurez le fournisseur

Dans votre composant App, importez RainbowKitSiweNextAuthProvider.

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

Enveloppez RainbowKitProvider avec RainbowKitSiweNextAuthProvider, en veillant à ce qu'il soit imbriqué dans le SessionProvider de NextAuth afin qu'il ait accès à la session.

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

Avec RainbowKitSiweNextAuthProvider en place, vos utilisateurs seront désormais invités à s'authentifier en signant un message une fois qu'ils ont connecté leur portefeuille.

Personnalisez les options de message SIWE

Vous pouvez personnaliser les options de message SIWE en passant une fonction à la propriété getSiweMessageOptions sur RainbowKitSiweNextAuthProvider.

Cette fonction sera appelée chaque fois qu'un nouveau message est créé. Les options renvoyées par cette fonction seront fusionnées avec les valeurs par défaut.

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

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

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

Accédez à la session côté serveur

Vous pouvez accéder au jeton de session avec la fonction getToken de NextAuth importée de next-auth/jwt. Si l'utilisateur a réussi à s'authentifier, la propriété sub du jeton de session (le "sujet" du jeton, c'est-à-dire l'utilisateur) sera l'adresse de l'utilisateur.

Vous pouvez également transmettre l'objet de session résolu du serveur via getServerSideProps afin que NextAuth n'ait pas besoin de le résoudre à nouveau sur le client.

Par exemple :

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

Pour plus d'informations sur la gestion de la session, vous pouvez consulter la documentation suivante :

Aperçu

Prise en main