# 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](https://docs.picketapi.com/picket-docs/reference/libraries-and-sdks/react-sdk-picket-react) exposes a [`PicketRainbowAuthProvider`](https://docs.picketapi.com/picket-docs/libraries-and-sdks/react-sdk-picket-react#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](https://docs.picketapi.com/picket-docs/quick-start-guides/quick-start-guides/start-here-setup)

### 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="../libraries-and-sdks/react-sdk-picket-react" %}
[react-sdk-picket-react](https://docs.picketapi.com/picket-docs/reference/libraries-and-sdks/react-sdk-picket-react)
{% 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="https://3183040354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYuewee9BpHHd2p9bSo45%2Fuploads%2FkgPultB1spjRKhL60i0w%2FScreen%20Shot%202022-10-21%20at%2011.59.43%20AM.png?alt=media&#x26;token=d53fea73-1edb-4279-8e58-d0fa7ef58a2e" alt=""><figcaption><p>Initiate Login</p></figcaption></figure> <figure><img src="https://3183040354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYuewee9BpHHd2p9bSo45%2Fuploads%2FRIQGIXxysvZcT8ItKKOU%2FScreen%20Shot%202022-10-21%20at%2011.59.55%20AM.png?alt=media&#x26;token=91407322-7b10-47be-b86f-d5a04448a0dc" 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](https://docs.picketapi.com/picket-docs/reference/concepts/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](https://docs.picketapi.com/picket-docs/quick-start-guides/quick-start-guides/token-gating-solana), with this integration.