Inbox with Context

Contexts let you scope each <Inbox /> instance to a specific environment, tenant, or app within your product. When combined with workflow-level contexts, they ensure that each <Inbox /> displays only the notifications relevant to that specific context.

How context works in <Inbox/>

The <Inbox /> uses exact-match context filtering to determine which notifications to display. This means the context provided to the <Inbox /> must match all the key-value pairs of the context used when the workflow was triggered.

This creates predictable isolation and ensures notifications are scoped to the context provided. If the contexts do not match exactly, the notification will not be delivered to that Inbox session.

• If workflow is triggered with a context but Inbox is initialized without a context, the notification will not be delivered to that Inbox session.
• If workflow is triggered without a context but Inbox is initialized with a context, the notification will not be delivered to that Inbox session.
• If workflow is triggered with a context but Inbox is initialized with a different context, the notification will not be delivered to that Inbox session.

Creating context via <Inbox/>

If a new context is passed from the <Inbox /> that doesn’t already exist, Novu will automatically find or create it. This means you don’t have to manually set up contexts before using them, they are created just in time.

However, if a context already exists, its data won’t be updated automatically. This prevents unintentional overwrites of stored context data.

This is particularly useful for:

• Dynamic tenants or organizations: When users join or switch organizations.
• Feature-specific dashboards: Where each section of your app has its own notification scope.

You can view all automatically created contexts under the Contexts section of your Novu dashboard.

Applying context to the Inbox

You can filter the <Inbox /> notifications to a specific context, by passing a context prop to the <Inbox /> component.

This prop's value defines the filter for that session, and it will only request and show notifications that match this context.

import { Inbox } from '@novu/react';

<Inbox
  applicationIdentifier="APPLICATION_IDENTIFIER"
  subscriber="SUBSCRIBER_ID"
  context={{
    tenant: {
      "id": "acme-corp",
      "data": {
        "name": "Acme Corporation",
        "plan": "enterprise",
      }
    },
  }}
/>

When a workflow with these exact context is triggered, as seen below

Then, the notifications will be delivered to the <Inbox />.

How to secure your context

Because the context prop is set on the client-side, a malicious user could potentially tamper with it to view notifications from a different tenant.

To prevent this, you must fetch the context details and contextHash from your server and pass them to the Inbox component.

import { createHmac } from 'crypto';
import { canonicalize } from '@tufjs/canonical-json';

const context = {
  tenant: {
    id: "acme-corp",
    data: {
      name: "Acme Corporation",
      plan: "enterprise",
    },
  },
};

const contextHash = createHmac('sha256', "NOVU_SECRET_KEY")
  .update(canonicalize(context))
  .digest('hex');

import { Inbox } from '@novu/react';

const { user } = currentUser();
const subscriberHash = user?.novuSubscriberHash;
const contextHash = user?.novuContextHash;

const context = {
  tenant: {
    id: "acme-corp",
    data: {
      name: "Acme Corporation",
      plan: "enterprise",
    },
  },
};

<Inbox
  applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
  subscriber="YOUR_SUBSCRIBER_ID"
  subscriberHash={subscriberHash}
  context={context}
  contextHash={contextHash}
/>