Hi @Saad! That’s a good question What you are looking for is not possible out of the box, but the foundations for that are already built into the system. I’ll give you some code references and explain our logic, so you can take it from there.
Each of our API packages contains a GraphQL schema plugin. That plugin also contains security rules which are implemented using the https://www.npmjs.com/package/graphql-shield library.
Here’s a reference to security rules for Page Builder: https://github.com/webiny/webiny-js/blob/master/packages/api-page-builder/src/plugins/graphql.ts#L91 (btw., each API package in our repo has this graphq schema plugin at the same path, so every package will have
src/plugins/graphql.ts if they do something with schema)
As you can see, at the moment they are very simple, and most of the operations are covered by one scope:
In the same file you can see how
Revisions are configured much better, they have a separate scope for each operation:
Once you have these scopes, you use them to create Roles in our admin UI:
That’s how you give users the necessary scopes to execute GraphQL operations.
Now - there is a bug in the system that doesn’t detect all scopes from all the services. That is why you can only see these 3 scopes here. This bug happened when we split our monolith system into separate Apollo Services. We will get on it and fix it in the upcoming days. Once it’s fixed, you will be able to see all scopes from all the services in this list.
So scopes are the smallest “permission” to execute an operation. You assign them to Roles, and you can create user Groups which contain multiple Roles. Once the user logs in, all of his scopes from all roles and groups are stored in his JWT. So whenever you want to perform a check on the API side, you get that data from
This is everything there is regarding the GraphQL side of things.
In React apps, you also have access to a User object and his scopes, using
useSecurity() hook. Here is a reference to how you use in your app: https://github.com/webiny/webiny-js/blob/master/packages/app-security/src/admin/plugins/UserMenu/UserInfo.tsx#L60
And here is an example of how you can render UI elements based on roles/scopes: https://github.com/webiny/webiny-js/blob/master/packages/app-i18n/src/admin/plugins/menus.tsx
Customizing the UI
This one would require you/us to upgrade the existing UI to use the
<SecureView> (or another component which checks permissions) in places like these:
Once those components are in place, you will be able to control both UI and API using the scopes/roles/groups from the Admin app. And the same goes for all our apps, not only Page Builder.
This is all possible, however, we’re short on human resources and would LOVE your help. Send us PRs, we’ll be glad to help and give you more guidance, but we ourselves are very busy with other high priority tasks at the moment.
We have an active Gitter chat, so feel free to join us https://gitter.im/Webiny/webiny-js for even faster communication. If you give it a go and start working on improvements, please do open an issue on GH where we can discus the implementation and give you more references, directions, whatever you may need.
Hope this helps, and let us know what you think
here is an issue to track the scopes bug: https://github.com/webiny/webiny-js/issues/729