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 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.

digest = OpenSSL::Digest::Digest.new('sha256')
user_email_hmac = Base64.encode64(OpenSSL::HMAC.digest(digest, MAGICBELL_API_SECRET, user_email))
const userEmailHMAC = crypto
  .createHmac('sha256', MAGICBELL_API_SECRET)
  .update(userEmail)
  .digest('base64');
import javax.crypto.spec.SecretKeySpec;
import javax.crypto.Mac;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.util.Base64;

class MagicBellAuth {
  private static final String HMAC_SHA256 = "HmacSHA256";

  public static String calculateHMAC(String data, String key) throws InvalidKeyException, NoSuchAlgorithmException {
    SecretKeySpec secretKeySpec = new SecretKeySpec(key.getBytes(), HMAC_SHA256);
    Mac mac = Mac.getInstance(HMAC_SHA256);
    mac.init(secretKeySpec);
    return encodeToBase64(mac.doFinal(data.getBytes()));
  }

  private static String encodeToBase64(byte[] bytes) {
    return Base64.getEncoder().encodeToString(bytes);
  }
}

class Main {
  public static void main(String[] args) throws InvalidKeyException, NoSuchAlgorithmException {
    String hmac = MagicBellAuth.calculateHMAC("user@example.com", "MAGICBELL_API_SECRET");
    System.out.println(hmac);
  }
}
import Base64 from 'crypto-js/enc-base64';
import hmacSHA256 from 'crypto-js/hmac-sha256';

const userEmailHMAC = Base64.stringify(hmacSHA256(userEmail, MAGICBELL_API_SECRET));
$hexHash = hash_hmac('sha256', $userEmail, utf8_encode($magicBellAPISecret));
$hmac = base64_encode(hex2bin($hexHash));

How do I use it?

Next, provide the HMAC code along with your MagicBell's projects API key and the user's email or id when initializing MagicBell's notification inbox.

<div id="notifications-inbox" />
<script type="text/javascript">
  // Other initialization code...
  var options = {
    apiKey: 'MAGICBELL_API_KEY',
    userEmail: 'mary@example.com',
    userKey: userEmailHmac,
  };

  magicbell('render', target, options);
</script>
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} />}
    </MagicBell>
  );
)

Deploy your website and wait for a few hours (so your users refresh your website or close/open your website) and have the latest JavaScript containing this new initialization code. Enable HMAC authentication in the Settings section of your MagicBell project.

Remember that this is secure as long as your private key is kept safe. Never publish your private key!