DEV Community: Shahidul Islam Majumder

How To Generate API Key And Secret To Protect API

Shahidul Islam Majumder — Sat, 02 Oct 2021 14:23:03 +0000

I have used a lot of third-party APIs for the last four years. Most of them provided keys and secrets (API key/Client ID, API/Client secret) to access the API. I was also planning to develop some services where I would provide APIs. So, I was wondering how to generate API keys and API secrets for my services.

I started researching and read a lot of articles and StackOverflow questions regarding this topic. I found out that there are some common rules. I will try to summarize what I have learned about generating API keys and secrets in this post.

API Key or Client ID

An API key or Client ID is a unique key to identify a user. Like a username or email, it must be unique. It should be unguessable too. We don't have to encrypt it. We can generate an API key by using the crypto package from Node.js. You can use the following code to generate an API key.

const { randomBytes } = require('crypto');

function generateKey(size = 32, format = 'base64') {
  const buffer = crypto.randomBytes(size);
  return buffer.toString(format);
}

console.log(generateKey());
// will generate something like:
// 0NY4IrzHgLnRZUCWpxSnXLpn+Qjb1YfEj0UmnQaJiTw=

API Secret or Client Secret

An API/Client secret is a secure key to provide secure access to an API. It must be unique and unguessable. We must store it in hashed form because it's just like a password. It is a good practice to use different secret keys for different scopes in APIs. For example, we can use a key to Create and Update articles and another key to Read user list and details.

We can generate a random unique key using our previous generateKey method and hash the result using scryptSync from the crypto package. We will send the unhashed key to users and asked them to store the key safely. One of the shortcomings of this approach is that the user won't see the key again if the user forgets the key. You can use the following code to generate a hashed version of the key.

const { scryptSync, randomBytes, timingSafeEqual } = require('crypto');

function generateSecretHash(key) {
  const salt = randomBytes(8).toString('hex');
  const buffer = scryptSync(key, salt, 64) as Buffer;
  return `${buffer.toString('hex')}.${salt}`;
}

// used the previous function
const key = generateKey(); // send to user: Jj0fmQUis7xKJ6oge4r1fN4em7xJ+hILrgubKlG6PLA=
const secretHash = generateSecretHash(key); // save in db: c10c7e79fc496144ee245d9dcbe52d9d3910c2a514af1cfe8afda9ea655815efed5bd2a793b31bf923fe47d212bab7896cd527c720849678077e34cdd6fec0a2.2f717b397644fdcc

We can use the following code to compare and validate an API secret.

function compareKeys(storedKey, suppliedKey) {
  const [hashedPassword, salt] = storedKey.split('.');

  const buffer = scryptSync(suppliedKey, salt, 64) as Buffer;
  return timingSafeEqual(Buffer.from(hashedPassword, 'hex'), buffer);
}

I hope you've got a general guideline about generating API keys and secrets. To know more about this, you can follow the following links:

Resources:

Load Google Analytics (gtag) Efficiently in Gatsby Site

Shahidul Islam Majumder — Tue, 21 Sep 2021 16:26:18 +0000

Working with the gatsby.js site and google analytics is a little bit tricky if you consider performance. With the latest lighthouse version (v6 and above), performance reduces a lot if you have Google Tag Manager (especially if you install gatsby-plugin-google-analytics). A few months back, I even removed analytics from one of my sites as I was obsessed with performance.

But I didn't want to remove analytics from my newly built site and didn't want to reduce the performance too. So, I started researching for a solution and found a way to delay loading the analytics script here. I modified the script to match the new gtag script setup. It injects the gtag script after a certain period or if a user starts interacting with the site.

Setting up gtag

We need to add the following script in our gatsby-browser.js file. Here we are using an environment variable to hide our google analytics tracking id. You should add a .env file and provide the value for GATSBY_GA_TRACKING_ID there. You can adjust the script loading delay in the onreadystatechange method (I got the best result for 3500 ms).

function initGTM() {
  if (window.isGTMLoaded) {
    return false;
  }

  window.isGTMLoaded = true;

  const script = document.createElement('script');

  script.type = 'text/javascript';
  script.async = true;
  script.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.GATSBY_GA_TRACKING_ID}`;

  script.onload = () => {
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', `${process.env.GATSBY_GA_TRACKING_ID}`);
  };

  document.head.appendChild(script);
}

function loadGTM(event) {
  initGTM();
  event.currentTarget.removeEventListener(event.type, loadGTM);
}

exports.onClientEntry = () => {
  document.onreadystatechange = () => {
    if (document.readyState !== 'loading') {
      setTimeout(initGTM, 3500);
    }
  };

  document.addEventListener('scroll', loadGTM);
  document.addEventListener('mousemove', loadGTM);
  document.addEventListener('touchstart', loadGTM);
};

Add tracking ID on GitHub Action env

I am using GitHub Action to automate the deployment of my site. So, I have to read the environment variable from the deployment server. We can provide a .env file in our project, but this will not be secure. We can use GitHub's project secret to hide our credentials/secrets. Navigate to your project's settings page and go to the Secrets page from the menu. Now, add a repository secret named GATSBY_GA_TRACKING_ID and provide your tracking id as a value.

In your workflow configuration file add a section called env. In the env section add the environment variable like shown below. You should keep in mind that, env section should come before the jobs section in your workflow configuration.

name: GitHub Pages

on:
  push:
    branches:
      - main

env:
  GATSBY_GA_TRACKING_ID: ${{secrets.GATSBY_GA_TRACKING_ID}}

jobs:
  deploy:
  ......
  ......

Hard Lesson

If you want to access the environment variable in the BROWSER in a Gatsby site, prefix your variable name with GATSBY_.

Thanks a lot for reading the post, and please share if you find it useful.

Published My First Gatsby Theme

Shahidul Islam Majumder — Thu, 16 Sep 2021 05:03:08 +0000

Recently I was planning to redesign my portfolio. I planned to make it minimal and focus on showcasing my open-source works and writings. As I was using gatsby and I open-sourced my site, I decided to build it as a gatsby theme.

I had zero knowledge about developing a gatsby theme before starting the project. I started researching and found a great tutorial by Jason Lengstorf on egghead.io. I followed the tutorial and documentation, and managed to build a minimal theme in a couple of days. It was so easy that I felt almost like developing a gatsby site.

I started by designing the theme in Figma with the Atomic Design Pattern. I made a design system with color, typography, shadow, and some components so that I don't have to remember the color name, font size while designing the pages. You can find the design on this Figma link.

After completing the basic design, I started researching for a good name. My theme focuses on showcasing open-source projects. So, it would be great to have the word open-source in it. I remember developer Ahmad Awais used to call him OpenSourcerer, and dev.to founder Ben Halpern also likes to call him full-time open sourcerer. I checked on GitHub and Gatsby Plugin Library if the name already exists. It was available. So, I named my theme gatsby-theme-open-sourcerer.

Now let's have a look at the theme.

Features

minimal in design
markdown support for writing post
page contents in YAML format
open-source project showcasing with GitHub star count
fully customizable

Installation

A site can be bootstrapped easily with the theme by using the starter kit. Just run the following command (you have to have gatsby-cli installed).

gatsby new my-site https://github.com/sh4hids/gatsby-starter-open-sourcerer

Now navigate to the project folder and run gatsby develop to see your project in development mode.

Customization

You can customize each part of the theme either by customizing the configuration or by shadowing. You can find the detailed instructions on the theme's readme.

Hard Lesson

To shadow a theme, we have to skip the src folder in the shadow theme.

- issues/14134

Hope you'll find the theme useful. If you use and like the theme, please give a star and make a PR to add your site on showcase section.