Mrk 940 prepare for production

content/docs/platform/inbox/prepare-for-production.mdx

@@ -1,52 +1,80 @@
 ---
 pageTitle: 'Prepare for Production'
 title: 'Prepare for Production'
-description: 'Learn how to prepare your React notification inbox for production deployment including HMAC encryption and security best practices.'
+description: 'Learn how to prepare your Inbox for production by enabling HMAC encryption for security and managing your branding.'
 icon: 'ShieldCheck'
 ---
 
-## HMAC Encryption
+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.
 
-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.
+This ensures that your end users receive notifications safely, without exposure to unnecessary risks, and in a way that aligns with your product branding.
 
-A malicious actor can access the user feed by accessing the API and passing another `subscriberId` using the public application identifier.
+## Set the correct environment
 
-HMAC encryption will make sure that a `subscriberId` is encrypted using the secret API key, and those will prevent malicious actors from impersonating users.
+Novu supports multiple environments, including development, production, and any custom environments you create.
 
-## Using HMAC Encryption
+When preparing for deployment, choose the environment that will serve as your production environment and update your configuration accordingly:
 
-In order to use HMAC encryption in Inbox for enhanced security, follow these steps:
+- Use the API keys for your selected production environment from the [API Keys](https://dashboard.novu.co/api-keys) page in your application.
+- Store keys in `.env` file or your server’s environment variables.
+- Confirm your `applicationIdentifier` and `subscriberId` match the configuration for your chosen production environment.
 
-### 1. Enable HMAC encryption in the In-App provider settings:
+## Secure your Inbox with HMAC encryption
 
-- Go to [Novu Dashboard](https://dashboard.novu.co).
-- Navigate to the [Integrations Store](https://dashboard.novu.co/integrations) 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](https://dashboard.novu.co/api-keys) page.
+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.
 
-### 2. Generate HMAC hash on the server side:
+<Callout type="warn">Without additional security, a malicious actor could potentially guess another subscriber's `subscriberId` and use your public `applicationIdentifier` to view that user's notifications.</Callout>
 
-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.
+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](https://dashboard.novu.co).
+2. Navigate to the [Integrations Store](https://dashboard.novu.co/integrations) 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.
+  ![Enabling HMAC in the Novu dashboard](/images/inbox/hmac.png)
+
+### 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.
 
 ```tsx
 import { createHmac } from 'crypto';
 
-export const hmacHash = createHmac('sha256', process.env.NOVU_SECRET_KEY)
+// 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:
+<Callout type="warn">Keep `NOVU_SECRET_KEY` secure and never expose it to the client.</Callout>
+
+### 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.
+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.
 
 ```tsx
 import { Inbox } from '@novu/react';
 
-const { user } = currentUser();
+// 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
@@ -60,3 +88,16 @@ const hmacHash = user?.novuSubscriberHash;
   If HMAC encryption is active in In-App provider settings and `subscriberHash` along with
   `subscriberId` is not provided, then Inbox will not load
 </Callout>
+
+## 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](https://dashboard.novu.co).
+2. Navigate to the **Settings** page.
+3. Under the **Organization** tab, find the **Branding & Integrations** section.
+4. Enable the **Remove Novu branding** toggle.
+
+![Removing Novu branding](/images/inbox/novu-branding.png)