🤹‍♂️Incremental Token Gating

A guide to start incremental token gating anything in minutes.

Requirements

Before continuing make sure you've followed the setup guide

⚙️Start Here: Setup

If you are unfamiliar with token gating, we recommend reading one of the other token gating guides first

🪙Token Gating (Ethereum / EVM)🤺Token Gating (Solana)

To understand the use cases for incremental token gating, read the incremental authorization concept page

🤹Incremental Authorization

Incremental Token Gating

You can use Picket to token gate anything. Incremental token gating, also know as incremental authorization, allows you to token gate after the user is logged in. If the user meets the token ownership requirements, we'll automatically handle updating their access token for you. This makes all future checks for the same token ownership lightning fast.

1. Log In the User

Javascript

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

const picket = new Picket('YOUR_PUBLISHABLE_KEY_HERE');

const { accessToken,  user } = await picket.login({
  // specify the chain
  chain: "polygon"
});

React

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

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

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({
               chain: "polygon"
            )}}>
            Login with Wallet
            </button>
        </div>
      )
  }

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

2. Token Gate Specific Actions or Content

Once the user is logged, you can authorize for specific requirements. This can be used to prevent users from clicking a button or accessing page if they don't have certain tokens.

Javascript

// after logging in a user
// authorization automatically happens on the same chain the user logged in on
const allowed = picket.isCurrentUserAuthorized({
  requirements: {
    contractAddress: "YOU_CONTRACT_ADDRESS"
  }
});
console.log("is the current user authorized?", allowed);

React

import { useEffect } from "react";

const requirements = {
  contractAddress: "0x_CONTRACT_ADDRESS"
};

function MyTokenGatedPage() {
  const { 
          isAuthenticating, 
          isAuthorizing, 
          isAuthenticated, 
          authState, 
          logout,
          login
          } = usePicket();
          
  // on load check user meets the requirements
  useEffect(() => {
    // first check cache
    // if already authorized, return early 
    if (isAlreadyAuthorized({requirements})) return;
    
    // asynchronously check requirements
    isAuthorized({ requirements });
  }, []);
  
  // user is logging in
  if (isAuthenticating || isAuthorizing) return "Loading";

  // user is not logged in
  if (!isAuthenticated) return "You aren't logged in";
  
  if (!isAlreadyAuthorized({requirements})) { 
    return "You aren't authorized for this page"; 
  }

  // user is logged in 🎉
  const { user } = authState;
  const { displayAddress, tokenBalances } = user;
  
  const tokenBalance = tokenBalances.contractAddress[requirements.contractAddress]
  return (
    <div>
       <p>You are logged in as {displayAddress} and have enough tokens to view this page!</p>
       <p>Your token balance is  </p>
    </div>
  )
}

You successfully logged in a user and token gated content!

Every time a user is successfully authorized for a new requirement, their access token will automatically be updated to reflect it.

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.

🔑Working with Access Tokens