This guide is for the React SDK only

​
Overview

If you’re launching a new site or want to restrict parts of your site to a predefined list of users, then access lists or waitlists are probably a high priority for you. Leveraging gating with access lists through the Dynamic dashboard is a simple no-code option that gives you flexibility to define and manage various lists easily. Through your dashboard, you can:
  1. Restrict site access based on a list of emails, wallet addresses, or other unique identifiers.
  2. Return a scope in the JWT of emails, wallet addresses, or other unique identifiers.
In our dashboard, you can design precise gating rules by combining multiple elements such as various access lists with NFT and token gates.

​
General Setup

Find the Access Control tab via the Configurations page of your developer dashboard. Here you can create access lists based on emails or wallet addresses.
  1. Click “Create new gate”
  2. Name your gate
  3. Select the gating method:
    1. Allow Site Access - this option will block users from access your site (we won’t generate a JWT) unless the criteria is met
    2. Return scope - this option will not block users, but instead will return the JWT with a predefined scope if the user has met the defined criteria
  4. Choose the type of identifier (email, wallet address, or other).
  5. Enter the identifier.
    1. You can also add an alias to more easily keep track of these users.
  6. Click the “Add +” button to save the user to the list. Keep adding users as needed.
  7. Save and enable the toggle when you’re ready.
  8. You’re done!
You can create multiple lists to help keep track of different groups of users (ie, VIPs, beta users, internal users, etc). Note: a user only needs to be in one of the lists to pass.

​
Using your UI

Use headless SDK methods to check a user’s scopes and conditionally render content in your app.
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;
};