Document WebCrypto method of creating HMAC

[mglikesbikes]

Hi there!

Had a hell of a google search trying to figure this out, so thought I'd share — for some serverless environments (eg. Cloudflare Workers), we have to use webcrypto instead of any NodeJS crypto libraries. That means all of the examples can't be used!

Here's what I found via a lovely Stack Overflow thread and updated to not use btoa. Seems to work just fine!

/**
 * Generates the config object to pass to `await MagicBell.createInstance()` on the frontend
 * Note: to be used in serverless environments like Cloudflare Workers — 
 * never expose api_secret on the frontend!
 */

import type { MagicBellConfigOptions } from '@magicbell/core/dist/MagicBellClient';

export const getConfig = async (
  api_key: string,
  api_secret: string,
  external_id: string
): Promise<MagicBellConfigOptions> => {
  const encoder = new TextEncoder();
  const alg = { name: 'HMAC', hash: 'SHA-256' };
  const key = await crypto.subtle.importKey(
    'raw',
    encoder.encode(api_secret),
    alg,
    false,
    ['sign', 'verify']
  );
  const sig = await crypto.subtle.sign(alg.name, key, encoder.encode(external_id));
  const digest = Buffer.from(sig).toString('base64');

  return {
    apiKey: api_key,
    userExternalId: external_id,
    userKey: digest
  };
};

Sample usage, in, say, a SvelteKit app on Cloudflare Workers:

// file: +layout.server.ts

export const load = async (event) => {
  return {
    mb_config: await getConfig(event.platform.env.MAGICBELL_KEY, event.platform.env.MAGICBELL_SECRET, 'external_id');
  }
}

// file: +layout.svelte

<script lang="ts">
export let data: LayoutData;

await MagicBell.createInstance(data.mb_config);
const store = new NotificationStore();
await store.fetch();
console.log(`user has ${store.notifications.length} notifications`);
</script>

Anyway, just started with MagicBell today and loving it so far. Thanks!!

[markotoole1]

Thank you for the contribution, @mglikesbikes and glad to hear you love the product so far. We would love to say thank you - can you email [email protected] referencing this thread, and we will organise some swag for you.