Block Users from Specific Countries using Hono Ultrafast Web Framework and Vercel Edge Functions

In this tutorial, we'll explore how to block users from specific countries using the Hono Ultrafast Web Framework in conjunction with Vercel Edge Functions. By the end, you'll have a setup in place to filter and handle users based on their country of origin.

Creating a Hono App with Vercel Template

Let's kick things off by setting up a Hono app with the Vercel template. This will serve as the foundation for our country-based blocking feature.

npm create hono@latest my-app

After running the command above, select the Vercel template option.

? Which template do you want to use?

❯   vercel

Then navigate into your app's directory and install the dependencies:

cd my-app
npm i

Obtaining the Request Header

To identify the country of the incoming request, we'll make use of the x-vercel-ip-country header provided by Vercel Edge Functions. Here's how to access this header in your Hono app:

// File: api/index.ts

// ...

app.get('/', (c) => {

  // Read more about this header on https://vercel.com/docs/edge-network/headers
  const INCOMING_COUNTRY_CODE = c.req.header('x-vercel-ip-country')

// ...

Blocking Users

Now that we have the country code, let's create conditional responses based on the user's country. You can define a list of blocked country codes and handle requests accordingly:

// File: api/index.ts

// ...

const BLOCKED_COUNTRY_CODES = ['US', 'FR']

app.get('/', (c) => {
  // ...
  if (!INCOMING_COUNTRY_CODE) return c.html(`Detected Country: ${INCOMING_COUNTRY_CODE}`)

  // If the user is from a blocked country, return a specific response
  if (BLOCKED_COUNTRY_CODES.includes(INCOMING_COUNTRY_CODE.toUpperCase())) {
    return c.html(`Detected Country: ${INCOMING_COUNTRY_CODE}, I have blocked users from this country.`)
  }

  // Else, return your actual response
  return c.html(`Detected Country: ${INCOMING_COUNTRY_CODE}, Redirecting you to our main website...`)
})

// ...

Got latency concerns? It's heck fast.

To measure the latency of such a middleware, I measured the performance of the endpoint from different locations, using SpeedVitals Batch Report. Here's what it has to show about it 👇🏻

Batch Report Link: https://speedvitals.com/result/TZSKWkx9/

The average TTFB being 33ms around the world! One would love to have such a powerful middleware on the edge for such a speed.

You're Done!

With these steps in place, you've learned how to effectively block users from specific countries based on their IP addresses. This can be a valuable feature for enhancing security and user experience on your website.