@novu/nextjs 3.10.1 → 3.11.0

package/README.md

@@ -88,11 +88,11 @@ function Novu() {
 
 ## 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.
+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.
+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.
+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
 
@@ -102,15 +102,17 @@ In order to enable Hash-Based Message Authentication Codes, you need to visit th
   <img src="/images/notification-center/client/react/get-started/hmac-encryption-enable.png" />
 </Frame>
 
-1. Next step would be to generate an HMAC encrypted subscriberId on your backend:
+#### Subscriber HMAC
+
+1. Generate an HMAC encrypted subscriberId on your backend:
 
 ```jsx
 import { createHmac } from 'crypto';
 
-const hmacHash = createHmac('sha256', process.env.NOVU_API_KEY).update(subscriberId).digest('hex');
+const subscriberHash = createHmac('sha256', process.env.NOVU_API_KEY).update(subscriberId).digest('hex');
 ```
 
-2. Then pass the created HMAC to your client side application forward it to the component:
+2. Pass the created HMAC to your client side application:
 
 ```jsx
 <Inbox
@@ -123,6 +125,36 @@ const hmacHash = createHmac('sha256', process.env.NOVU_API_KEY).update(subscribe
 > Note: If HMAC encryption is active in In-App provider settings and `subscriberHash`
 > along with `subscriberId` is not provided, then Inbox will not load
 
+#### Context HMAC (Optional)
+
+If you're using the `context` prop to pass additional data (e.g., tenant information, environment, etc.), you should also generate a `contextHash` to prevent context tampering:
+
+1. Generate an HMAC for the context on your backend:
+
+```jsx
+import { createHmac } from 'crypto';
+import { canonicalize } from '@tufjs/canonical-json';
+
+const context = { tenant: 'acme', app: 'dashboard' };
+const contextHash = createHmac('sha256', process.env.NOVU_API_KEY)
+  .update(canonicalize(context))
+  .digest('hex');
+```
+
+2. Pass both the context and contextHash to the component:
+
+```jsx
+<Inbox
+  subscriberId={'SUBSCRIBER_ID_PLAIN_VALUE'}
+  subscriberHash={'SUBSCRIBER_ID_HASH_VALUE'}
+  context={{ tenant: 'acme', app: 'dashboard' }}
+  contextHash={'CONTEXT_HASH_VALUE'}
+  applicationIdentifier={'APPLICATION_IDENTIFIER'}
+/>
+```
+
+> Note: When HMAC encryption is enabled and `context` is provided, the `contextHash` is required. The hash is order-independent, so `{a:1, b:2}` produces the same hash as `{b:2, a:1}`.
+
 ## Use your own backend and socket URL
 
 By default, Novu's hosted services for API and socket are used. If you want, you can override them and configure your own.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novu/nextjs",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/novuhq/novu",
@@ -93,7 +93,7 @@
     }
   },
   "dependencies": {
-    "@novu/react": "3.10.1"
+    "@novu/react": "3.11.0"
   },
   "nx": {
     "tags": [