CanAccess usage recommendation

Is it bad to use the CanAccess component in the _app.tsx file?

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
// ...
    return (
      <ThemedLayoutV2
        Header={() => <Header sticky />}
        Sider={(props) => <ThemedSiderV2 {...props} fixed />}
        Title={({ collapsed }) => (
          <ThemedTitleV2
            collapsed={collapsed}
            text={<Image preview={false} src="/images/energia_premiada.png" />}
            icon={null}
          />
        )}
      >
        <CanAccess> 
          <Component {...pageProps} />
        </CanAccess>
      </ThemedLayoutV2>
    );
  };

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
// ...
    return (
      <ThemedLayoutV2
        Header={() => <Header sticky />}
        Sider={(props) => <ThemedSiderV2 {...props} fixed />}
        Title={({ collapsed }) => (
          <ThemedTitleV2
            collapsed={collapsed}
            text={<Image preview={false} src="/images/energia_premiada.png" />}
            icon={null}
          />
        )}
      >
        <CanAccess> 
          <Component {...pageProps} />
        </CanAccess>
      </ThemedLayoutV2>
    );
  };

2 Replies

kapa.ai•6mo ago

Hi @Chrystian Ferreira. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use the CanAccess component in your _app.tsx file. The CanAccess component is used to wrap your pages or components to hide them from unauthorized users. It calls the Access Control Provider's can method and conditionally renders its children based on the result. In your case, wrapping the Component with CanAccess will protect your pages from unauthorized access. 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. Here is a basic example of how to use the CanAccess component:

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

export const MyPage = () => (  
 <CanAccess>  
 <div>{/* ... */}</div>  
 </CanAccess>  
);

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

export const MyPage = () => (  
 <CanAccess>  
 <div>{/* ... */}</div>  
 </CanAccess>  
);

You can also 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>  
 );  
};

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

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

For more information, you can check out the CanAccess component documentation (https://refine.dev/docs/authorization/components/can-access/). Sources: - CanAccess Component (https://refine.dev/docs/guides-concepts/authorization#canaccess-component) - Basic Usage of CanAccess (https://refine.dev/docs/authorization/components/can-access#basic-usage) - Usage with Access Control providers (https://refine.dev/docs/routing/integrations/react-router#usage-with-access-control-providers) - Client Side Access Control (https://refine.dev/docs/routing/integrations/remix#client-side) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below