Hi team! I am using '@cerbos/embedded' in react app. Currently I have difficulties to check the resource and hence couldn't check if user is allowed to perform certain action. The console didn't display any output. Can anyone help with this?

import { useCerbos } from '@cerbos/react';
       
        const cerbos = useCerbos();        
        const check = await cerbos.checkResource({
            resource: {
                kind: 'test',
                id: testID ?? '',
            },
            actions: ['view'],
        });
        console.log('check',JSON.stringify(check))
        const isAuthorized = check.isAllowed('view');

Hey @test-cerbos-nestjs! Not a keen JS user but I think there is no problem with the snippet you’ve shared. Would you mind sharing the part where you create the client and pass it to the CerbosProvider? (Ex)

export const getCerbosClient = () => {
	const client = new Cerbos(
		new AutoUpdatingLoader(
			'...cerbos embeded PDP url'
		)
	);
	return client;
};

const client = getCerbosClient();

<CerbosProvider
            client={client}
            principal={{
                id: currentUser?.id ?? '',
                roles: ['owner'],
            }}
        >

const cerbos = useCerbos();

fyi I can read principle properties from this code above 🙂 and I used this repo as reference.

could you please share your package.json file?

I will ask about that error to one of our @cerbos/embedded devs and get back to you

"@cerbos/embedded": "^0.7.3",
        "@cerbos/grpc": "^0.18.1",
        "@cerbos/react": "^0.1.3",

these are the three cerbos packages i installed

Hi, you shouldn't need to explicitly install

@cerbos/core

because it is a dependency of the other packages. Could you share a more complete example please? Your initial snippet seems like it is executing outside a component but that would mean the

useCerbos

hook wouldn't work. I would suggest trying one of the higher-level hooks (e.g.

useIsAllowed

) because then you don't have to deal with promises. The readme has an example.

hi I have tried with useIsAllowed and useCheckResource

const check = useCheckResource({
        resource: {
            kind: 'project1',
            id: projectID ?? '',
        },
        actions: ['read']
    });

    console.log('check',check);

and it always returns

isLoading: true

Can you check in the network tab and see if it is fetching the embedded bundle from Cerbos Hub successfully?

yes it fetched the bundle successfully and about the

useCerbos

hook, if I am able to retrieve the principal property from it, that means that hook works right?

const cerbos = useCerbos();
console.log(cerbos.principal)

It's surprising! I would've expected it to work in all modern browsers. We don't do any browser-based testing at the moment but it sounds like we might need to 😕 As far as debugging goes, I would be tempted to dig into

node_modules/@cerbos/embedded/lib/bundle.js

and chuck some

console.log

statements into the

checkResources

method there. Maybe the

download

and

instantiateStreaming

functions as well. Hopefully that might narrow down where it is hanging.

thanks for the tips lets me check it

you can try running it with

--force

flag so that vite ignores the build cache

the log stopped before line 31

Interesting, so

instantiate

is hanging?

the last log was from line 134

Very strange. I'll see if the same thing happens for me in Firefox (I am on macOS but hopefully it behaves the same as on Linux)

fyi this is the version of Firefox I'm using

Ok so, I created a minimal script to check that the browser can download and instantiate the wasm module.

bundleUrl = "<https://lite.cerbos.cloud/bundle?workspace=P2L30LRNW40G&label=5cd4136b20fda5d37a12aad519a745dcac21758883dc5ca23ab6394f7002c225>"
response = fetch(bundleUrl)
await WebAssembly.instantiateStreaming(response, { env: { now: () => 0 } })

(you can use your own bundle URL or borrow mine 🙂) I pasted that in the devtools console in both Chrome and Firefox, and it works in both browsers. Does that script work for you or does it also hang? You'll need to have the console open on a site that doesn't have a content security policy blocking the request (google.com works).

it does not hang i've tried with your bundle url and mine

Hmmm... how close together are those log lines in your screenshot above? Is it possibly stuck in a loop? Maybe it is actually getting aborted rather than hanging. You could add

signal.addEventListener("abort", () => { console.log("aborted") });

to the

download

method of

AutoUpdatingLoader

in

lib/loader.js

to check

I've added the console.log in

download

method, but no log was printed

Yes, that's correct; the CSP must be correct to allow both fetching bundles (

connect-src <https://lite.cerbos.cloud>

) and executing them (

script-src 'wasm-unsafe-eval'

).