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
  • What is Incremental Authorization?
  • Getting Started
  1. Tutorials

Incremental Authorization (React)

Picket can incrementally authorize users for different NFTs, SPL tokens, and more!

PreviousLink a Wallet to a Web 2.0 Account

Last updated 2 years ago

Live Demo

View the end-result of this tutorial at live at

What is Incremental Authorization?

The best example of incremental authorization is a Web3 community site. Imagine every NFT has an exclusive community site. Only token holders can access their NFTs' respective communities and content. With an infinite number of possible NFT-based communities, it would be impossible to check if a user has access to every community on the site at once; instead, we want to verify a user's token ownership incrementally.

You can read more about in the documentation.

Getting Started

1. Clone the Repo

git clone https://github.com/picketapi/picket-example-incremental-auth.git
cd picket-example-incremental-auth

2. Install Dependencies

From the root directory, run

npm i

3. Add Your Picket API Key

If you don't know about Picket API keys, checkout the the

  1. Copy the Publishable Key from on of your projects

  2. Create a local .env file with your API key by running

echo "NEXT_PUBLIC_PICKET_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY_GOES_HERE" >> .env

4. Run the Development Server

npm run dev

5. View the App

6. Modifying the App

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file. Feel free to modify the app as much as you like to learn about Picket.

One idea for how to change the app is to add a token that you have access to!

Modifying the Demo Tokens

For the demo, we picked three popular Ethereum mainnet tokens: ENS, Doodles, and BYAC. You'll find these tokens defined at the top of pages/index.tsx.

const tokens = [
  {
    name: "ENS",
    image: "/ens.svg",
    description:
      "Ethereum Name Service is decentralised naming for wallets, websites, & more",
    contractAddress: "0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85",
  },
  {
    name: "Doodles",
    image: "/doodles.webp",
    description:
      "Doodles is a community-driven collectibles project featuring art by Burnt Toast",
    contractAddress: "0x8a90cab2b38dba80c64b7734e58ee1db38b8992e",
  },
  // Replace BYAC with Okay Zombie Bears Club
  {
    name: "Okay Zombie Bears Club",
    image: "https://i.seadn.io/gcs/files/e7732689e69a07bd104e2fc7c0302912.gif?auto=format&w=3840",
    description:
      "Infected, diseased, dead, and brought back to life. Join the Zombie Bear Club.",
    contractAddress: "0x8137A2fDC9111aAa8BeeD9eb72905F2C391FD55F",
  },
];

Congrats

You now have a working incremental authorization codebase to start hacking on!

Navigate to the .

Open with your browser to see the result.

Let's say we want to remove BYAC in favor of the . We can do this by modifying the tokens variable in pages/index.tsx

Open with your browser to see the result. is an example NFT, but try it out with an NFT or SPL token that you own!

If you have any more questions or run into issue, don't hesitate to reach out to

๐Ÿ•น๏ธ
๐Ÿค
https://incremental-auth-demo.picketapi.com/
Incremental Authorization Concepts
Setup Guide
โš™๏ธStart Here: Setup
projects section of your Picket account
http://localhost:3000
Okay Zombie Bears Club
http://localhost:3000
Okay Zombie Bears Club
team@picketapi.com