Authentication
Authentication
Providing authenticated access to your application
You can optionally enforce that users sign a message with their wallet during the connection process, proving that they own the connected account and allowing you to create an authenticated user session with privileged access to your application.
While it's possible to integrate with custom back-ends and message formats, RainbowKit provides first-class support for Sign-In with Ethereum and NextAuth.js.
If you haven't already, first set up your Next.js project with the official Sign-In with Ethereum boilerplate for NextAuth.js.
Install the @rainbow-me/rainbowkit-siwe-next-auth package and its peer dependency, ethers.
npm install @rainbow-me/rainbowkit-siwe-next-auth siwe@^2 ethers@^5
Note: siwe requires the ethers peer dependency, while wagmi now relies on the alternative viem.
In your App component, import RainbowKitSiweNextAuthProvider.
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
Wrap RainbowKitProvider with RainbowKitSiweNextAuthProvider, ensuring it's nested within NextAuth's SessionProvider so that it has access to the 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 {
QueryClientProvider,
QueryClient,
} 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>;
);
}
With RainbowKitSiweNextAuthProvider in place, your users will now be prompted to authenticate by signing a message once they've connected their wallet.
You can customize the SIWE message options by passing a function to the getSiweMessageOptions prop on RainbowKitSiweNextAuthProvider.
This function will be called whenever a new message is created. Options returned from this function will be merged with the defaults.
import {
RainbowKitSiweNextAuthProvider,
GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';
const getSiweMessageOptions: GetSiweMessageOptions = () => ({
statement: 'Sign in to my RainbowKit app',
});
<RainbowKitSiweNextAuthProvider
getSiweMessageOptions={getSiweMessageOptions}
>
...
</RainbowKitSiweNextAuthProvider>;
You can access the session token with NextAuth's getToken function imported from next-auth/jwt. If the user has successfully authenticated, the session token's sub property (the "subject" of the token, i.e. the user) will be the user's address.
You can also pass down the resolved session object from the server via getServerSideProps so that NextAuth doesn't need to resolve it again on the client.
For example:
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';
export const getServerSideProps: GetServerSideProps = async context => {
const session = await getSession(context);
const token = await getToken({ req: context.req });
const address = token?.sub ?? 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>
);
}
For more information about managing the session, you can refer to the following documentation:
