<CanAccess />

By default, the CanAccess component will infer the current resource and the action based on your route automatically. id will also be inferred if the current route includes one.

So if you are at the /posts route, CanAccess will check authorization for the posts resource and the list action.

For /posts/show/:id route, the action will be show.

import { CanAccess } from "@refinedev/core";

const MyComponent = () => (
  <CanAccess fallback={<CustomFallback />}>
    <YourComponent />
  </CanAccess>
);

You may have a case like in the /posts/show/:id page, where, inferred resource is posts and action is show, but you want to authorize a different resource eg. category.

In this case, you can explicitly pass props to the CanAccess component for authorizing a different resource.

import { CanAccess } from "@refinedev/core";

export const MyComponent = () => {
  return (
    <Buttons>
      <CreateButton>Create</CreateButton>
      <CanAccess resource="posts" action="delete">
        <DeleteButton>Delete</DeleteButton>
      </CanAccess>
    </Buttons>
  );
};

It also accepts all the properties of useCan.

Callback to be called when useCan returns false.

<CanAccess
  onUnauthorized={({ resource, reason, action, params }) =>
    console.log(
      `You cannot access ${resource}-${params.id} resource with ${action} action because ${reason}`,
    )
  }
>
  <YourComponent />
</CanAccess>

Component to render if useCan returns false. If undefined, it renders null.

<CanAccess fallback={<div>You cannot access this section</div>}>
  <YourComponent />
</CanAccess>

Accepts UseQueryOptions<CanReturnType> to customize the caching behavior of the underlying query.

<CanAccess queryOptions={{ cacheTime: 25000 }}>
  <YourComponent />
</CanAccess>