🌈
Picket Authentication with RainbowKit
Learn how to use Picket + RainbowKit to authenticate users
RainbowKit is a popular library for allowing users to connect their (EVM) wallet to your app. If you prefer to use RainbowKit instead of Picket's built-in login modal, we've got you covered. Picket React SDK exposes a
PicketRainbowAuthProvider
to allow you to use Picket for authenticating and authorizing users with RainbowKit's connect modal UI. # follow the intstructions and cd in the the new project directory
npm init @rainbow-me/rainbowkit@latest
npm install "@picketapi/picket-react"
// pages/_app.tsx
// ...boilerplate imports
import { PicketRainbowAuthProvider } from "@picketapi/picket-react";
// ...boilerplate code
function MyApp({ Component, pageProps }: AppProps) {
return (
<WagmiConfig client={wagmiClient}>
{/*
ORDER MATTERS! PicketRainbowAuthProvider must be nested
between WagmiConfig and RainbowKitProvider
*/}
<PicketRainbowAuthProvider apiKey="YOUR_PUBLISHABLE_KEY_HERE">
<RainbowKitProvider chains={chains}>
<Component {...pageProps} />
</RainbowKitProvider>
</PicketRainbowAuthProvider>
</WagmiConfig>
);
}
- 1.
- 2.Copy your publishable key
- 3.Paste it as a parameter to the
PicketRainbowAuthProvider
import { PicketRainbowAuthProvider } from "@picketapi/picket-react";
function MyApp({ Component, pageProps }: AppProps) {
return (
<WagmiConfig client={wagmiClient}>
{/*
Replace YOUR_PUBLISHABLE_KEY_HERE with your project's publishable key
*/}
<PicketRainbowAuthProvider apiKey="YOUR_PUBLISHABLE_KEY_HERE">
<RainbowKitProvider chains={chains}>
<Component {...pageProps} />
</RainbowKitProvider>
</PicketRainbowAuthProvider>
</WagmiConfig>
);
}
npm run dev
Click the
Connect Wallet
button to start the login flow. Once you've connected your wallet, you should see another modal to start the login flow (see screenshots below). 
Initiate Login

Verify Signature to Login
Congrats! You've successfully setup a custom authentication integration for RainbowKit with Picket!
At the moment, RainbowKit doesn't support custom error messages, which means we can't warn users that they cannot login because of token-gating requirements. For this reason, we've disabled token-gating on login for this integration; however, you can still use Picket Incremental Authorization to token-gate after the user has logged in.
EVM Only
Picket makes it easy to authenticate and authorize users on any chain , but RainbowKit is exclusive to the EVM ecosystem. You cannot use non-EVM functionality, like token gating on Solana, with this integration.
Last modified 10mo ago