Autenticación

Proporcionar acceso autenticado a tu aplicación

Opcionalmente puedes exigir que los usuarios firmen un mensaje con su billetera durante el proceso de conexión, demostrando que son propietarios de la cuenta conectada y permitiéndote crear una sesión de usuario autenticada con acceso privilegiado a tu aplicación.

Mientras es posible integrar con back-ends personalizados y formatos de mensajes, RainbowKit proporciona soporte de primera clase para Ingreso con Ethereum y NextAuth.

Configura el Ingreso con Ethereum y NextAuth

Instalar

Instala el paquete @rainbow-me/rainbowkit-siwe-next-auth y NextAuth v5.

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

Si estás actualizando una integración SIWE existente de NextAuth v4, sigue la guía de migración de NextAuth v5.

Configura NextAuth

Crea una configuración de NextAuth que utilice el proveedor Credentials de la v5 y exporte el auxiliar auth. Tu implementación de authorize debe validar el mensaje SIWE, firma, dominio y nonce antes de devolver la dirección autenticada.

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

Consulta el ejemplo completo with-next-siwe-next-auth para la validación de SIWE, verificación de nonce y verificación en el servidor.

Configure el proveedor

En su componente App, importe RainbowKitSiweNextAuthProvider.

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

Envuelva RainbowKitProvider con RainbowKitSiweNextAuthProvider, asegurándose de que esté anidado dentro del SessionProvider de NextAuth para que tenga acceso a la sesión.

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

Con RainbowKitSiweNextAuthProvider en su lugar, ahora se solicitará a sus usuarios que se autentiquen firmando un mensaje una vez que hayan conectado su billetera.

Personalice las opciones de mensaje de SIWE

Puede personalizar las opciones de mensaje SIWE pasando una función a la propiedad getSiweMessageOptions en RainbowKitSiweNextAuthProvider.

Esta función se llamará cuando se cree un nuevo mensaje. Las opciones devueltas por esta función se fusionarán con los valores predeterminados.

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

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

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

Acceda al servidor de sesiones en el lado del servidor

Puedes acceder a la sesión usando la función auth exportada desde tu configuración de autenticación. Si el usuario se ha autenticado con éxito, la propiedad address de la sesión será la dirección del usuario.

También puede pasar el objeto de sesión resuelto desde el servidor a través de getServerSideProps para que NextAuth no necesite resolverlo nuevamente en el cliente.

Por ejemplo:

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

Para obtener más información sobre cómo gestionar la sesión, puede hacer referencia a la siguiente documentación:

Visión General

Primeros Pasos

Avanzado