> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# NFT/Token Gating

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

For concepts, dashboard setup, and the two outcomes (block vs scope), see [Access Control](/overview/access-control/overview) and [Gates](/overview/access-control/gates). This page covers React-specific usage including scopes and the Dynamic widget.

## Using our UI

When gates are enabled, the Dynamic Widget automatically blocks or annotates the user's session according to your rules. No additional code is needed to enforce access or add scopes in the JWT.

## Using your UI

Use checks to read scopes and adjust your UI. See scope examples below.

### Examples

**Block site for users without specific amount of tokens.**

Gate setup:

* User needs to have at least 1 SHIB to enter the site.

<Frame>
  <img src="https://mintcdn.com/dynamic-docs/DXbjtpFZjzIwv2VQ/images/dashboard/dashboard-access-gate-shib-config.png?fit=max&auto=format&n=DXbjtpFZjzIwv2VQ&q=85&s=3b1bb9c3514d37764dd693016d8b5e54" width="1168" height="431" data-path="images/dashboard/dashboard-access-gate-shib-config.png" />
</Frame>

* User is blocked in Dynamic Widget:

<Frame>
  <img src="https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-token-gate-rejection.png?fit=max&auto=format&n=S0I4gBjjMnJYbuz8&q=85&s=40e7c90826c089cc0c575f1b975c9b66" width="373" height="299" data-path="images/widget/widget-token-gate-rejection.png" />
</Frame>

**Add scope for users' JWT when having specific NFT**

Gate setup:

* User needs to have specific NFT to have `admin` scope

<Frame>
  <img src="https://mintcdn.com/dynamic-docs/DXbjtpFZjzIwv2VQ/images/dashboard/dashboard-access-gate-scope-config.png?fit=max&auto=format&n=DXbjtpFZjzIwv2VQ&q=85&s=75b6a99d1b3dbb87ca9f903a0bfe806f" width="1128" height="439" data-path="images/dashboard/dashboard-access-gate-scope-config.png" />
</Frame>

* User has an `admin` scope added to the `jwt`
  ```Text json theme={"system"}
  {
    ...
    "scope": "admin",
    ...
  }
  ```

### Working with scopes

Use the [`useDynamicScopes`](/react/reference/hooks/usedynamicscopes) hook to check user scopes and conditionally render content.

```tsx React theme={"system"}
import { useDynamicScopes } from '@dynamic-labs/sdk-react-core';

export const GatedView = () => {
  const { hasScope } = useDynamicScopes();
  return hasScope('admin') ? <AdminPanel /> : <RequestAccess />;
};
```