Production Setup for React
Learn how to prepare your React notification inbox for production deployment including HMAC encryption and security best practices.
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.
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.
If HMAC encryption is active in In-App provider settings and subscriberHash
along with
subscriberId
is not provided, then Inbox will not load