Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@rainbow-me/rainbowkit-siwe-next-auth
Advanced tools
Readme
Sign-In with Ethereum and NextAuth.js authentication adapter for RainbowKit.
This package is designed to work with the official Sign-In with Ethereum boilerplate for 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 { WagmiConfig } from 'wagmi';
export default function App({
Component,
pageProps,
}: AppProps<{
session: Session;
}>) {
return (
<WagmiConfig {...etc}>
<SessionProvider refetchInterval={0} session={pageProps.session}>
<RainbowKitSiweNextAuthProvider>
<RainbowKitProvider {...etc}>
<Component {...pageProps} />
</RainbowKitProvider>
</RainbowKitSiweNextAuthProvider>
</SessionProvider>
</WagmiConfig>
);
}
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;
// 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>
);
}
For more information about managing the session, you can refer to the following documentation:
Please follow our contributing guidelines.
Licensed under the MIT License, Copyright © 2022-present Rainbow.
See LICENSE for more information.
FAQs
RainbowKit authentication adapter for Sign-In with Ethereum and NextAuth.js
The npm package @rainbow-me/rainbowkit-siwe-next-auth receives a total of 3,291 weekly downloads. As such, @rainbow-me/rainbowkit-siwe-next-auth popularity was classified as popular.
We found that @rainbow-me/rainbowkit-siwe-next-auth demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.