Turn on HMAC Authentication

This guide will help you turn on HMAC authentication for your MagicBell project. Read the HMAC entry on the glossary for further information about this authentication code.

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. 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 ID (if it's feasible for them to guess one) 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 id in your server. Do not perform the calculation of the HMAC in the client.

* When using an email address, the email address MUST be lowercase

const userEmailHMAC = crypto
  .createHmac('sha256', MAGICBELL_API_SECRET)

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 id when initializing MagicBell's notification inbox.

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

export default function Notifications() {
  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userEmail="mary@example.com" userKey="userEmailHmac">
      {(props) => <FloatingNotificationInbox height={500} {...props} />}