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.

Using HMAC Encryption

In order to use HMAC encryption in Inbox for enhanced security, follow these steps:

1. Enable HMAC encryption in the In-App provider settings:

• Go to Novu Dashboard.
• Navigate to the Integrations Store page.
• Click on the Novu In-App provider.
• A side panel will open from the right side of the screen with the provider settings.
• Enable Security HMAC encryption toggle in Integration Credentials section.
• Save the changes and copy the secret key from Api Keys page.

2. Generate HMAC hash on the server side:

Use the secret key to generate an HMAC hash of the subscriberId on the server side. Keep NOVU_SECRET_KEY secure and never expose it to the client.

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

3. Use the HMAC hash in the Inbox component:

Send the hmacHash generated in the previous step to the client side application via HTTP request or store it in the user's database record. Use it as the subscriberHash prop in the Inbox component. In below example, we are using currentUser hook to get the hmacHash from the user's database record.

import { Inbox } from '@novu/react';
 
const { user } = currentUser();
 
const hmacHash = user?.novuSubscriberHash;
 
<Inbox
  applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
  subscriber="YOUR_SUBSCRIBER_ID"
  subscriberHash={hmacHash}
/>;