Skip to main content
For concepts and setup, see Access Control and Access lists. This page covers React-specific usage including scopes and the Dynamic widget. You can combine access lists with NFT and token gates.

​
Using your UI

You can use the useDynamicScopes hook to check for user scopes returned in the JWT.
React
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.
React
<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:
React
<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:
React
type AccessDeniedCustomButton = {
   action?: () => void;
   title: string;
};