Turn on HMAC Authentication

This guide will help you turn on HMAC authentication for your MagicBell project.

Is HMAC authentication necessary?

When you initialize MagicBell's embeddable Notification Inbox in your website, you provide your MagicBell project's API key and a user's email or external ID (if it's feasible for them to guess one). A savvy user can open their browser's developer console and obtain your MagicBell project's API key with this setup. They can then initialize the inbox on their website with your API key but with a different email or external ID and start viewing that user's notifications.

By default, HMAC is turned off because it makes it easier to test the integration. However, we highly recommend turning it on before going live. You can do this from your MagicBell dashboard. Look for it on the Settings page.

How do I enable it?

You can enable HMAC authentication in the Settings section of your MagicBell Dashboard. If you have multiple MagicBell projects, you can select one to enable HMAC using the main menu.

Remember that this is secure as long as your private key is kept safe. NEVER PUBLISH YOUR PRIVATE KEY!

How do I compute it?

Use your MagicBell project's API secret to compute an HMAC code of the user's email or external ID on your server. Do not perform the calculation of the HMAC in the client.

Using an email address

const userEmailHMAC = crypto
  .createHmac('sha256', MAGICBELL_API_SECRET)
  .update(userEmail)
  .digest('base64');

Using an external ID

const userExternalIDHMAC = crypto
  .createHmac('sha256', MAGICBELL_API_SECRET)
  .update(userExternalID)
  .digest('base64');

How do I use it?

Next, provide the HMAC code in the userKey property.

You still need to set your API key and the user's email or external ID when initializing MagicBell's notification inbox.

Using an email address

import React from "react";
import MagicBell, { FloatingNotificationInbox } from "@magicbell/magicbell-react";

export default function Notifications() {
  return (
    
      {(props) => }
    
  );
)

Using an external ID

import React from "react";
import MagicBell, { FloatingNotificationInbox } from "@magicbell/magicbell-react";

export default function Notifications() {
  return (
    
      {(props) => }
    
  );
)