# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.picketapi.com/picket-docs/reference/integrations/picket-authentication-with-rainbowkit.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.