Autenticação
Autenticação
Fornecendo acesso autenticado ao seu aplicativo
Você pode opcionalmente exigir que os usuários assinem uma mensagem com sua carteira durante o processo de conexão, provando que eles possuem a conta conectada e permitindo que você crie uma sessão de usuário autenticada com acesso privilegiado ao seu aplicativo.
Embora seja possível integrar com back-ends personalizados e formatos de mensagens, RainbowKit oferece suporte de primeira classe para Sign-In com Ethereum e NextAuth.
Instale o pacote @rainbow-me/rainbowkit-siwe-next-auth e NextAuth v5.
Se você está atualizando uma integração existente do NextAuth v4 SIWE, siga o guia de migração do NextAuth v5.
Crie uma configuração do NextAuth que use o provedor Credentials v5 e exporte o assistente auth. Sua implementação authorize deve validar a mensagem SIWE, assinatura, domínio e nonce antes de retornar o endereço autenticado.
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);
Veja o exemplo completo with-next-siwe-next-auth para validação SIWE, verificações de nonce e verificação no servidor.
No seu componente App, importe RainbowKitSiweNextAuthProvider.
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
Envolva RainbowKitProvider com RainbowKitSiweNextAuthProvider, garantindo que ele esteja aninhado dentro do SessionProvider do NextAuth para que tenha acesso à sessão.
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>
);
}
Com o RainbowKitSiweNextAuthProvider em vigor, seus usuários serão agora solicitados a autenticar assinando uma mensagem assim que conectarem sua carteira.
Você pode personalizar as opções de mensagem SIWE passando uma função para a prop getSiweMessageOptions em RainbowKitSiweNextAuthProvider.
Esta função será chamada sempre que uma nova mensagem for criada. As opções retornadas por esta função serão mescladas com os padrões.
import {
RainbowKitSiweNextAuthProvider,
GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';
const getSiweMessageOptions: GetSiweMessageOptions = () => ({
statement: 'Sign in to my RainbowKit app',
});
<RainbowKitSiweNextAuthProvider
getSiweMessageOptions={getSiweMessageOptions}
>
...
</RainbowKitSiweNextAuthProvider>;
Você pode acessar a sessão usando a função auth exportada da sua configuração de autenticação. Se o usuário tiver se autenticado com sucesso, a propriedade address da sessão será o endereço do usuário.
Você também pode passar o objeto de sessão resolvido do servidor via getServerSideProps para que o NextAuth não precise resolvê-lo novamente no cliente.
Por exemplo:
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;
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 mais informações sobre o gerenciamento da sessão, você pode se referir à seguinte documentação:
