useDynamicScopes

Recommended: JavaScript SDK with React Hooks

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) to get started.

If you want to prevent users from reaching specific parts of your app you can use this hook to check if the user has a specific scope set. Scopes are configured in the dashboard via Access lists or Gates (e.g. NFT/token gating).

How it works?

The scopes are send as a standard JWT scopes field. Using this hook you can easily check if user has access to a specific scope or an array of scopes connected by logical operators like: AND, OR.

Hook return values

Name	Type	Description
userScopes	string[]	All scopes returned in JWT for specific user
userHasScopes	(scopes: string[] | string, logicOperator?: ‘AND’ | ‘OR’) => boolean	Function used to check if logged user has specific scope or list of scopes connected by logicOperator. By default the logicOperator is OR

Limitations

Combinations of AND & OR are not supported. You can only use one logic operator at a time. Let us know in slack if this is something you need!

Examples

• Check if user has 'signing' scope

  TypeScript

  import { useDynamicScopes } from "@dynamic-labs/sdk-react-core";
  
  const App = () => {
    const { userHasScopes } = useDynamicScopes();
  
    return (
      <div>
        {userHasScopes("signing")
          ? "This user can sign something"
          : "This user cannot sign something"}
      </div>
    );
  };
  

• Check if user has 'signing' and 'creating' scopes

  TypeScript

  import { useDynamicScopes } from "@dynamic-labs/sdk-react-core";
  
  const App = () => {
    const { userHasScopes } = useDynamicScopes();
  
    return (
      <div>
        {userHasScopes(["signing", "creating"], "AND")
          ? "This user can sign and create something"
          : "This user cannot sign and create something"}
      </div>
    );
  };
  

• Check if user has 'signing' or 'creating' scopes

  TypeScript

  import { useDynamicScopes } from "@dynamic-labs/sdk-react-core";
  
  const App = () => {
    const { userHasScopes } = useDynamicScopes();
  
    return (
      <div>
        {userHasScopes(["signing", "creating"], "OR")
          ? "This user can sign or create something"
          : "This user cannot sign or create something"}
      </div>
    );
  };