GDPR Compliance: Consent Management with SlashID
Tags: gdpr, compliance, react
Published: 2023-11-03 18:30:11


![React form](https://www.slashid.dev/blog/gdpr-consent-management-react/placeholder.png)

## Introduction

At SlashID we make it easy for you to collect, store and process user data in a way that complies with the European Unions' [General Data Protection Regulation (GDPR) and ePrivacy Directive](https://developer.slashid.dev/docs/access/concepts/data-protection-compliance/gdpr) legislations. We deeply value your users' privacy.

In this blog post, we're excited to introduce the `<GDPRConsentDialog>` component from the SlashID React SDK. As a companion for [our data residency features](https://developer.slashid.dev/docs/access/concepts/replication#:~:text=At%20SlashID%2C%20we%20solve%20these%20problems%20transparently%20for%20you.%20All%20user%20data%20is%20by%20default%20stored%20in%20the%20region%20geographically%20closest%20to%20the%20user.%20Additionally%2C%20we%20globally%20replicate%20some%20user%20data%20in%20hashed%20form%20to%20ensure%20fast%20reads%2C%20while%20remaining%20compliant%20and%20secure.), the `<GDPRConsentDialog>` component makes GDPR compliance effortless and worry-free.

## Collecting user consents

We store consents in our [Data Vault](https://www.slashid.dev/products/vault/), making them readily available anywhere you implement SlashID.

Consent is broken down into five high-level categories:

1. Analytics
2. Marketing
3. Retargeting
4. Tracking
5. Necessary cookies

By default the `<GDPRConsentDialog>` prompts the user to `Accept all` or `Reject all`; where reject all also includes rejecting "necessary cookies".

```html
<GDPRConsentDialog />
```

![The default GDPRConsentDialog state](https://www.slashid.dev/blog/gdpr-consent-management-react/default.png)


The `Customize` button reveals a set of controls where a user can choose by category what consent they are comfortable to give.

![Consent can be customized](https://www.slashid.dev/blog/gdpr-consent-management-react/customize.png)

Sometimes a subset of cookies are necessary to provide a service or comply with legal requirements, like data protection laws.

Enabling this is as simple as setting the `necessaryCookiesRequired` prop when implementing the `<GDPRConsentDialog>` component.

```html
<GDPRConsentDialog necessaryCookiesRequired />
```

![Necessary cookies can be required](https://www.slashid.dev/blog/gdpr-consent-management-react/necessary.png)

We've built the `<GDPRConsentDialog>` with maximum flexibility in mind.

If you have a more complex use case like custom consent levels when choosing `Accept all` and `Reject all`, or disabling interaction with your product until consent has been given - you're in luck! We have support for these edge-cases and more: [check out the documentation](https://developer.slashid.dev/docs/access/react-sdk/reference/components/react-sdk-reference-gdprconsentdialog).

## Reading and writing consents programatically

Sometimes there are actions in your product which are gated behind a users consent, for example publishing events to your analytics platform.

With SlashID you can access a users consents with the `useGDPRConsent()` hook, and use it to decide whether or not the action can be performed.

```jsx
import { useGDPRConsent, GDPRConsentLevel } from '@slashid/react'
import { useAnalytics } from '...'

function Component() {
  const { consents, isLoading } = useGDPRConsent()
  const { publish } = useAnalytics()

  if (isLoading) {
    return <div>Loading consent...</div>
  }

  const analyticsAllowed = consents.some(
    ({ consent_level }) => consent_level === GDPRConsentLevel.Analytics
  )

  const addToCart = () => {
    if (analyticsAllowed) {
      publish({
        name: 'add_to_cart',
        payload: {
          /* ... */
        },
      })
    }

    // ...
  }

  return <button onClick={addToCart}>Add to cart</button>
}
```

You might find yourself in a position where you would like to offer your users the option to "upgrade" their consent and opt-in to some functionality.

The `useGDPRConsentHook()` hook provides you a mechanism to do just that.

```jsx
import { useGDPRConsent, GDPRConsentLevel } from '@slashid/react'
import { useAnalytics } from '...'

function Component() {
  const { consents, isLoading, updateGdprConsent } = useGDPRConsent()

  if (isLoading) {
    return <div>Loading consent...</div>
  }

  const analyticsAllowed = consents.some(
    ({ consent_level }) => consent_level === GDPRConsentLevel.Analytics
  )

  const enableAnalytics = () => {
    updateGdprConsent([
      ...consents,
      GDPRConsentLevel.Analytics
    ])
  }

  return (
    <div>
      {!analyticsAllowed && (
        <p>
          You have analytics disabled, your user dashboard has insufficient data to operate.
        </p>
        <button onClick={enableAnalytics}>
          Enable analytics
        </button>
      )}

      {/* ... */}
    </div>
  )
}
```

## Conclusion

In this blogpost we explained how to collect user consent with the `<GDPRConsentDialog>` and use the data from `useGDPRConsent()` to make informed decisions within your product, GDPR compliance has never been easier.

Ready to try SlashID? Sign up [here](https://console.slashid.dev/signup)!

Is there a feature you’d like to see, or have you tried out SlashID and have some feedback? [Let us know](mailto:contact@slashid.dev)!