If you want to prevent users from reaching specific parts of your app you can use this hook to check if user has specific scope set using our Access List scopes or 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

NameTypeDescription
userScopesstring[]All scopes returned in JWT for specific user
userHasScopes(scopes: string[] | string, logicOperator?: ‘AND’ | ‘OR’) => booleanFunction 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";
    
    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";
    
    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";
    
    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>
      );
    };