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.

Configurer Se connecter avec Ethereum et NextAuth

Installer

Installez le paquet @rainbow-me/rainbowkit-siwe-next-auth et NextAuth v5.

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

Si vous mettez à niveau une intégration SIWE existante de NextAuth v4, suivez le guide de migration vers NextAuth v5.

Configurer NextAuth

Créez une configuration NextAuth qui utilise le fournisseurCredentials de v5 et exporte l'assistant auth. Votre implémentation authorize devrait valider le message SIWE, la signature, le domaine et le nonce avant de retourner l'adresse authentifiée.

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

Consultez l'exemple complet avec-next-siwe-next-auth pour la validation SIWE, les vérifications de nonce et la vérification côté serveur.

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

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 retourné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 à la session en utilisant la fonction auth exportée à partir de votre configuration d'authentification. Si l'utilisateur a réussi à s'authentifier, la propriété address de la session 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 { 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>
  );
}

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

Aperçu

Prise en main

Avancé