🪙Token Gating (Ethereum / EVM)

A guide to start token gating anything in minutes.

Requirements

Before continuing make sure you've followed the setup guide

⚙️pageStart Here: Setup

Token Gate Anything

You can use Picket to token gate anything. If you want to authenticate users and verify their token ownership, you can pass the token ownership requirements to the login() function.

Login User w/ Token Ownership Requirements

Javascript

import Picket from "@picketapi/picket-js";

const picket = new Picket('YOUR_PUBLISHABLE_KEY_HERE');

// These requirements are for the Ethereum Mainnet
// See Token Ownership Requirements section below for examples of 
// requirements other supported chain.
const requirements = {
    // optional. The default chain is the Ethereum Mainnet
    chain: "ethereum",
    // Replace this example address with whichever contract you are verifying ownership for
    contractAddress: '0x8a90cab2b38dba80c64b7734e58ee1db38b8992e', 
    // Replace with minimum balance you want to verify users' currently hold, 
    // or omit if any number of tokens is sufficient
    minTokenBalance: 1 
}

const { accessToken,  user } = await picket.login(requirements);
console.log(user);

React

import { PicketProvider, usePicket } from "@picketapi/picket-react";

function MyApp({ children }) {
  return (
    <PicketProvider apiKey="YOUR_PUBLISHABLE_KEY_HERE">
      {children}
    </PicketProvider>
  );
}

const requirements = {
    // optional. The default chain is the Ethereum Mainnet
    chain: "ethereum",
    // Replace this example address with whichever contract you are verifying ownership for
    contractAddress: '0x8a90cab2b38dba80c64b7734e58ee1db38b8992e', 
    // Replace with minimum balance you want to verify users' currently hold, 
    // or omit if any number of tokens is sufficient
    minTokenBalance: 1 
}

function MySecurePage() {
  const { 
          isAuthenticating, 
          isAuthenticated, 
          authState, 
          logout,
          login
          } = usePicket();
  
  // user is logging in
  if (isAuthenticating) return "Loading";

  // user is not logged in
  if (!isAuthenticated) {
      return (
        <div>
            <p>You are not logged in!</p>
            <button onClick={() => login(requirements)}>Login with Wallet</button>
        </div>
      )
  }

  // user is logged in 🎉
  const { user } = authState;
  const { walletAddress } = user;
  
  return (
    <div>
       <p>You are logged in as {walletAddress} </p>
       <button onClick={() => logout()}>Logout</button>
    </div>
  )
}

Curl

curl https://picketapi.com/api/v1/auth \
    -X POST \
    -u PROJECT_SECRET_KEY \
    -H 'Content-Type: application/json' \
    -d '{
      "chain": "ethereum",
      "walletAddress": "0xWALLET_ADDRESS",
      "signature": "SUPER_SECRET_SIGNATURE",
      "contractAddress": "CONTRACT_ADDRESS",
      "minTokenBalance": 1
    }'

Token Ownership Requirements

Picket currently defaults to using the ethereum (Mainnet) chain. While using ethereum contract address can be any contract address for an ERC20 token or an NFT (including ERC-721 and ERC-1155.) Picket also authentication and authorization on other chains like Solana. See supported blockchains for the complete list.

Ethereum (Mainnet)

// Same as the requirements above
const requirements = {
    // optional. The default chain is the Ethereum Mainnet
    chain: "ethereum",
    // Replace this example address with whichever contract you are verifying ownership for
    contractAddress: '0x8a90cab2b38dba80c64b7734e58ee1db38b8992e', 
    // Replace with minimum balance you want to verify users' currently hold, 
    // or omit if any number of tokens is sufficient
    minTokenBalance: 1 
}

You successfully validated a user's wallet and token ownership!

The returned access token can now act as secure proof of token ownership until expiration. It can be passed server side and verified there in order to restrict resources to authenticated wallets with whichever token ownership requirements you have.

Using Access Tokens

Congrats 🎉 your user is now successfully logged in. After authenticated/authorizing a user, you get an access token. You can use this access token to make secure requests to your backend. Read more in the working with access tokens guide.

🔑pageWorking with Access Tokens