foreign-sapphire
foreign-sapphire16mo 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
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...
flat-fuchsia
flat-fuchsia16mo ago
Hey @dipbazz, It seems to be related to your cerbos configuration. Maybe @alexolivier can help you 🙏
foreign-sapphire
foreign-sapphire16mo 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.
flat-fuchsia
flat-fuchsia16mo 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
foreign-sapphire16mo 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.
yelping-magenta
yelping-magenta16mo 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,
});
to
return {can: result.isAllowed(action) || false,
return {can: result.isAllowed(action) || false,
foreign-sapphire
foreign-sapphire16mo 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.
flat-fuchsia
flat-fuchsia16mo ago
Quite an interesting bug, we'd love it if you could create an issue for us to investigate it 🙏
foreign-sapphire
foreign-sapphire16mo ago
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&#39;t occur when used cerbos without icon in resource but occurs when we use custom icon for...
foreign-sapphire
foreign-sapphire13mo 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",
yelping-magenta
yelping-magenta13mo ago
Hello @dipbazz thanks for the report, we are on it
flat-fuchsia
flat-fuchsia13mo ago
Do you have a React.Node property other than icon in the resource definition, in meta, in options, etc.?
foreign-sapphire
foreign-sapphire13mo 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.
flat-fuchsia
flat-fuchsia13mo 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
foreign-sapphire13mo 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.
yelping-magenta
yelping-magenta13mo ago
@dipbazz it's a long-shot but, I'll ask: are you using pnpm? We have some known issues with pnpm, where pnpm installs lower versions of our libraries because our peer dependencies aren't pointing to the latest version. Sometimes that causes problems. We -hopefully- don't have this issue in the recent releases, so only thing I can think of is that pnpm issue.
foreign-sapphire
foreign-sapphire12mo ago
Hey @batuhanw, Sorry for the late response. I am using npm as my package manager, is the pnpm and npm same? Should I try to install my package using yarn?
yelping-magenta
yelping-magenta12mo ago
Hey @dipbazz, pnpm is a different npm client, if you are not using your issue is about something else. With pnpm, sometimes not our latest packages are being installed and causing problems, I thought that might be the problem. Is your issue still persists after upgrading to the latest packages?
foreign-sapphire
foreign-sapphire12mo ago
Hey @batuhanw, thanks for your clarification. My issues is still persistent, I am sorry for my time constraint because of which I couldn't replicate the issue on codesandbox. I will soon replicate my issues and let you guys know about it. Thank you for your understanding.
foreign-sapphire
foreign-sapphire12mo ago
Hey @batuhanw @salihozdemir , I have figured out the problem and created a codesandbox related to this issue here is my comment regarding this issue on github https://github.com/refinedev/refine/issues/3681#issuecomment-1614316425 please check it out.
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 our...