foreign-sapphire•2y ago

Access control using cerbos throws TypeError: cyclic object value

I am using cerbos for access control and it only checks for dashboard resource all other routes are not checked. Am I missing something? I have followed the example code of cerbos from https://github.com/refinedev/refine/tree/master/examples/access-control-cerbos This example works fine but when I do same on my project it only checks for dashboard page. Here is my refine App.tsx setup for accessControlProvider

<Refine
  // other options 
  accessControlProvider={{
    can: async ({ action, params, resource }) => {
        const result = await cerbos.checkResource({
            principal: {
                id: "123", // Fake a user ID
                roles: [role],
                policyVersion: "default",
                // this is where user attributes can be passed
                attributes: {
                  is_verified: user?.is_verified ?? false,
                },
            },
            resource: {
                kind: resource,
                policyVersion: "default",
                id: params?.id + "" || "new",
                attributes: params,
            },
            // the list of actions on the resource to check authorization for
            actions: [action],
        });
        return Promise.resolve({
            can: result.isAllowed(action) || false,
        });
    },
  }}
/>

<Refine
  // other options 
  accessControlProvider={{
    can: async ({ action, params, resource }) => {
        const result = await cerbos.checkResource({
            principal: {
                id: "123", // Fake a user ID
                roles: [role],
                policyVersion: "default",
                // this is where user attributes can be passed
                attributes: {
                  is_verified: user?.is_verified ?? false,
                },
            },
            resource: {
                kind: resource,
                policyVersion: "default",
                id: params?.id + "" || "new",
                attributes: params,
            },
            // the list of actions on the resource to check authorization for
            actions: [action],
        });
        return Promise.resolve({
            can: result.isAllowed(action) || false,
        });
    },
  }}
/>

GitHub

refine/examples/access-control-cerbos at master · refinedev/refine

Build your React-based CRUD applications, without constraints. - refine/examples/access-control-cerbos at master · refinedev/refine

20 Replies

refine-support-bot•2y ago

Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: It is possible that you are missing something. Refer to the refine Access Control Provider documentation for more information. SOURCES: https://refine.dev/docs/api-reference/core/providers/accessControl-provider/

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.

Access Control Provider | refine

Access control is a broad topic where there are lots of advanced solutions that provide different set of features. refine is deliberately agnostic for its own API to be able to integrate different methods (RBAC, ABAC, ACL, etc.) and different libraries (Casbin, CASL, Cerbos, AccessControl.js). can method would be the entry point for those soluti...

eager-peach•2y ago

Hey @dipbazz, It seems to be related to your cerbos configuration. Maybe @alexolivier can help you 🙏

foreign-sapphire•2y ago

Hey @salihozdemir, may be I am completely new to cerbos. So may have missed something. But from my project the api call is not been triggered for other resources except dashboard. But in the example project the api call for all resources will be triggered.

eager-peach•2y ago

Is there anything you do differently from the example? Or can you provide a codesandbox environment that we can reproduce the issue to better understand the problem? Btw, the accessControlProvider does not handle the routes. In the example, the API call for all resources might be coming from the Sider component.

foreign-sapphire•2y ago

In my sider I have CanAccess wrapper component, but I am not sure why the api call is not executed. I will try to recreate the sandbox and let you know about it.

Uncaught (in promise) TypeError: cyclic object value
    transport index.ts:132
    cerbos client.ts:663
    checkResources client.ts:299
    checkResource client.ts:246
    can App.tsx:103
    M index.tsx:119
    C index.tsx:55
    C index.tsx:55
    C index.tsx:55
    React 14
    batchCalls notifyManager.ts:51
    notifyFn notifyManager.ts:15
    flush notifyManager.ts:63
    flush notifyManager.ts:62
    batchNotifyFn notifyManager.ts:18
    flush notifyManager.ts:61
    promise callback*scheduleMicrotask utils.ts:414
    flush notifyManager.ts:60
    batch notifyManager.ts:29
    dispatch query.ts:577
    setData query.ts:203
    onSuccess query.ts:464
    resolve retryer.ts:103
    promise callback*run retryer.ts:150
    createRetryer retryer.ts:202
    fetch query.ts:450
    executeFetch queryObserver.ts:327
    onSubscribe queryObserver.ts:107
    subscribe subscribable.ts:14
    useBaseQuery useBaseQuery.ts:77

Uncaught (in promise) TypeError: cyclic object value
    transport index.ts:132
    cerbos client.ts:663
    checkResources client.ts:299
    checkResource client.ts:246
    can App.tsx:103
    M index.tsx:119
    C index.tsx:55
    C index.tsx:55
    C index.tsx:55
    React 14
    batchCalls notifyManager.ts:51
    notifyFn notifyManager.ts:15
    flush notifyManager.ts:63
    flush notifyManager.ts:62
    batchNotifyFn notifyManager.ts:18
    flush notifyManager.ts:61
    promise callback*scheduleMicrotask utils.ts:414
    flush notifyManager.ts:60
    batch notifyManager.ts:29
    dispatch query.ts:577
    setData query.ts:203
    onSuccess query.ts:464
    resolve retryer.ts:103
    promise callback*run retryer.ts:150
    createRetryer retryer.ts:202
    fetch query.ts:450
    executeFetch queryObserver.ts:327
    onSubscribe queryObserver.ts:107
    subscribe subscribable.ts:14
    useBaseQuery useBaseQuery.ts:77

I am getting this kind of error. I have tried to recreate the situation by creating a new project. But on my new project I don't get any errors with the API call on cerbos. I am only facing it with my ongoing project. What am I doing wrong? I have also tried to integrated the sider menu same as the new project by updating the refine package to latest version. I only get the errors on my console as show above.

quickest-silver•2y ago

@dipbazz Can you try to change this line?

return Promise.resolve({
            can: result.isAllowed(action) || false,
        });

return Promise.resolve({
            can: result.isAllowed(action) || false,
        });

return {can: result.isAllowed(action) || false,

return {can: result.isAllowed(action) || false,

foreign-sapphire•2y ago

Hey @batuhanw, Nothing happens same issue. But when I use the code you provided on newly created project to test, it works fine without any issue. Hey @batuhanw and @salihozdemir I have figured out the problem and it is because of the icon on my resources. If I use the icons I get the error as TypeError: cyclic object value but if there is not any icon then it works as fine. To reproduce the same issue I am facing you can install any icons library and use it on the resource icon option then it will throw an error.

eager-peach•2y ago

Quite an interesting bug, we'd love it if you could create an issue for us to investigate it 🙏

foreign-sapphire•2y ago

Here is the issue https://github.com/refinedev/refine/issues/3681

GitHub

[BUG] TypeError: cyclic object value, while using access control ce...

Describe the bug The problem occurred when trying to use cerbos as access control. The problem doesn't occur when used cerbos without icon in resource but occurs when we use custom icon for...

foreign-sapphire•16mo ago

Hey @salihozdemir @batuhanw , when I use the icons on sidebar menu the icons are displayed but still I get the error message in my console. Am I missing something? For your reference I have upgraded my refine package to the latest.

 "@refinedev/core": "^4.10.0",

 "@refinedev/core": "^4.10.0",

quickest-silver•16mo ago

Hello @dipbazz thanks for the report, we are on it

eager-peach•16mo ago

Do you have a React.Node property other than icon in the resource definition, in meta, in options, etc.?

foreign-sapphire•16mo ago

Hey @salihozdemir , no I don't have any. I have list, show, edit, and create property. In those resource with list, create, show, and edit property I get that error, but not on resources that only have name and meta property.

eager-peach•16mo ago

We do not get an error when we try to reproduce. Can you provide a project in codesandbox or any other way to get the error?

foreign-sapphire•16mo ago

Hey @salihozdemir , I have tried in the code sandbox and couldn't reproduce the problem, but in my project I still have the issue. I will try to reproduce the issues whenever I get time and let you know.