Introduction

With the latest React SDK release we are introducing a new control component: <Groups>. Using <Groups>, you can conditionally render parts of the UI depending on whether the authenticated user belongs to specific Groups.

Read on to learn how to use this feature to implement role based access control (RBAC) in your frontend!

SlashID groups in a nutshell

Groups are named sets of Persons and can be thought of as roles in an RBAC context.

You can create any number of groups, and a Person can belong to multiple Groups.

When a Person authenticates with SlashID in your frontend, you receive back a token that includes a claim with the Groups the Person belongs to. The name of the claim is ‘groups’ by default and can be customized as part of your Organization’s configuration. As discussed in our last blogpost, SlashID can also pull groups from a third-party identity provider, such as Google.

Each SlashID customer is a tenant with one or more organizations. Groups can be either:

1. Specific to Organizations; or
2. Shared across multiple Organizations.

In the second case, Group names are visible to all relevant Organizations through the Groups API, but Group membership is Organization-specific.

We’ll discuss sub-organizations and group propagation in a separate blogpost, but for now let’s show an example of Organization-specific Groups.

1. Create a Group called admin in test_organization_1:

curl -L -X POST 'https://api.sandbox.slashid.com/groups' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'SlashID-OrgID: f978a6bd-adcb-3268-2312-573d0bad155d' \
-H 'SlashID-API-Key: ri6qRvmuLc1IlUeQm732126WvAHUIHUIO=' \

--data-raw '{
 "name": "admin",
 "description": "special access"
}'

2. Add a Person, specified by uuid, to the admin Group:

curl -L -X POST 'https://api.sandbox.slashid.com/groups/admin/persons' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'SlashID-OrgID: f978a6bd-adcb-3268-2312-573d0bad155d' \
-H 'SlashID-API-Key: ri6qRvmuLc1IlUeQm732126WvAHUIHUIO=' \
--data-raw '{
 "persons": [
"217b3e73-b0bb-4387-8ea4-85c8f2d04c93"
 ]
}'```

3. When the Person with that `id` authenticates with `test_organization_1`, the token will include a claim:

```json
“groups”: [“admin”]

4. Any app consuming the token will then be able to take appropriate actions based on the Groups (e.g., visualizing sensitive information, modifying third-party data and so on ).

Check out our documentation for more information on Groups.

Write your own rendering rules

Now that you set up your Groups, you can implement Group-based conditional rendering in your application. When a Person authenticates, they get back a Person token. SlashID embeds the list of Group names the Person belongs to in that token. Since SlashID SDK keeps the Person token in memory, you can get information on the client side synchronously, without starting a network call.

Group-based conditional rendering is demonstrated in the following code snippet. There we want to render some content only if the authenticated Person belongs to the admin group. We pass that content as children to <Groups>:

import { Groups } from '@slashid/react'

function Component() {
  const belongsToAdmin = React.useCallback(
    (groups) => groups.includes('admin'),
    []
  )

  return <Groups belongsTo={belongsToAdmin}>Only visible for admins.</Groups>
}

You also need to pass the belongsTo callback prop - let’s look into that in more detail.

Specifying the belongsTo callback

In order to determine whether child components should be rendered, you must specify a belongsTo callback. This function will be called by the <Groups> component, passing the list of groups the user belongs to as the argument.

const belongsToAdmin = React.useCallback(
  (groups) => groups.includes('admin'),
  []
)

This makes <Groups> very flexible: you can specify fine-grained business rules in the callback. It just needs to return a boolean value determining if the child components will be rendered or not. We recommend you memoize the callback using React.useCallback in order to minimize the number of re-renders.

For a more detailed example, please check this codesandbox.

Conclusion

In this blogpost we’ve shown how you can use the <Groups> component to implement a simple RBAC-like web application.

We have a lot more to come on Authorization, please stay tuned!