Prepare for Production

Before deploying the Inbox UI to production, you should secure your integration and configure the correct environment. You can also remove Novu's branding from your notifications.

This ensures that your end users receive notifications safely, without exposure to unnecessary risks, and in a way that aligns with your product branding.

Set the correct environment

Novu supports multiple environments, including development, production, and any custom environments you create.

When preparing for deployment, choose the environment that will serve as your production environment and update your configuration accordingly:

• Use the API keys for your selected production environment from the API Keys page in your application.

• Store keys in .env file or your server’s environment variables.

• Confirm your applicationIdentifier and subscriber match the configuration for your chosen production environment.

• Add these two props, if using the EU region:

  • apiUrl with value https://eu.api.novu.co
  • socketUrl with value wss://eu.socket.novu.co

Secure your Inbox with HMAC encryption

When you add the Inbox to your application, you're required to pass:

• subscriberId: Identifies the current subscriber.
• applicationIdentifier: A public key to communicate with the notification feed API.

You can prevent this by enabling HMAC (Hash-based Message Authentication Code) encryption. This process uses a secret key to create a secure signature (subscriberHash) for each subscriberId. Novu then verifies this hash to ensure that requests to view a notification feed are authentic and not from an impersonator.

Follow these steps to enable HMAC encryption.

1. Enable HMAC in the dashboard

Activate the HMAC security feature within your Novu in-app provider settings.

1. Go to Novu Dashboard.
2. Navigate to the Integrations Store page.
3. Click on the Novu In-App for your chosen production environment
4. A side panel opens from the right side of the screen with the provider settings, enable Security HMAC encryption toggle in Integration Credentials section.

2. Generate HMAC hash on the server side

Next, use your secret key from the API Keys page on the Novu dashboard to generate an HMAC hash of the subscriberId on the server side.

import { createHmac } from 'crypto';
 
// The subscriberId of the logged-in user
const subscriberId = 'REPLACE_WITH_SUBSCRIBER_ID';
 
// The secret key from your Novu API Keys page
const novuSecretKey = process.env.NOVU_SECRET_KEY;
 
// Generate the HMAC hash
const hmacHash = createHmac('sha256', novuSecretKey)
  .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. You can include it in the initial data payload when a subscriber or user logs in or fetch it from a dedicated API endpoint.

Pass the hash to the subscriberHash prop in your Inbox component.

import { Inbox } from '@novu/react';
 
// Example: The hmacHash is passed to the frontend
// as part of the user object after they authenticate.
 
const { user } = currentUser();
const hmacHash = user?.novuSubscriberHash;
 
<Inbox
  applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
  subscriber="YOUR_SUBSCRIBER_ID"
  subscriberHash={hmacHash}
/>;

Remove Novu branding

Users on a paid plan can remove the "Inbox by Novu" branding from the Inbox UI.

To remove the branding:

1. Go to Novu Dashboard.
2. Navigate to the Settings page.
3. Under the Organization tab, find the Branding & Integrations section.
4. Enable the Remove Novu branding toggle.