Controlling access to your API Key

David Kelley — Tue, 21 Jul 2020 15:13:24 +0000

The Firstclasspostcodes dashboard provides you with a number of security controls that help restrict access with your API key.

Enabled Operations

Today, we're releasing this to all of our customers! We've heard feedback from our customers asking us to provide a mechanism to disable operations that aren't required for their use cases, such as Geolocation Lookup; this can help to prevent accidental usage.

Let's also review all of the other ways we help to secure your API key.

Whitelisted domains

You can control access to your API key by whitelisting domains that you'll be using the API key on. For example, if your website lives on https://e-shop.com, you can restrict access by setting e-shop.com as a whitelisted domain.

This would prevent access to your API key for requests originating from any domain other than e-shop.com.

We also allow you to use wildcard subdomains, so feel free to provide *.e-shop.com too.

Whitelisted IPs

If you're integrating with our API from the back-end, you can provide whitelisted IPs and CIDR ranges to restrict access to your API key from any requests not matching that IP or address range.

We're also working on a mechanism to limit the number of requests that can be sent for a specific operation within a billing period.

Adding postcode lookup to an address form 🏡.

David Kelley — Tue, 21 Jul 2020 11:33:11 +0000

👋 Hey readers! Have you been given the task of improving an address form and thought, "hey, I could add postcode lookup to this form!" 💡.

Well, you've found the right blog post, because as the Einstein's amongst us have already guessed, this blog post is going to show you how!

First though, why is adding postcode lookup useful? Well, address entry is hard. It's slow on desktop and horrendous on mobile, having customers type "Flat 346B East Providence Tower" is a time consuming and error prone task. Customer addresses can have spelling mistakes or could just be incorrect, which at its worst could affect the success of taking payments or delivering their purchase! 😨

But integrating postcode lookup can be costly, right? No, not anymore. Head over to Firstclasspostcodes and register to get an API key. You get 500 requests for free, which is more than enough for any small e-commerce store. Firstclasspostcodes also provides a composable React library that makes it easy to integrate postcode lookup into any existing address form.

So let's get started, we've got our example address form already coded inside our application:

export const AddressForm = () => {
  return (
    <form>
      <fieldset>
        <legend>Your Address</legend>
        <div>
          <label>
            Address Line 1: <input type="text" name="address-line-1" />
          </label>
        </div>
        <div>
          <label>
            Address Line 2: <input type="text" name="address-line-2" />
          </label>
        </div>
        <div>
          <label>
            City/Town: <input type="text" name="address-city" />
          </label>
        </div>
        <div>
          <label>
            County: <input type="text" name="address-county" />
          </label>
        </div>
        <div>
          <label>
            Postcode: <input type="text" name="address-postcode" />
          </label>
        </div>
        <input type="submit" value="Submit" />
      </fieldset>
    </form>
  );
};

This should give us something like this...

Now we should install the Firstclasspostcodes React library so that we can integrate it with our app:

npm install @firstclasspostcodes/react --save

The library provides some helpful component that allow us to easily integrate with the API.

Firstly, lets surround our <AddressForm/> component with the <PostcodeLookup/> context, and set our API key:

import { PostcodeLookup } from "@firstclasspostcodes/react";

import { AddressForm } from "./AddressForm";

const apiKey = '1234567890';

export default function App() {
  return (
    <div className="App">
      <PostcodeLookup apiKey={apiKey}>
        <AddressForm />
      </PostcodeLookup>
    </div>
  );
}

Next, looking at the documentation we need to integrate our address form with the React library by adding data-* attributes to our input components. This helps the library know which values to apply to which inputs when a user selects an address.

Our <AddressForm/> component should now look like this:

import { PostcodeLookup } from "@firstclasspostcodes/react";

export const AddressForm = () => {
  return (
    <PostcodeLookup.Address>
      <form>
        <fieldset>
          <legend>Your Address</legend>
          <div>
            <label>
              Address Line 1:
              <input type="text" name="address-line-1" data-address-line1 />
            </label>
          </div>
          <div>
            <label>
              Address Line 2:
              <input type="text" name="address-line-2" data-address-line2 />
            </label>
          </div>
          <div>
            <label>
              City/Town:
              <input type="text" name="address-city" data-address-locality />
            </label>
          </div>
          <div>
            <label>
              County:
              <input type="text" name="address-county" data-address-county />
            </label>
          </div>
          <div>
            <label>
              Postcode:
              <input type="text" name="address-postcode" data-address-postcode />
            </label>
          </div>
          <input type="submit" value="Submit" />
        </fieldset>
      </form>
    </PostcodeLookup.Address>
  );
};

Now we just need to build the part of the form that enables users to enter a postcode and select an address! 🎉

Fortunately, the React library also provides these components for us. Lets build a short input component:

import { PostcodeLookup } from "@firstclasspostcodes/react";

export const AddressLookup = () => {
  return (
    <fieldset>
      <legend>Find your address</legend>
      <PostcodeLookup.Input />
      <PostcodeLookup.Select />
    </fieldset>
  );
};

These components are provided by the library and are pretty basic, they only use basic HTML and make no assumptions about styling; thats left up to you.

Lets add the <AddressLookup/> component to the main application:

import { PostcodeLookup } from "@firstclasspostcodes/react";

import { AddressLookup } from "./AddressLookup";
import { AddressForm } from "./AddressForm";

const apiKey = '1234567890';

export default function App() {
  return (
    <div className="App">
      <PostcodeLookup apiKey={apiKey}>
        <AddressLookup />
        <AddressForm />
      </PostcodeLookup>
    </div>
  );
}

It's nearly time for a beer 🍺, our form is coming together nicely:

Once we add a valid API key, we can enter a postcode and select a matching address! Here's a Codesandbox example of the form we've built in this blog post.

DEV Community: David Kelley

Controlling access to your API Key

Enabled Operations

Whitelisted domains

Whitelisted IPs

Adding postcode lookup to an address form 🏡.