Picket Docs
  • ๐Ÿ‘‹Welcome to Picket
  • Quick Start Guides
    • ๐Ÿš€Quick Start Guides
      • โš™๏ธStart Here: Setup
      • ๐Ÿ”Wallet Login
      • ๐Ÿช™Token Gating (Ethereum / EVM)
      • ๐ŸคบToken Gating (Solana)
      • ๐Ÿคนโ€โ™‚๏ธIncremental Token Gating
      • โ›”Restrict Access to Specific Wallets
      • ๐Ÿ”‘Working with Access Tokens
  • Reference
    • ๐ŸŽ“Concepts
      • ๐ŸŒŠAuth Flow
      • ๐Ÿ—ƒ๏ธConnect
      • โœ๏ธSignatures
      • ๐Ÿ”Authentication and Authorization
      • ๐ŸคนIncremental Authorization
      • ๐Ÿช™Access Tokens
      • ๐ŸงชTesting
      • โ‰๏ธErrors
      • โ›“๏ธSupported Blockchains
      • ๐ŸŒSupported Languages (Localization)
      • ๐ŸŽจModal Themes
      • ๐Ÿ’ฟOpen Source Web3 Client Libraries
    • ๐Ÿ“šLibraries and SDKs
      • Javascript Library - picket-js
      • React SDK - picket-react
      • Node.js Library - picket-node
      • Go Library - picket-go
      • Python Library - picket-python
    • ๐Ÿ”ฅIntegrations
      • ๐ŸŒˆPicket Authentication with RainbowKit
      • โšกSupabase
      • โ˜๏ธAmazon Cognito
      • ๐Ÿ›๏ธPicket Shopify App - Merchant Documentation
      • ๐Ÿ›’Picket BigCommerce App - Merchant Documentation
    • ๐Ÿ“–API Reference
      • Projects & API Keys
      • Auth
      • Chains
      • Wallets
      • Contracts
      • OAuth 2.0
  • ๐Ÿ•น๏ธTutorials
    • ๐ŸŒŽSign-In with Wallet (React)
    • ๐ŸฐToken Gated Photo Board (React)
    • ๐Ÿ”—Link a Wallet to a Web 2.0 Account
    • ๐ŸคIncremental Authorization (React)
Powered by GitBook
On this page
  • Overview
  • Getting Started
  • Requirements
  • 1. Create a Rainbow Template App
  • 2. Install Picket React
  • 3. Add PicketRainbowAuthProvider to Your App
  • 3. Add Your Picket API Key
  • 4. Run the Development Server
  • 5. View the App
  • 6. Login with Your Wallet
  • Known Limitations
  1. Reference
  2. Integrations

Picket Authentication with RainbowKit

Learn how to use Picket + RainbowKit to authenticate users

PreviousIntegrationsNextSupabase

Last updated 2 years ago

Overview

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. exposes a to allow you to use Picket for authenticating and authorizing users with RainbowKit's connect modal UI.

Follow the guide below to , but be aware of the .

Getting Started

Requirements

  • You have a account. If you don't, sign up at

  • You've read the

1. Create a Rainbow Template App

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

2. Install Picket React

npm install "@picketapi/picket-react"

3. Add PicketRainbowAuthProvider to Your App

// 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. Copy your publishable key

  2. 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>
  );
}

4. Run the Development Server

npm run dev

5. View the App

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

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

Known Limitations

No Authorization (Token-Gating)

EVM Only

Navigate to your

Open in your browser to see the result

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 to token-gate after the user has logged in.

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 , with this integration.

๐Ÿ”ฅ
๐ŸŒˆ
Picket project's
http://localhost:3000
Picket Incremental Authorization
Solana
RainbowKit
Picket React SDK
Picket
https://picketapi.com/
Setup Guide
React SDK - picket-react
get started
known limitations
Initiate Login
Verify Signature to Login
PicketRainbowAuthProvider