> For the complete documentation index, see [llms.txt](https://docs.picketapi.com/picket-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.picketapi.com/picket-docs/reference/integrations/picket-authentication-with-rainbowkit.md).

# Picket Authentication with RainbowKit

## Overview

[RainbowKit](https://www.rainbowkit.com/) 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](/picket-docs/reference/libraries-and-sdks/react-sdk-picket-react.md) exposes a [`PicketRainbowAuthProvider`](/picket-docs/reference/libraries-and-sdks/react-sdk-picket-react.md#picketrainbowauthprovider) to allow you to use Picket for authenticating and authorizing users with RainbowKit's connect modal UI. 

Follow the guide below to [get started](#getting-started), but be aware of the [known limitations](#known-limitations).

## Getting Started

### Requirements

* You have a [Picket](https://picketapi.com/) account. If you don't, sign up at <https://picketapi.com/>
* You've read the [Setup Guide](/picket-docs/quick-start-guides/quick-start-guides/start-here-setup.md)

### 1. Create a Rainbow Template App

```bash
# follow the intstructions and cd in the the new project directory
npm init  @rainbow-me/rainbowkit@latest
```

### 2. Install Picket React

{% content-ref url="/pages/7QI5tTuBaMr2ThFDgKw8" %}
[React SDK - picket-react](/picket-docs/reference/libraries-and-sdks/react-sdk-picket-react.md)
{% endcontent-ref %}

```bash
npm install "@picketapi/picket-react"
```

### 3. Add PicketRainbowAuthProvider to Your App

```tsx
// 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>
  );
}
```

### 3. Add Your Picket API Key

1. Navigate to your [Picket project's](https://picketapi.com/dashboard#projects)
2. Copy your publishable key
3. Paste it as a parameter to the `PicketRainbowAuthProvider`

```tsx
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>
  );
}
```

### 4. Run the Development Server

```bash
npm run dev
```

### 5. View the App

Open [http://localhost:3000](http://localhost:3000/) in your browser to see the result

### 6. Login with Your Wallet

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).&#x20;

<div><figure><img src="/files/sG53xl9g6btCLPuPeel9" alt=""><figcaption><p>Initiate Login</p></figcaption></figure> <figure><img src="/files/Gjay8ic81fyrNKTFT7LF" alt=""><figcaption><p>Verify Signature to Login</p></figcaption></figure></div>

Congrats! You've successfully setup a custom authentication integration for RainbowKit with Picket!

### Known Limitations

#### No Authorization (Token-Gating)

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](/picket-docs/reference/concepts/incremental-authorization.md) 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](/picket-docs/quick-start-guides/quick-start-guides/token-gating-solana.md), with this integration.