• Products

    Access

    Improve user conversion, go passwordless.

    Gate

    The identity-aware edge authorizer.

    Data Vault

    Serverless-ready secure PII user data storage.

  • Use cases

    Product & Engineering

    Onboarding

    Analytics & Screening

    Platform & Security

    Fraud & Security

    Edge Authentication

    Application Access Plane

  • Developers
  • Blog
  • Gallery

    E-commerce Playground

    Build a passwordless eCommerce experience backed by SlashID.

    Multi-tenant App

    Build a multi-tenant app using SlashID.

Log in
Get started

Products

Access

Gate

Data Vault

Use cases

Onboarding

Analytics & Screening

Fraud & Security

Edge Authentication

Application Access Plane

Developers

Blog

Gallery

E-commerce Playground

Multi-tenant App

Log in
Get started
New Feature

React SDK support for <Groups>

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

Ivan Kovic, Vincenzo Iozzo
Ivan Kovic, Vincenzo Iozzo
Ivan Kovic, Vincenzo Iozzo9 Feb, 2023

IntroductionSlashID groups in a nutshellWrite your own rendering rulesConclusion

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"
}'
  1. 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”]
  1. 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!

Ivan Kovic, Vincenzo Iozzo
Ivan Kovic, Vincenzo Iozzo
Ivan Kovic, Vincenzo Iozzo

Share

TwitterLinkedinFacebook

Related articles

GDPR Compliance: Consent Management
New Feature
+00

GDPR Compliance: Consent Management

Effortless GDPR compliance out of the box. Notify users about your intent to use cookies and request their consent.

Jake Whelan
Jake Whelan
·27 Oct, 2023
OAuth 2.0 Fine-Grained API Authorization with Gate and OpenAPI
New Feature
+00

OAuth 2.0 Fine-Grained API Authorization with Gate and OpenAPI

Protect your API against unauthorized access without changing your application.

Joseph Gardner
Joseph Gardner
·23 Oct, 2023
Synchronous Webhooks
New Feature
+00

Synchronous Webhooks

We are excited to release synchronous webhooks, the latest addition to our webhooks features.

Joseph Gardner
Joseph Gardner
·20 Jul, 2023
SlashID/Identity at scale
Secure your users •••••••••••••••••

Secure your users

The identity stack for users and APIs built for product teams with deadlines.

Get started

© 2023 SlashID® Inc.

All Rights Reserved.

Terms · Privacy · System Status

Products

GateAccessData Vault

SlashID

BlogCareersTalk to us

Developers

Get startedDocumentationSystem StatusSecurity

Gallery

E-commerceMulti-tenancy

Social

TwitterLinkedin

We use cookies to improve your experience. Read our cookie policy.