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: </span><span class="p">${</span><span class="nx">INCOMING_COUNTRY_CODE</span><span class="p">}</span><span class="s2">)

// 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: </span><span class="p">${</span><span class="nx">INCOMING_COUNTRY_CODE</span><span class="p">}</span><span class="s2">, I have blocked users from this country.)

  }

// Else, return your actual response

  return c.html(Detected Country: </span><span class="p">${</span><span class="nx">INCOMING_COUNTRY_CODE</span><span class="p">}</span><span class="s2">, 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.