> For the complete documentation index, see [llms.txt](https://docs.picketapi.com/picket-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.picketapi.com/picket-docs/quick-start-guides/quick-start-guides/incremental-token-gating.md).

# Incremental Token Gating

## Requirements

Before continuing make sure you've followed the [setup guide](/picket-docs/quick-start-guides/quick-start-guides/start-here-setup.md)

{% content-ref url="/pages/tGMw8MvkRvzGc9R96dcO" %}
[Start Here: Setup](/picket-docs/quick-start-guides/quick-start-guides/start-here-setup.md)
{% endcontent-ref %}

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

{% content-ref url="/pages/kI2UKbucRGpukTikhLez" %}
[Token Gating  (Ethereum / EVM)](/picket-docs/quick-start-guides/quick-start-guides/token-gating-ethereum-evm.md)
{% endcontent-ref %}

{% content-ref url="/pages/MKfcQAY9LbLh6p4odkNS" %}
[Token Gating (Solana)](/picket-docs/quick-start-guides/quick-start-guides/token-gating-solana.md)
{% endcontent-ref %}

To understand the use cases for incremental token gating, read the [incremental authorization concept page](/picket-docs/reference/concepts/incremental-authorization.md)

{% content-ref url="/pages/AFDGfJuxAwlRjZ06J1Cc" %}
[Incremental Authorization](/picket-docs/reference/concepts/incremental-authorization.md)
{% endcontent-ref %}

## Incremental Token Gating

You can use Picket to token gate anything. Incremental token gating, also know as [incremental authorization](/picket-docs/reference/concepts/incremental-authorization.md), 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

{% tabs %}
{% tab title="Javascript" %}

```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"
});
```

{% endtab %}

{% tab title="React" %}

```tsx
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>
  )
}
```

{% endtab %}
{% endtabs %}

### 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.&#x20;

{% tabs %}
{% tab title="Javascript" %}

```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);
```

{% endtab %}

{% tab title="React" %}

```tsx
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>
  )
}
```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
**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.
{% endhint %}

## 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](/picket-docs/quick-start-guides/quick-start-guides/working-with-access-tokens.md).

{% content-ref url="/pages/3YW8Rjmq9MHeaksVLvOG" %}
[Working with Access Tokens](/picket-docs/quick-start-guides/quick-start-guides/working-with-access-tokens.md)
{% endcontent-ref %}