Production Setup for React

HMAC Encryption

When Novu's user adds the Inbox to their application they are required to pass a subscriberId which identifies the user's end-customer, and the application Identifier which is acted as a public key to communicate with the notification feed API.

A malicious actor can access the user feed by accessing the API and passing another subscriberId using the public application identifier.

HMAC encryption will make sure that a subscriberId is encrypted using the secret API key, and those will prevent malicious actors from impersonating users.

Enabling HMAC Encryption

In order to enable Hash-Based Message Authentication Codes, you need to visit the admin panel In-App settings page and enable HMAC encryption for your environment.

1. Next step would be to generate an HMAC encrypted subscriberId on your backend:

import { createHmac } from 'crypto';
 
const hmacHash = createHmac('sha256', process.env.NOVU_SECRET_KEY)
  .update(subscriberId)
  .digest('hex');

2. Then pass the created HMAC to your client side application forward it to the component:

import { Inbox } from '@novu/react';
 
<Inbox
  applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
  subscriber="YOUR_SUBSCRIBER_ID"
  subscriberHash="YOUR_SUBSCRIBER_ID_HASH_VALUE"
/>;