Benutzerdefinierte Authentifizierung
Benutzerdefinierte Authentifizierung
Verbinde dich mit deinem eigenen Authentifizierungs-Back-End
Während RainbowKit erstklassige Unterstützung für Sign-In mit Ethereum und NextAuth bietet, können Sie auch mit benutzerdefinierten Back-Ends und Nachrichtenformaten integrieren.
Erstelle zuerst einen Authentifizierungsadapter. Dies ermöglicht es RainbowKit, Nachrichten zu erstellen/vorzubereiten und mit deinem Back-End zu kommunizieren.
Als Beispiel könnten wir einen Authentifizierungsadapter erstellen, der es uns ermöglicht, Sign-In mit Ethereum gegen einige benutzerdefinierte API-Endpunkte zu verwenden, wie 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');
},
});
Wenn deine Anwendung bereits den Authentifizierungs-Lebenszyklus auf irgendeine Weise verwaltet, kannst du den aktuellen Authentifizierungsstatus zusammen mit deinem benutzerdefinierten Adapter an RainbowKitAuthenticationProvider übergeben und so deinen bestehenden RainbowKitProvider einwickeln.
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({
});
const queryClient = new QueryClient();
export default function App({ Component, pageProps }: AppProps) {
return (
<WagmiProvider {...etc}>
<QueryClientProvider client={queryClient}>
<RainbowKitAuthenticationProvider
adapter={authenticationAdapter}
status={AUTHENTICATION_STATUS}
>
<RainbowKitProvider {...etc}>
<Component {...pageProps} />
</RainbowKitProvider>
</RainbowKitAuthenticationProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
Wenn du es bis hier geschafft hast und einen Adapter für eine bestehende Open-Source-Authentifizierungsbibliothek erstellt hast, ziehe bitte in Betracht, ein Paket zu erstellen, das andere verwenden können!
