It's mainly for frontend purposes... To
# spicedb
t
It's mainly for frontend purposes... To only render things that the user is allowed to see/perform
j
in that case, the recommendation is to bulk check the specific permissions the frontend needs
and, to do so async from the initial page load
check that the user has view permission, show the page/app screen
then, in the background, check the additional permissions and have the UI update accordingly
your question says "every org" though
so what, exactly, is the UI you're intending to build?
t
It's to know which menu buttons I should render... If should render a button to "add users" or just render the user list... Stuff like that
j
so you have a list of organizations and want to show a button per org in that list?
if so, BulkCheck, since presumably that list is paginated or limited in some way
t
BulkCheck should work I think How would you normally go by it? Should that be checked only once and cached on the frontend? Or should I make the request everytime the screen renders? Permissions don't change that much, but when they do, it would be interesting for users UI to be updated in a reasonable time
j
SpiceDB is designed for scale, especially around checks
so if you're bulk checking, say, 25 orgs
just do it every time
now, if you want to do it in response to changes in "real-time", you'd want Materialize for that
t
My bulk check would have close to 200 permissions, checked on around 50 orgs on the worst case scenario. So around 10k checks per user in this scenario
j
why do you need to check 200 permissions for one UI screen?
t
We don't really need to, but that's how its implemented today. It could be greatly reduced for sure
j

https://tenor.com/GwPo.gif

t
But just a rule of thumb, how many checks is too much for a single request?
j
CheckBulk has a limit, but the real point to note is not to "over check" if you aren't going to use the results
I forget offhand if the default is 1K checks or 10K checks, but either way, I'd recommend reducing to the set of permissions you actually need
it sounds like for each org you need, basically, 1 permission
so if you have 50 orgs, that's 50 checks in a single CheckBulk call
t
It wouldn't be one, but should't go over ~15 also
j
still better than 200
t
I don't think I need from all 50 orgs at the same time also. Just the one that is selected
j
oh, then yeah
CheckBulk the single org
if you're on an org-page
first check that the user can view the org/is a member
on page load
then, in the background, CheckBulk the perms for the other UI elements on screen
and stream the results async
enabling options as the permissions check
that's the "ideal" UX
even 200 for a single org is probably fine, although not ideal
t
Lazyly loading it on the background is a good idea. I'll try it
Thank you very much for the guidance!
j
what frameworks are you using for the backend and frontend? (just curious)
t
We are using single SPA (microfrontend framework) with React
Backend is mainly nodejs
j
cool
t
So the "getAllPermissions" we have today is to simplify to the client microfrontends. But it's not scaling well
j
yeah, I'd recommend heavily against that
especially since you're likely throwing out most of the work
t
True
j
I'd change it to
getPermissions(listOfPermsNeeded)
t
That's exactly what I was thinking
j
especially since the frontend has to have that list to know what to do with it anyway
I've had ideas around a React component that would let you do something like:
Copy code
<RequiresPermission permission="someperm"
>
   ... only gets rendered if the subject has the permission ...
</RequiresPermission>
and then, somehow, have the set of permissions be collected during React render (before HTML generation)
and then checked
but its just a wild idea
y
^ we basically wrote that at my old company
and it worked decently well
you gave it a list of permissions you wanted to check and an object, and then it did the work of calling our API gateway which called SpiceDB to get the associated bulkcheck response
t
Thats a good idea! I'm current thinking of creating a custom hook. Something like
Copy code
const permissions = usePermissions(["permission1", "permission2"])
5 Views