Autenticación Personalizada

Conéctese a su propio back-end de autenticación

Aunque RainbowKit proporciona soporte de primera clase para Sign-In with Ethereum y NextAuth, también puede integrar con back-ends y formatos de mensajes personalizados.

Creando un adaptador personalizado

Primero, cree un adaptador de autenticación. Esto permite a RainbowKit crear/preparar mensajes y comunicarse con su back-end.

Como ejemplo, podríamos crear un adaptador de autenticación que nos permita usar Sign-In with Ethereum contra algunos puntos finales de API personalizados, como iron-session.

import { createAuthenticationAdapter } from '@rainbow-me/rainbowkit';
import { createSiweMessage } from 'viem/siwe';

const authenticationAdapter = createAuthenticationAdapter({
  getNonce: async () => {
    const response = await fetch('/api/nonce');
    return await response.text();
  },

  createMessage: ({ nonce, address, chainId }) => {
    return createSiweMessage({
      domain: window.location.host,
      address,
      statement: 'Sign in with Ethereum to the app.',
      uri: window.location.origin,
      version: '1',
      chainId,
      nonce,
    });
  },

  verify: async ({ message, signature }) => {
    const verifyRes = await fetch('/api/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message, signature }),
    });

    return Boolean(verifyRes.ok);
  },

  signOut: async () => {
    await fetch('/api/logout');
  },
});

Proporcionando el estado de autenticación

Suponiendo que su aplicación ya está gestionando el ciclo de vida de la autenticación de alguna manera, puede pasar el estado de autenticación actual junto con su adaptador personalizado a RainbowKitAuthenticationProvider, envolviendo su RainbowKitProvider existente.

import {
  createAuthenticationAdapter,
  RainbowKitAuthenticationProvider,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const authenticationAdapter = createAuthenticationAdapter({
  /* See above... */
});

const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  // You'll need to resolve AUTHENTICATION_STATUS here
  // using your application's authentication system.
  // It needs to be either 'loading' (during initial load),
  // 'unauthenticated' or 'authenticated'.

  return (
    <WagmiProvider {...etc}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitAuthenticationProvider
          adapter={authenticationAdapter}
          status={AUTHENTICATION_STATUS}
        >
          <RainbowKitProvider {...etc}>
            <Component {...pageProps} />
          </RainbowKitProvider>
        </RainbowKitAuthenticationProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Si ha llegado hasta aquí y ha creado un adaptador para una biblioteca de autenticación de código abierto existente, ¡considere crear un paquete para que otros lo utilicen!

Visión General

Primeros Pasos

Avanzado

Autenticación Personalizada

Conéctese a su propio back-end de autenticación

Creando un adaptador personalizado

Proporcionando el estado de autenticación