> ## 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.

# Access Lists

<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 and setup, see [Access Control](/overview/access-control/overview) and [Access lists](/overview/access-control/access-lists). This page covers React-specific usage including scopes and the Dynamic widget. You can combine access lists with [NFT and token gates](/react/gating/nft-token-gating).

## Using your UI

You can use the [`useDynamicScopes`](/react/reference/hooks/usedynamicscopes) hook to check for user scopes returned in the JWT.

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

export const AccessControlledView = () => {
  const { hasScope, hasScopes } = useDynamicScopes();

  if (hasScopes(['beta', 'vip'])) {
    return <div>Welcome to the beta features!</div>;
  }

  if (hasScope('admin')) {
    return <div>Admin controls</div>;
  }

  return <div>Access denied</div>;
};
```

### Customize the copy and button

You can customize the copy through props by updating the `accessDeniedMessagePrimary` and `accessDeniedMessageSecondary`.

```tsx React theme={"system"}
<DynamicContextProvider
   settings={{
      // ...
      accessDeniedMessagePrimary: 'Your copy1',
      accessDeniedMessageSecondary: 'Your Copy2',
   }}
>
```

You can also return a completely custom button by passing an element to the `accessDeniedButton` prop. Here's an example to link to a contact page:

```tsx React theme={"system"}
<DynamicContextProvider
   settings={{
      // ...
      accessDeniedButton: {
         action: () => window.open(`https://www.dynamic.xyz/talk-to-us`,'_blank'),
         title: `Book a demo`
      }
   }}
>
```

The button should adhere to the following type:

```tsx React theme={"system"}
type AccessDeniedCustomButton = {
   action?: () => void;
   title: string;
};
```